Post
Ask Question

How To Use Ngx-Datatable To Show The Data In Grid View Using Angular 8

Introduction

 
In this article, we will learn how to show data in a list using ngx-datatable in Angular 8. It is available in the npm package which can be resued in our application whenever we want to show a list of records.
 
Prerequisites
  • Basic knowledge of Angular
  • Visual Studio Code must be installed
  • Angular CLI must be installed
  • Node JS must be installed
Step 1
 
Let's create a new Angular project using the following NPM command:
  1. ng new datatable
Step 2
 
Now, let's create a new component using the following command:
  1. ng g c ngx-datatable
Step 3
 
Install ngx-datatable from npm using the following command:
  1. npm i @swimlane/ngx-datatable
Step 4
 
Let add the template in our ngx-datatable.component.html.
  1. <div class="card card-default">    
  2.     <div class="content-heading">    
  3.         <h2>Example of ngx-datatable</h2>    
  4.     </div>    
  5.     <div class="card-body">    
  6.     
  7.         <ngx-datatable class='bootstrap no-detail-row' [columnMode]="'force'" [footerHeight]="50" [rowHeight]="'auto'"    
  8.             [rows]='rows' [count]="totalCount" [limit]="dataParams.page_size">    
  9.             <ngx-datatable-column name="Title 1" prop="title_line1"></ngx-datatable-column>    
  10.             <ngx-datatable-column name="Title 2" prop="title_line2"></ngx-datatable-column>    
  11.             <ngx-datatable-column name="Type" prop="type"></ngx-datatable-column>    
  12.             <ngx-datatable-column name="Order No" prop="order_number"></ngx-datatable-column>    
  13.             <ngx-datatable-column name="Action" widht="600">    
  14.                 <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>    
  15.                     <div class="text-left">    
  16.                         <a title="Edit" class="mr-2" href="javascript:void(0);">Edit</a>    
  17.                         <a title="Delete" href="javascript:void(0);"    
  18.                             >Delete</a>    
  19.                     </div>    
  20.                 </ng-template>    
  21.             </ngx-datatable-column>    
  22.         </ngx-datatable>    
  23.     </div>    
  24. </div>    
 
Step 5
 
Now, open the delete-confirmation-dailog.component.ts file and add the following code in this file:
  1. import { Component, OnInit } from '@angular/core';  
  2. import { Router } from '@angular/router';  
  3. import { NgxDatatableService } from './ngx-datatable.service';  
  4.   
  5.   
  6. @Component({  
  7.   selector: 'app-ngx-datatable',  
  8.   templateUrl: './ngx-datatable.component.html',  
  9.   styleUrls: ['./ngx-datatable.component.css']  
  10. })  
  11. export class NgxDatatableComponent implements OnInit {  
  12.   
  13.   rows: any = [];  
  14.   totalCount: Number = 0;  
  15.   closeResult: string;  
  16.   dataParams: any = {  
  17.     page_num: '',  
  18.     page_size: ''  
  19.   };  
  20.   
  21.   constructor(  
  22.     private ngxDatatableService: NgxDatatableService  
  23.   ) { }  
  24.   
  25.   ngOnInit() {  
  26.     this.dataParams.page_num = 1;  
  27.     this.dataParams.page_size = 20;  
  28.     this.getAllHeroList();  
  29.   }  
  30.   
  31.   
  32.   getAllHeroList() {  
  33.     this.rows = this.ngxDatatableService.hero_pages;  
  34.     this.totalCount = this.ngxDatatableService.total_count;  
  35.   }  
  36.   
  37.   
  38. }  
 
Step 6
 
We are adding one service file to fetch and show some dummy data. To create it, let's run the following code in the terminal:
  1. ng g s ngx-datatable   
Step 7
 
