monkey-tables v0.0.3

MonkeyTables

This library was generated with Angular CLI version 15.1.0.

Description

The utility library Monkey Table is used to add tables in the front end. Displaying tabular data is made simple with the help of library. Additionally, an awesome table with features of sorting , searching & pagination is displayed.

Install

Run npm i monkey-tables to install monkey-tables lirary.

Setup

import MonkeyTablesModule Module into you module.ts file

...
import { MonkeyTablesModule } from 'monkey-tables';
...

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    MonkeyTablesModule,
    ...
  ],
  providers: [...],
  bootstrap: [...]
})
export class AppModule { }

Use

1. Add below code into your Component's HTML file

   <monkey-table [cols]="column" [data]="data"></monkey-table>

2. component.ts file. set sort and search key true to enable sorting and searching functionality for particular column

     column = [
       {
         name: 'id',
       },
       {
         name: 'title',
         sort: true,
         search: true,
       },
       {
         name: 'brand',
         sort: true,
         search: true,
       },
      ];
        data = [
       {
         id: 1,
         title: 'iPhone 6',
         brand: 'Apple',
       },
       {
         id: 2,
         title: 'iPhone 7',
         brand: 'Apple',
       },
       {
         id: 3,
         title: 'iPhone 8',
         brand: 'Apple',
       },
       {
         id: 4,
         title: 'iPhone X',
         brand: 'Apple',
       },
       {
         id: 5,
         title: 'iPhone 11',
         brand: 'Apple',
       },
       {
         id: 6,
         title: 'iPhone 12',
         brand: 'Apple',
       },
      ];

3. Run ng server