ngx-edutable

NgxEdutable

ngx-edutable is a simple data table for Angular projects.

Getting Started

ngx-edutable provides a table component which can: a. sort the table contents b. search for an entry in the table

Users can also set how many entries to show in the table.

Installation

Install ngx-edutable from npm:

npm install ngx-edutable --save

Add the module to NgModule imports:

import { NgxEdutableModule } from 'ngx-edutable';

@NgModule({
  ...
  imports: [NgxEdutableModule]
  ...
})

Add the component to your template:

<ngx-edutable [users]="users" [perPageLimits]="perPageLimits"></ngx-edutable>

Here, users and perPageLimits are Input properties of NgxEdutableComponent:

users is the data to be displayed in the table and perPageLimits is an array for the number of items to be displayed in the table.

In the component file,

export class MyComponent {
  users: any[] = [
    {
      "name": "John Doe",
      "occupation": "Artist",
      "Experience": "17 years"
    },
    {
      "name": "Jane Williams",
      "occupation": "Software Engineer",
      "Experience": "15 years"
    },
    {
      "name": "Harry Potter",
      "occupation": "Magician",
      "Experience": "10 years"
    }
  ]
  perPageLimits: any[] = [1,2,3];
  ...
  ...
  ...
}

Thats it! Happy coding...