This module aims to provide a composeable and configureable Component for plugging together a data table. It aims to reduce boilerplate and let the developer configure the component.
npm install @flyacts/material-data-tableThis module aims to provide a composeable and configureable Component for
plugging together a data table. It aims to reduce boilerplate and let the
developer configure the component.
Install the dependency:
`` shell`
npm install --save --save-exact @flyacts/material-data-table
Include the module in your own angular module:
` typescript
import {
MatDataTableModule,
} from '@flyacts/material-data-table';
@NgModule({
imports: [
MatDataTableModule,
]
})
export class AppModule { }
`
Add the component to the template
` html`
[configuration]="configuration">
Your component can look like this:
` typescript
import { Component } from '@angular/core';
import {
Datasource,
TableConfiguration,
} from '@flyacts/material-data-table';
class Item {
public constructor(
public id: number,
public name: string,
) {}
}
@Component({
selector: 'app-overview',
templateUrl: './overview.component.html',
})
export class OverviewCompontent {
public dataSource: Datasource
public configuration: TableConfiguration
public constructor() {
this.dataSource.items = [
new Item(1', 'Foo'),
new Item(2', 'Bar'),
new Item(3', 'Baz'),
];
this.dataSource.pageIndex = 1;
this.dataSource.totalItemCount = 3;
this.configuration = new TableConfiguration
columns: [
new ColumnConfiguration({
accessor: 'id',
displayName: 'ID',
}),
new ColumnConfiguration({
accessor: 'name',
displayName: 'Name',
headerRowClass: 'auto-column',
contentRowClass: 'auto-column',
}),
],
buildLink: (row) => {
return ['/properties', row.id.toString()];
},
});
}
}
``
If you want to use sorting, filtering and/or pagination, you need to enable the
configuration values and implement the events and connect it to your
state/provider whatever you want to use.