ngx-mat-dynamic-table

Dynamic tables built with angular material. Pull requests welcome.

Getting Started

A full demo can be found on the github repository.

Install with npm:

npm i ngx-mat-dynamic-table

After installation include NgxMatDynamicTableModule in your module imports:

import { NgxMatDynamicTableModule } from 'ngx-mat-dynamic-table';
...
imports: [
    NgxMatDynamicTableModule
  ],
...

Column types are defined as follow:

export interface DynamicTableColumnDefinition extends DynamicTableColumn {
  columnDef: string, // The key of the data, can access nested objects
  columnTitle: string, // The title of the column
  type?: 'number' | 'date' | 'icon'; // Type of data in the field: number, date, icon
  search?: boolean; // By default a column cannot be searched, enable search on this column
  total?: boolean // calculate the total of this column, only on type number
  average?: boolean // calculate the average of this column, ony on type number
  icons?: { value: any, matIcon: string, color: string, matTooltip: string }[] // Material icons only, only on type icon
  sort?: 'asc' | 'desc'; // asc of desc, default sort, can only be applied to one column.
  dateFormat?: string; // for dates eg. 'yyyy/MM/dd, HH:mm'
  hidden?: boolean; // Hide this column, enable optionalColumns to view
  cellClassKey?: string; // Apply a class to a cell, class name must be in the data
}

Source data must be an observable:

let data: Observable<User[]> = [{
      name: 'Luke',
      surname: 'Kroon',
      number: '[phone]',
      signupDate: new Date('2019/01/22'),
      subscribed: true,
      money: {
        netWorth: 50000
      }
    }];

In your component define the columns:

columns: DynamicTableColumnDefinition[] = [
    {
      columnDef: 'name',
      columnTitle: 'Name',
      search: true
    }
    ...
]

In the HTML add the selector:

<ngx-mat-dynamic-table-container [tableData$]="data$" [columns]="columns" filter="true" export="true"
        (rowClicked)="rowData($event)" rowClick="true" fileName="Test" optionalColumns="true" multiple="true"
        (selectedRows)="selectedRows($event)" [pageSizeOptions]="[15, 30, 60]"></ngx-mat-dynamic-table-container>

Inputs:

tableData$ = Table data in observable columns = Column definitions filter = Enable the filter box on the table export = Enable export button rowClicked = Output for the click event on the row rowClick = Enable cursor to indicate table is clickable fileName = File name of the excell export optionalColumns = Enable optional columns multiple = Enable mulitple select selectedRows = Output for all selected rows

For more examples run the demo application.

How to run the demo application

1. Build the library with ng build ngx-mat-dynamic-table
2. A new dist folder will appear with the library.
3. Run ng serve to start the demo.

How to contribute

1. In one terminal build the library with ng build ngx-mat-dynamic-table --watch. This command will check for any file changes in the library directory.
2. In another terminal run ng serve to test your changes to the library.

Install Locally to your own project

1. Build the library with ng build ngx-mat-dynamic-table.
2. From your own project, run npm install /path/to/library/dist.