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 -
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.
Loading comments...