@christophhu/dynamic-table v1.0.3

DynamicTable

Preperation

Install Angular Material and the package via npm:

ng add @angular/material
npm install dynamic-table --save
npm i @angular/cdk

Use

In the app.module.ts import the DynamicTableModule and BrowserAnimationsModule:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DynamicTableModule
  ]
  ...
})

Then you can use the dynamic-table component in your html:

<dynamic-table [data]="data" [columns]="columns"></dynamic-table>

For the overlay, you have to add @import '@angular/cdk/overlay-prebuilt.css to your style.css file.

Data

The data is an Observable of an array of objects. The objects must have the same properties. The properties are the columns of the table. The data is passed to the component via the data input:

data: Observable<any[]> = of([
  { id: 1, name: 'Max', age: 25 },
  { id: 2, name: 'Peter', age: 30 },
  { id: 3, name: 'Paul', age: 35 }
]);

Table

The table is of type DynamicTable. The table is passed to the component via the table input:

table: DynamicTable = {
  columns: [
    { name: 'id', label: 'ID' },
    { name: 'name', label: 'Name' },
    { name: 'age', label: 'Alter' }
  ],
  ...
};

If a row will have some actions, the actions can be defined in the actions property of the table:

table: DynamicTable = {
  columns: [
    { name: 'id', label: 'ID' },
    { name: 'name', label: 'Name' },
    { name: 'age', label: 'Alter' }
  ],
  actions: [
    { name: 'edit', label: 'Bearbeiten' },
    { name: 'delete', label: 'Löschen' }
  ],
  ...
};

constructor() {
  if (this.table.actions) this.table.columnNames.push('actions')
}

There are more properties of the table:

table: Tableoptions = {
    columns: [
      { id: '1', name: 'id', header: 'ID', cell: 'id', hidden: false, sortable: false },
      { id: '2', name: 'id_schiff', header: 'ID_Schiff', cell: 'id_schiff', hidden: false, sortable: false },
      { id: '3', name: 'date', header: 'Datum/Zeit', cell: 'date', pipe: { name: DatePipe, args: 'dd.MM.yyyy HH:mm'}, hidden: false, sortable: true, type: 'datetime-local' },
      { id: '4', name: 'ort', header: 'Ort', cell: 'ort', hidden: false, sortable: true },
      // { id: '3', name: 'date', header: 'Date', cell: 'date', pipe: { name: DatePipe, args: 'dd.MM.'}, hidden: false, sortable: true }
    ],
    columnFilter: ['id', 'id_schiff', 'date', 'ort'],
    columnNames: ['id', 'id_schiff', 'date', 'ort'],
    showCount: false,
    showPaginator: true,
    sortColumn: 'ort',
    sortStart: 'desc'
  }

  constructor() {
    if (this.table.showCount) this.table.columnNames.unshift('count')
  }

Known Issues

1. If showCount: true and showPaginator: false, the rows will be shown, but without a content.