Supported from Angular 2 + to v8
Data tables are widely used in applications to show data sets with necessary features which are must to have for good user interactions like Pagination, Sorting by columns, Scrollings in horizontal and verticle directions, etc.
Application dealing with a large number of tabular data, it becomes very difficult to manage other details as well like the columns with custom templating and flexible styling.
In this post, we will discuss a very popular Datatable module ngx-datatable which is fully loaded with many required features and also very easy to use and manage.
Let’s create a new Angular project using the latest CLI v7.3.8
| 1 2 | $ npm i @angular/cli |
Create a new Angular project by running following command
| 1 2 3 | $ ng new angular-datatables $ cd angular-datatables |
Install ngx-datatable in the project by running following NPM command
| 1 2 | $ npm install @swimlane/ngx-datatable |
After installing, include NgxDatatableModule in app.module.ts file and add in imports array
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { NgxDatatableModule } from '@swimlane/ngx-datatable'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, NgxDatatableModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
To add material styles provided by ngx-datatable open angular.json file, then include three CSS files in styles array as shown below
| 1 2 3 4 5 6 7 8 9 10 11 | .... .... "styles": [ .... "node_modules/@swimlane/ngx-datatable/release/assets/app.css", "node_modules/@swimlane/ngx-datatable/release/themes/material.css", "node_modules/@swimlane/ngx-datatable/release/assets/icons.css" ], .... .... |
That’s all you need to do, now you can easily use Datatables anywhere in your project.
Open app.component.html file then add following HTML code with data table template with dummy data
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <ngx-datatable class="material" [rows]="rows" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="50" [scrollbarV]="true" [sorts]="[{prop: 'name', dir: 'desc'}]"> <ngx-datatable-column name="Company"> <ng-template let-row="row" ngx-datatable-cell-template> {{row.company}} </ng-template> </ngx-datatable-column> <ngx-datatable-column name="Name"> <ng-template let-row="row" ngx-datatable-cell-template> {{row.name}} </ng-template> </ngx-datatable-column> <ngx-datatable-column name="Gender"> </ngx-datatable-column> </ngx-datatable> |
In the app.component.ts file, we will call dummy JSON data to build datatable
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'angular-datatables'; rows = []; ngOnInit() { this.fetch((data) => { this.rows = data; }); } fetch(cb) { const req = new XMLHttpRequest(); req.open('GET', `http://swimlane.github.io/ngx-datatable/assets/data/company.json`); req.onload = () => { const data = JSON.parse(req.response); cb(data); }; req.send(); } } |
Issues with Implement Sorting with different column Header Name
Sorting sometimes stops working if there is a mismatch in Column name and data property.
Sorting on Company Name will not work
| 1 2 3 4 5 6 7 8 9 10 | ... ... <ngx-datatable-column name="Company Name"> <ng-template let-row="row" ngx-datatable-cell-template> {{row.company}} </ng-template> </ngx-datatable-column> ... ... |
as name attribute is having “Company Name” which is different from company in {{row.company}}
So to resolve this we need to add prop attribute
Sorting will work fine
| 1 2 3 4 5 6 7 8 9 10 | ... ... <ngx-datatable-column name="Company Name" prop="company"> <ng-template let-row="row" ngx-datatable-cell-template> {{row.company}} </ng-template> </ngx-datatable-column> ... ... |
Note: prop value is case sensitive so it should match exactly with data property.
How to Disable Sorting on a Single Column
Just add [sortable]=”false” on <ngx-datatable-column> to disable sorting on single column.
How to Change/ Rest pagination in Ngx-datatables?
Add an angular hash variable #myTable
| 1 2 3 4 5 6 7 8 | <ngx-datatable #myTable class="material" [rows]="rows" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="50" [scrollbarV]="true" [sorts]="[{prop: 'name', dir: 'desc'}]"> ... ... </ngx-datatable> |
In component use @ViewChild as DatatableComponent
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | ... ... import { DatatableComponent } from '@swimlane/ngx-datatable'; @Component({ selector: 'app-datatable', templateUrl: './datatable.component.html' }) export class DatatableComponent implements OnInit { @ViewChild('myTable') table: DatatableComponent; ngOnInit() { // for page number 1 as offset starts with 0 this.table.offset = 0; } ... ... |
by using offset you can change/ reset default pagination page number in ngx-datatable
So, in the above post, we got to know How to implement Datatables in Angular application with full of features in a few steps. Check more demos here.
very nice