Angular Material 7 | Data Tables Example with Sorting, Filter, Pagination and Fixed header columns

Angular Material provides datatable components equipped with many common features like data filter, pagination, sorting on columns and even frozen columns and headers.

In this post, we will create an Angular application using Angular Material Tables component to show JSON data in tabular form. We can get data from server side using API’s.

Let’s get started…

Make sure you have the latest version of NodeJS and Angular CLI installed

Create a new Angular project

We will create a new Angular project using CLI by running following command in CMD

Install Angular Material in project

Run following NPM commands to install material, CDK and animations packages

Import BrowserAnimationsModule in app.module.ts file

include Material theme in styles.css

Now our Angular project is ready to use Material components.

Import Angular Material Datatables

After adding Angular material in our project, next, we need to import MatTableModule in app’s main module file app.module.ts then add in imports array as shown below.

Now we can use Material Datatables in our application.

Create Simple Datatable

Let’s start by adding the simplest Datatable in our App component.

Open app.component.ts file then add <table mat-table></table> Or  <mat-table></mat-table> as datatable wrapper.

After that, we define a dataSource attribute with a data object.

Define columns: Columns of data tables are defined by using the following template.

<ng-container> is to define column definition having matColumnDef value which must be unique for a column.

<mat-header-cell> with *matHeaderCellDef contains the Text for column header.

<mat-cell> having object key of data passed as variable in *matCellDef

After that in <mat-table> we add following templates for Header and Row cell configuration

displayedColumns will have an array list of columns we want to display in Datatables

Finally, our Simple Datatable will have the following template and component code.

Pagination in Datatables

To add pagination in Datatable we need to import MatPaginatorModule in the app.module.ts file then add in the imports array

Then add <mat-paginator> immediately after <mat-table> tag as shown below

In the app.componet.ts file, we will import MatPaginator & MatTableDataSource and use it to get paginator instance as shown below

Sorting on Datatable Columns

Sorting can be easily implemented on Datatable, just import MatSortModule in app.module.ts file

After that add matSort directive on mat-table wrapper then mat-sort-header on every column where you want sorting functionality.

In the app.componet.ts file in which we have Datatable, we will import MatSort then use that instance as shown below

Filter Datatable Rows

To filter datatable rows we will add an input field with a (keyup) event listener, which will simply filter the dataSource object as shown below

In app.component.ts file just add below method to filter datatable data.

That’s it

Sticky or Freeze Headers and Columns in Datatables

Sometime we may need to freeze Header or Footer rows or Columns with Checkboxes or actions. We can use sticky directive on our Headers, Footers or Columns as shown below.

Freeze Header:

Freeze Footer: 

Freeze Columns:

 

So here we quickly go through some powerful features available in Angular Material Datatables, you can check more details on docs 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

Leave a Reply

avatar
  Subscribe  
Notify of