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.
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!