Dynamic Material Table Component For Angular

Angular dynamic table component built on top of Angular Table of Materials. It provides sorting, pagination, filtering for each column, and the ability to specify the types of content and components used to display it.

The initial purpose of this library was to display data coming from the OData API, although it can work with MatTableDataSource (however, it must be expanded to enable filtering.

how to add data dynamically to mat table datasource stackblitz, angularmaterial table dynamic columns, mat table with dynamic data, angular dynamic table columns

Vue Component for Designing Grid Layouts with SortableJS

How to make use of it:

1. Install and import the component.

# NPM
$ npm install material-dynamic-table --save

2. Import the dynamic spreadsheet component.

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

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

import { AppComponent } from './app';

@NgModule({
  ...
  imports: [
    ...

    DynamicTableModule
  ],
})
export class AppModule {}

3. Use the component in your application.

<mdt-dynamic-table [columns]="columns" [dataSource]="dataSource" [pageSize]="5"></mdt-dynamic-table>
<button mat-button (click)="clearFilters()">Clear filters</button>
<button mat-button (click)="setFilter()">Set filter</button>

4. Define columns, filters, and attributes.

export class AppComponent {
  title = 'material-dynamic-table-demo';

  @ViewChild(DynamicTableComponent) dynamicTable: DynamicTableComponent;

  columns: ColumnConfig[] = [
    {
      name: 'product',
      displayName: 'Product',
      type: 'string'
    },
    {
      name: 'description',
      displayName: 'Description',
      type: 'string'
    },
    {
      name: 'recievedOn',
      displayName: 'Recieved On',
      type: 'date'
    },
    {
      name: 'created',
      displayName: 'Created Date',
      type: 'date',
      options: {
        dateFormat: 'shortDate'
      }
    },
    {
      type: 'options'
    }
  ];

  data: Product[] = [
    {
      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(this.data);

  clearFilters() {    
    this.dynamicTable.clearFilters();
  }

  setFilter() {
    const createdColumnName = 'created';
    const appliedFilter = this.dynamicTable.getFilter(createdColumnName);
    if (!appliedFilter) {
      const filter = new DateFilter(createdColumnName);
      filter.fromDate = new Date(2015, 0, 1);
      filter.toDate = new Date(2015, 11, 31);

      this.dynamicTable.setFilter(createdColumnName, filter);      
    } else {
      const columnName = 'description';
      const filter = new TextFilter(columnName);
      filter.value = 'Loud';

      this.dynamicTable.setFilter(columnName, filter);      
    }
  }
}

API reference for material-dynamic-table

Properties

Methods

ColumnConfig definition

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

Dynamic Data Table Component, material-dynamic-table Plugin/Github, angular material table dynamic rows

See Demo And Download

Official Website(relair): Click Here

This superior jQuery/javascript plugin is developed by relair. For extra Advanced Usages, please go to the official website.