Press "Enter" to skip to content

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

NameDescription
@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

Methods

NameDescription
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

PropertyDescription
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

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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.