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$" [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
- Build the library with
ng build ngx-mat-dynamic-table
- A new
dist
folder will appear with the library. - Run
ng serve
to start the demo.
How to contribute
- 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. - In another terminal run
ng serve
to test your changes to the library.
Install Locally to your own project
- Build the library with
ng build ngx-mat-dynamic-table
. - From your own project, run
npm install /path/to/library/dist
.