Post
Ask Question

ng2-smart-table In 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
  1. import { Ng2SmartTableModule } from 'ng2-smart-table';  
  2.   
  3. @NgModule({  
  4.   imports: [  
  5.     Ng2SmartTableModule  
  6.   ],  
  7. })  
Step 4
 
We need to configure table and put ng2-smart-table component in app.component.html. 
  1. <ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table>  
Step 5
 
Add Setting Property inside component and create array for display data.
  1. public settings = {  
  2.     columns: {  
  3.       id: {  
  4.         title: 'Id',  
  5.         filter: true,  
  6.       },  
  7.       firstname: {  
  8.         title: 'Firstname',  
  9.         filter: true,  
  10.       },  
  11.       lastname: {  
  12.         title: 'Lastname',  
  13.         filter: true,  
  14.       }  
  15.     },  
  16.     pager: {  
  17.       display: true,  
  18.       perPage: 10  
  19.     },  
  20.     actions: {  
  21.       columnTitle: 'Action',  
  22.       add: false,  
  23.       edit: false,  
  24.       delete: false,  
  25.       position: 'left'  
  26.     },  
  27.     attr: {  
  28.       class: 'table table-striped table-bordered table-hover'  
  29.     },  
  30.     defaultStyle: false  
  31.   };  
  32.   
  33.   data = [  
  34.     {  
  35.       id: 1,  
  36.       firstname: "Kaushik",  
  37.       lastname: "dhameliya"  
  38.     },  
  39.     {  
  40.       id: 2,  
  41.       firstname: "Manish",  
  42.       lastname: "Vadher"  
  43.     },  
  44.     {  
  45.       id: 3,  
  46.       firstname: "Sanket",  
  47.       lastname: "Vagadiya"  
  48.     },  
  49.     {  
  50.       id: 4,  
  51.       firstname: "Vaibhav",  
  52.       lastname: "Bavishi"  
  53.     },  
  54.     {  
  55.       id: 5,  
  56.       firstname: "Tushar",  
  57.       lastname: "Kyada"  
  58.     }];  
Step 6
 
Run your application 
ng serve -o
 
 
Source Code
 
 
Conclusion

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