A wrapper around @angular/material MatTable to generate tables with dynamic input.
npm install --save @bindoc/table The BdTable takes a DataSource, the columns to render and a template provider to
generate a table dynamically with the given cell specifications.
dataSource: BdDataSource<any>: Wrapped DataSource with additionalgetColumns()displayedColumns: string[]: names of the columns to rendercellTemplateProvider?: BdTemplateProvider: a template provider for custom cell templates
Extends @angular/material's DataSource and adds a function to retrieve the columns for the given data.
import {BD_TABLE_DATE_CELL_TYPE, BD_TABLE_VALUE_CELL_TYPE, BdDataSource, IBdTableColumn} from "@bindoc/table";
import {CollectionViewer} from "@angular/cdk/collections";
import {Observable} from "rxjs/Observable";
import 'rxjs/add/observable/of';
export class SampleDataSource extends BdDataSource<any> {
connect(collectionViewer: CollectionViewer): Observable<any[]> {
return Observable.of([
{
"startDate": {
date: "2017-06-17",
format: 'shortDate'
}
}
]);
}
disconnect(collectionViewer: CollectionViewer): void {}
getColumns(): IBdTableColumn[] {
return [
{
name: "startDate",
displayName: "Date",
type: BD_TABLE_DATE_CELL_TYPE
}
];
}
}The table is generated through columns and their specification.
name: name of the corresponding field in the row objectdisplayName: used in header row as title for the columntype: defines the cell template to use in columns cells
The table cell can render a custom template given by the BdTemplateProvider
passed to the table.
Also there are several integrated templates.
The most basic cell template just prints the given data value.
import {BdTemplateData} from "@bindoc/templates";
export const BD_TABLE_VALUE_CELL_TYPE: string = 'BdTableValueCell';
export class BdTableValueCellData implements BdTemplateData {
public type: string = BD_TABLE_VALUE_CELL_TYPE;
public data: any;
}The cell for printing formatted decimal values.
date: Date: the date valueformat: string: the format to pass to angulars DatePipe, default is 'short'
import {BdTemplateData} from "@bindoc/templates";
export const BD_TABLE_DATE_CELL_TYPE: string = 'BdTableDateCell';
export class BdTableDateCellData implements BdTemplateData {
public type: string = BD_TABLE_DATE_CELL_TYPE;
public data: {
date: Date,
format: string
};
}The cell for printing formatted date values.
date: Date: the date valueformat: string: the format to pass to angulars DatePipe, default is 'short'
import {BdTemplateData} from "@bindoc/templates";
export const BD_TABLE_DATE_CELL_TYPE: string = 'BdTableDateCell';
export class BdTableDateCellData implements BdTemplateData {
public type: string = BD_TABLE_DATE_CELL_TYPE;
public data: {
date: Date,
format: string
};
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent