README
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: '+27827022334',
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