Angular Material Table with Filtering, Sorting, Pagination, Deletion, Customized Column Data and more

The angular material table has many features but sometimes based on needs we need to customize the mat table accordingly. In this tutorial, I am going to demonstrate how to use the Angular Material Data Table and how you can customize the Material table according to your needs. 

  • Table Soring
  • Filtering
  • Pagination (local customized)
  • Deletion
  • Configurable Column Data
  • Row Selection Checkbox
  • Dynamic Row Data - Text, HTML, Image

 


Install Angular Material Module

Assuming, you have already created an Angular application (v. 11), and now going to set up mat-table for your tabular data. For that, you do need to install the material module.

npm install @angular/material --save-dev

Then you can add all material modules in one module and add the main module, so that way your material modules will be available across the application.

 

 

import { NgModule } from '@angular/core';

import { MatButtonModule } from '@angular/material/button';

import { MatCheckboxModule } from '@angular/material/checkbox';

import { MatFormFieldModule } from '@angular/material/form-field';

....

 

const modules = [

MatButtonModule,

MatCheckboxModule,

MatFormFieldModule,

...

];

 

@NgModule({

imports: modules,

exports: modules,

})

export class MaterialModule { }

 

 

 


Custom Material Table Creation with external Configuration

Next, I have created a common custom table component and wrapped it with one module, and export the module, So that I can access my customized table component across application too.

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { MaterialModule } from './material.module';

import { CustomTableComponent } from './custom-table/custom-table.component';

 

@NgModule({

declarations: [

CustomTableComponent // going to access the component across the application

],

imports: [

CommonModule,

MaterialModule

],

exports: [

CustomTableComponent // going to access the component across the application

]

})

export class TableUIModule { }

 

 

I have created a configuration JSON for the table, like as below - 

private static columnType = ['text', 'html', 'image'];

 

public static tableConfig = {

type: 'simple_table', // table identifier 

headers: [ // Column name, values, type, sorting configuration

{

title: 'COMPANY',

columnName: 'company',

sorting: true,

width: '161px',

isBold: true,

columnType: TableConstant.columnType[0],

},

{

title: 'OS',

columnName: 'os',

sorting: false,

width: '160px',

isBold: false,

columnType: TableConstant.columnType[0],

},

{

title: 'WEBSITE',

columnName: 'website',

sorting: false,

width: '200px',

isBold: true,

columnType: TableConstant.columnType[1],

},

{

title: 'LOGO',

columnName: 'logo',

sorting: false,

width: '100px',

isBold: false,

columnType: TableConstant.columnType[2],

}

],

checkbox: true,

selectAllCheckBox: false,

delete: false,

numberOfItemPerPage: 5,

search: true,

dataSource: [],

characterCount: {

datatype: 25,

comments: 50

},

imagePath: 'path',

disableUserInteraction: false

};

 

 

The data source I am reading is from local JSON. But you can fetch the data from REST API and pass the Array of collection to the table by using dataSource property.  

ngOnInit(): void {

this.tableDataService.getTableData().subscribe(res => {

this.configureTableData(res);

});

}

 

configureTableData(tableData: Array<TableData>): void {

this.config = this.tableDataService.tableConfiguration; // pass the configuration

 

this.dataSource.next(tableData); // pass data source to table

this.count = tableData.length;

this.config = this.config;

}

 

Also, you need to include the custom table component in HTML.

<div style="margin-top: 5rem;">

<app-custom-table *ngIf="config"

[tableConfig]='config'

[data]="dataSource"

(selectedRow)="selectedTableRowData($event)"

(deleteAll)="deleteSelectedItems($event)"

(searchCount)="updateSearchCount($event)"></app-custom-table>

</div>

 


A Customized Angular Material Table (Responsive & Mobile friendly)

From the right-hand side Configure button, you could configure data JSON and can see the outcome on the following page.

 

mat table sorting searching custom row pagination

 

You could find the complete codebase from GitHub - https://github.com/lazypanda-instance/angular-router-navigation/tree/custom-table-ui-new

Please share your comments.

Happy Coding!