@flyacts/material-data-table NPM

Material Data Table

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.

Usage

Install the dependency:

npm install --save --save-exact @flyacts/material-data-table

Include the module in your own angular module:

import {
    MatDataTableModule,
} from '@flyacts/material-data-table';

@NgModule({
    imports: [
        MatDataTableModule,
    ]
})
export class AppModule {  }

Add the component to the template

<data-table
    [dataSource]="dataSource"
    [configuration]="configuration">
</data-table>

Your component can look like this:

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<Item> = new Datasource<Item>();

    public configuration: TableConfiguration<Item>;

    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<Item>({
            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.