ng2-smart-table In Angular

Getting started ng2-smart-table with Angular

Step 1

 

First, we create an Angular project using Angular cli.

 

 ng new demo --skip-tests --spec false

 

--skip-tests command is for removing test projects

--spec false command is for skip test file generation

 

 

Step 2

 

Now install smart table package in the project.

 

npm install ng2-smart-table --save

 

--save command is for adding external property.

 

Step 3

 

Add Ng2SmartTableModule reference in our app.module.ts

import { Ng2SmartTableModule } from 'ng2-smart-table';

@NgModule({
  imports: [
    Ng2SmartTableModule
  ],
})

Step 4

 

We need to configure table and put ng2-smart-table component in app.component.html. 

<ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table>

Step 5

 

Add Setting Property inside component and create array for display data.

public settings = {
    columns: {
      id: {
        title: 'Id',
        filter: true,
      },
      firstname: {
        title: 'Firstname',
        filter: true,
      },
      lastname: {
        title: 'Lastname',
        filter: true,
      }
    },
    pager: {
      display: true,
      perPage: 10
    },
    actions: {
      columnTitle: 'Action',
      add: false,
      edit: false,
      delete: false,
      position: 'left'
    },
    attr: {
      class: 'table table-striped table-bordered table-hover'
    },
    defaultStyle: false
  };

  data = [
    {
      id: 1,
      firstname: "Kaushik",
      lastname: "dhameliya"
    },
    {
      id: 2,
      firstname: "Manish",
      lastname: "Vadher"
    },
    {
      id: 3,
      firstname: "Sanket",
      lastname: "Vagadiya"
    },
    {
      id: 4,
      firstname: "Vaibhav",
      lastname: "Bavishi"
    },
    {
      id: 5,
      firstname: "Tushar",
      lastname: "Kyada"
    }];

Step 6

 

Run your application 

ng serve -o

 

 

Source Code

 

Github

 

Conclusion

Thanks a lot for reading. I hope you liked this article. Please share your suggestions and feedback.