Now, open the ngx-datatable.service.html file and add the following code:
  1. import { Injectable } from '@angular/core';  
  2. import { from, Observable } from 'rxjs';  
  3. import { catchError } from 'rxjs/operators';  
  4.   
  5. @Injectable({  
  6.   providedIn: 'root'  
  7. })  
  8. export class NgxDatatableService {  
  9.   hero_pages;  
  10.   total_count;  
  11.   constructor() {  
  12.     this.hero_pages = [{  
  13.       'id': '05fb32e7-9fae-4879-8379-d037937fdc24',  
  14.       'status': 'ACTIVE',  
  15.       'title_line1': 'MAKING FANTASY FOOTBALL',  
  16.       'title_line2': 'A REAL THING',  
  17.       'type': 'FCF',  
  18.       'order_number': 1  
  19.     }, {  
  20.       'id': '05fb32e7-9fae-4879-8379-d037937fdc24',  
  21.       'status': 'ACTIVE',  
  22.       'title_line1': 'MAKING FANTASY FOOTBALL',  
  23.       'title_line2': 'A REAL THING',  
  24.       'type': 'FCF1',  
  25.       'order_number': 2  
  26.     }, {  
  27.       'id': '05fb32e7-9fae-4879-8379-d037937fdc24',  
  28.       'status': 'ACTIVE',  
  29.       'title_line1': 'MAKING FANTASY FOOTBALL',  
  30.       'title_line2': 'A REAL THING',  
  31.       'type': 'FCF2',  
  32.       'order_number': 3  
  33.     }, {  
  34.       'id': '05fb32e7-9fae-4879-8379-d037937fdc24',  
  35.       'status': 'ACTIVE',  
  36.       'title_line1': 'MAKING FANTASY FOOTBALL',  
  37.       'title_line2': 'A REAL THING',  
  38.       'type': 'FCF3',  
  39.       'order_number': 4  
  40.     }];  
  41.   
  42.     this.total_count = this.hero_pages.length;  
  43.   }  
  44. }  
Step 8
 
Now, open the app.component.html file and add the following code:
  1. <app-ngx-datatable></app-ngx-datatable>     
Step 9
 
Let's open the app.module.ts file and add the following code: Import ngb Module in root module component
  1. import { NgModule } from '@angular/core';  
  2. import { BrowserModule } from '@angular/platform-browser';  
  3. import { FormsModule } from '@angular/forms';  
  4. import { AppComponent } from './app.component';  
  5. import { NgxDatatableComponent } from './ngx-datatable/ngx-datatable.component';  
  6. import { NgxDatatableModule } from '@swimlane/ngx-datatable';  
  7.   
  8.   
  9. @NgModule({  
  10.   // tslint:disable-next-line: deprecation  
  11.   imports: [BrowserModule, FormsModule, NgxDatatableModule],  
  12.   declarations: [AppComponent, NgxDatatableComponent],  
  13.   bootstrap: [AppComponent]  
  14. })  
  15. export class AppModule { }  
Step 10
 
