JavaScriptAngularJSDynamic Data Table Component With Angular Material

Dynamic Data Table Component With Angular Material

Quick Look:-

  • What is an angular table component?
  • Getting started
    • 1. Prerequisites:
    • 2. Install material-dynamic-table:
    • 3. Import the installed libraries:
    • 4. Include mdt-dynamic-table in your component:
    • 5. Specify column definitions and data source:
  • Further info
    • API reference for material-dynamic-table
      • Properties
      • Methods
    • ColumnConfig definition
    • Cell types
      • string
      • date
    • Adding additional cell types
    • Adding filters
  • Angular Table Component FAQs

Dynamic table component for angular built on top of the angular material table. It offers sorting, pagination, filtering per column, and the ability to specify content types and components used for displaying them. The initial purpose of this library was to display data coming from OData API, although it can work with MatTableDataSource, however, it needs to be extended to enable filtering

What is an angular table component?

Angular Table Component is a built-in component in Angular that allows developers to display data in a tabular format. It provides a convenient and easy-to-use interface for creating dynamic, data-driven tables that can be sorted, filtered, and paginated.

The Angular Table Component is highly customizable and supports a variety of table configurations, including dynamic columns, cell templates, and row templates. It also supports two-way data binding, which allows developers to bind table data to form inputs, making it easy to edit and manipulate data directly in the table.

It is a powerful tool for displaying large datasets and is commonly used in web applications for displaying data in a user-friendly format.

Getting started

1. Prerequisites:

Angular material: Please follow
 The supported version of Angular Material will be indicated by the major version number of this library. Version 8.3.0 is for Angular Material ^8.0.0, version 9.3.0 is for ^9.0.0, while versions <1.3.0 should work for versions <8.0.0.

Filter is using material icon, so adding material icons may be needed as well:

2. Install material-dynamic-table:

npm install material-dynamic-table --save

3. Import the installed libraries:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { DynamicTableModule } from 'material-dynamic-table';

