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.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

1
Leave a Reply

avatar
0 Comment threads
0 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
rinku
Guest
rinku

very nice