To style the datatable with pagination, we need to add some css in our style.css file. Just copy the below code and paste it in the style .css file.
  1. @import '~@swimlane/ngx-datatable/release/index.css';  
  2. @import '~@swimlane/ngx-datatable/release/themes/bootstrap.css';  
  3. @import '~@swimlane/ngx-datatable/release/assets/icons.css';  
  4.   
  5. .ngx-datatable.bootstrap {  
  6.   background-color: transparent;  
  7.   box-shadow: 0 0 0 #000;  
  8. }  
  9.   
  10. .ngx-datatable.scroll-vertical {  
  11.   height: 300px;  
  12. }  
  13.   
  14. .no-detail-row .datatable-row-detail {  
  15.   display: none !important;  
  16. }  
  17.   
  18. .ngx-datatable.bootstrap.single-selection .datatable-body-row.active,  
  19. .ngx-datatable.bootstrap.single-selection .datatable-body-row.active .datatable-row-group,  
  20. .ngx-datatable.bootstrap.multi-selection .datatable-body-row.active,  
  21. .ngx-datatable.bootstrap.multi-selection .datatable-body-row.active .datatable-row-group,  
  22. .ngx-datatable.bootstrap.multi-click-selection .datatable-body-row.active,  
  23. .ngx-datatable.bootstrap.multi-click-selection .datatable-body-row.active .datatable-row-group,  
  24. .ngx-datatable.bootstrap.single-selection .datatable-body-row.active:hover,  
  25. .ngx-datatable.bootstrap.single-selection .datatable-body-row.active:hover .datatable-row-group,  
  26. .ngx-datatable.bootstrap.multi-selection .datatable-body-row.active:hover,  
  27. .ngx-datatable.bootstrap.multi-selection .datatable-body-row.active:hover .datatable-row-group,  
  28. .ngx-datatable.bootstrap.multi-click-selection .datatable-body-row.active:hover,  
  29. .ngx-datatable.bootstrap.multi-click-selection .datatable-body-row.active:hover .datatable-row-group {  
  30.   background-color: red !important;  
  31. }  
  32.   
  33. .datatable-body-cell {  
  34.   color: #106cc8;  
  35. }  
  36.   
  37. .datatable-icon-right {  
  38.   text-decoration: none !important;  
  39. }  
  40.   
  41. .ngx-datatable.bootstrap .empty-row {  
  42.   text-align: center;  
  43.   margin-top: 20px;  
  44. }  
  45.   
  46. .ngx-datatable.bootstrap .datatable-footer {  
  47.   background-color: transparent;  
  48.   color: red;  
  49. }  
  50.   
  51. .ngx-datatable.bootstrap .datatable-footer .datatable-pager a {  
  52.   color: blue;  
  53. }  
  54.   
  55. .pager li>a,  
  56. .pager li>span {  
  57.   border-color: black;  
  58. }  
  59.   
  60. .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a,  
  61. .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {  
  62.   background-color: blue;  
  63.   border-color: blue;  
  64.   color: #fff;  
  65. }  
  66.   
  67. .ngx-datatable.bootstrap .datatable-body .datatable-body-row {  
  68.   border: 0;  
  69. }  
  70.   
  71. .ngx-datatable.bootstrap .datatable-body .datatable-body-row.datatable-row-even {  
  72.   background-color: rgba(0, 0, 0, 0.025);  
  73. }  
  74.   
  75. .ngx-datatable.bootstrap .datatable-body .progress-linear {  
  76.   display: block;  
  77.   position: relative;  
  78.   width: 100%;  
  79.   height: 5px;  
  80.   padding: 0;  
  81.   margin: 0;  
  82.   position: absolute;  
  83. }  
  84.   
  85. .ngx-datatable.bootstrap .datatable-body .progress-linear .container {  
  86.   display: block;  
  87.   position: relative;  
  88.   overflow: hidden;  
  89.   width: 100%;  
  90.   height: 5px;  
  91.   -webkit-transform: translate(0, 0) scale(1, 1);  
  92.   transform: translate(0, 0) scale(1, 1);  
  93.   background-color: #aad1f9;  
  94. }  
  95.   
  96. .ngx-datatable.bootstrap .datatable-body .progress-linear .container .bar {  
  97.   transition: all .2s linear;  
  98.   -webkit-animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);  
  99.   animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);  
  100.   transition: -webkit-transform .2s linear;  
  101.   transition: transform .2s linear;  
  102.   background-color: #106cc8;  
  103.   position: absolute;  
  104.   left: 0;  
  105.   top: 0;  
  106.   bottom: 0;  
  107.   width: auto;  
  108.   height: 5px;  
  109. }  
  110.   
  111. .wrapper .aside-container .aside-inner,  
  112. .wrapper .aside-container {  
  113.   width: 230px;  
  114. }  
Now its time for the Output:
 

Conclusion

 
Finally, we have completed how to show a list of data using ngx-datatable in Angular 8.
 
I hope you liked this tutorial. Please share it with others.
 
Thank you for taking your valuable time to read the full article.


Similar Articles