Angular 7/6 | Add Data-tables with Ultimate features in Few Steps!

Supported from Angular 2 + to v7

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

Create a new Angular project by running following command

Install ngx-datatable in the project by running following NPM command

After installing, include NgxDatatableModule  in app.module.ts file and add in imports array

 

To add material styles provided by ngx-datatable open angular.json file, then include three CSS files in styles array as shown below

 

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

In the app.component.ts file, we will call dummy JSON data to build datatable

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

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

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

In component use @ViewChild as DatatableComponent

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.

Leave a Reply

avatar
  Subscribe  
Notify of