import { AppComponent } from './app';

  imports: [

export class AppModule {}

4. Include mdt-dynamic-table in your component:

<mdt-dynamic-table [columns]="columns" [dataSource]="dataSource"></mdt-dynamic-table>

5. Specify column definitions and data source:

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

import { ColumnConfig } from 'material-dynamic-table';

  selector: 'app',
  templateUrl: './app.component.html',
export class AppComponent {
 columns: ColumnConfig[] = [
      name: 'product',
      displayName: 'Product',
      type: 'string'
      name: 'description',
      displayName: 'Description',
      type: 'string'
      name: 'recievedOn',
      displayName: 'Received On',
      type: 'date'
      name: 'created',
      displayName: 'Created Date',
      type: 'date',
      options: {
        dateFormat: 'shortDate'

  data: object[] = [
      product: 'Mouse',
      description: 'Fast and wireless',
      recievedOn: new Date('2018-01-02T11:05:53.212Z'),
      created: new Date('2015-04-22T18:12:21.111Z')
      product: 'Keyboard',
      description: 'Loud and Mechanical',
      recievedOn: new Date('2018-06-09T12:08:23.511Z'),
      created: new Date('2015-03-11T11:44:11.431Z')
      product: 'Laser',
      description: 'It\'s bright',
      recievedOn: new Date('2017-05-22T18:25:43.511Z'),
      created: new Date('2015-04-21T17:15:23.111Z')
      product: 'Baby food',
      description: 'It\'s good for you',
      recievedOn: new Date('2017-08-26T18:25:43.511Z'),
      created: new Date('2016-01-01T01:25:13.055Z')
      product: 'Coffee',
      description: 'Prepared from roasted coffee beans',
      recievedOn: new Date('2015-04-16T23:52:23.565Z'),
      created: new Date('2016-12-21T21:05:03.253Z')
      product: 'Cheese',
      description: 'A dairy product',
      recievedOn: new Date('2017-11-06T21:22:53.542Z'),
      created: new Date('2014-02-11T11:34:12.442Z')

   dataSource = new FilteredDataSource<object>(;

Further info

API reference for material-dynamic-table

@Input() columns: ColumnConfig[]Column definition for dynamic table, order will determine column order
@Input() dataSource: DataSourceData source that provides data for dynamic table
@Input() pageSize: numberInitial page size for pagination – default 20
@Input() pageSizeOptions : number[]The set of provided page size options to display to the user.
@Input() showFilters: booleanIf the filters are defined adds the ability to turn them off – default true
@Input() stickyHeader : booleanWhether the table should have sticky header
@Input() paginator : MatPaginatorPaginator to be used instead of internal paginator or null to hide internal
@Output() rowClick: EventEmitterEvent emmited when row is clicked, parameter is the object used for displaying the row
getFilter(columnName: string): anyReturns currently set filter for the column with provided name
setFilter(columnName: string, filter: any)Sets the filter for the column with provided name
getFilters()Returns all set column filters
clearFilters()Removes all applied filters

ColumnConfig definition

ColumnConfig is used to provide specification for the columns to be displayed

nameName of the property to display – it should match propery name from data source
displayNameName to be displayed in column header
typeType of the data displayed by this column – it should match one of your defined cell types
optionsOptional field that can be used to pass extra data for cells
stickyOptional field that can make column sticky to start or end of table. Values: ‘start’, ‘end’
sortOptional field that can disable sort on the column if the value is false

Cell types

By default there are two types provided:


This displays plain string value for property defined under name in ColumnConfig. This is the default type used if there is no type specified for the data type.


This type will format property from as date. It can take additional parameter in ColumnConfig.options – dateFormat, which specifies what date format should be used (default is ‘short’)

Adding additional cell types

New cell types can be defined by adding a component, inheriting from CellComponent

Here is an example of options cell that can be used for showing possible actions

import { Component, Input } from '@angular/core';
import { CellComponent, ColumnConfig } from 'material-dynamic-table';
import { Product } from '../../product';

    selector: 'ld-options-cell',
    template: `<mat-menu #appMenu="matMenu">
  <button mat-menu-item  (click)="showDetails()">View Details</button>

<button mat-icon-button color="primary" [matMenuTriggerFor]="appMenu">
export class OptionsCellComponent implements CellComponent {
    column: ColumnConfig;

    row: Product;

    constructor() {}

    showDetails() {
        const productName = this.row.product;

        alert(`Product name is ${productName}.`);

Cell types then need to be registered:

import { OptionsCellComponent } from './cells/optionsCell/options-cell.component';

  declarations: [

  entryComponents: [
export class AppModule {
  constructor(private readonly cellService: CellService) {
    cellService.registerCell('options', OptionsCellComponent);

Adding filters

Filters icon an the column will be displayed whenever there is a registered filter for that columns type. To add a filter first create a component for modal dialog with a model that implements your filter interface. Then register it in the following way:

import { TextFilterComponent } from './filters/text-filter/text-filter.component';

  declarations: [

  entryComponents: [
export class AppModule {
  constructor(private readonly columnFilterService: ColumnFilterService) {
    columnFilterService.registerFilter('string', TextFilterComponent);

In this case it is a filter for string cell type named TextFilterComponent. See the example project for full design. To make use of filters you need to have data source that can handle them. See FilteredDataSource from the example to see how MatTableDataSource can be extended to handle it.

Filters can have a description that is displayed when the filter is applied. To set the description for the filter the filter model should have a method getDescription that returns a string. Implement interface ‘FilterDescription’ for your filter model to have the description displayed.

See live demo and download the source code.

This awesome script developed by relair. Visit their official repository for more information and follow for future updates.

Angular Table Component FAQs

What are the benefits of using Angular Table Component?

The Angular Table Component simplifies the process of creating and displaying data in a tabular format. It provides an efficient and flexible solution for displaying large datasets, and allows developers to customize the table appearance, data sorting, filtering, and pagination.

How do I add data to the Angular Table Component?

The Angular Table Component uses an array of objects to display data. You can define the array in the component TypeScript file, and then use the *ngFor directive to loop through the array and display the data in the table.

Can I customize the appearance of the Angular Table Component?

Yes, the Angular Table Component provides a variety of customization options, such as column sorting, pagination, cell templates, and row templates. You can also use CSS to style the table and its components.

Can I edit data directly in the Angular Table Component?

Yes, the Angular Table Component supports two-way data binding, which allows you to bind table data to form inputs, making it easy to edit and manipulate data directly in the table.

Can I use Angular Table Component with other Angular modules?

Yes, the Angular Table Component can be used with other Angular modules, such as Angular Forms and Angular Material. This allows you to add additional functionality and styling to the table.

Saroj Meher
Saroj Meher
Howdy! Friends, I am Saroj Meher. I am an Artist. I do Painting on mediums like Acrylic, Watercolour, Oil etc. I have over 7 years of experience in WordPress. I am currently running 30+ website. I am specialized in WordPress and WooCommerce, WordPress Theme Customization and Theme Development. I can fix any kind of WordPress error/issue like PHP, CSS, Js issues and other Theme and Plugin related issues. Client's Satisfaction is my first priority.

Subscribe For More!

Subscribe to get Latest Updates directly in you Emain Inbox.

Explore More


Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I am a Lecturer (English & Sociology), a professional Artist, and a blogger. I do painting, sketches since my childhood. I am in the teaching for 10 years. In this teaching line, I have experience in teaching English at High School and College levels. I have also experienced teaching computer theory during the school teaching period. This is my personal web corner over the internet.

Quick Guides

7 Simple Steps To Start Your Blogging Journey