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';
  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. };
  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.

3 Comments

Join the conversation! Your thoughts help the community grow.

  • Muthu Kumar

    Muthu KumarPosted Feb 4, 2019, 6:20 AM

    How to add pageLimit option in ng2-smart-table

  • Pacharaphol KongnilPosted Nov 6, 2018, 10:20 PM

    How to remove ng2-smart-table from website??

    • Kaushik DhameliyaPosted Nov 11, 2018, 10:56 PM

      Remove ng2-smart-table in package.json, then fire npm install command after successfully run then remove all ng2-smart-table related variable in website