ngmat-sorted-table

A angular material component that renders tabular data and allows the user to sort the table by clicking the table headers.

Demo

Installation

npm install --save ngmat-sorted-table

API

import { SortedTableModule } from 'ngmat-sorted-table';

SortedTableComponent

A component that renders tabular data using ordinary HTML table elements and allows the user to sort the table data by clicking the table headers.

Selector: ngmat-sorted-table

Properties

| Name | Description | | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | @Input() headers: string[]; | Headers of the table as a array of strings | | @Input() rows: string[][]; | The data to be displayed in the table as a array of arrays of strings. | | @Input() disableClear = false; | Disables the user to clear the sorting of a columns, defaults to false. | | @Input() indexColumn = false; | If true, shows a first column with the index number of the table row, defaults to false. | | @Input() sortActive: string; | If set, the table will initialize with sorting of the defined column. Defaults to undefined. | | @Input() sortDirection: SortDirection; | The initial sorting direction, will have to be supplied if sortActive is set. Refer to Angular Material for details. | | @Output() sortStart: EventEmitter<void>(); | Emits when (re)sorting of the table data is about to start. | | @Output() sortEnd: EventEmitter<void>(); | Emits when (re)sorting of the table data is completed. | | @Output() sort: EventEmitter<Sort>(); | Emits when the user changes sorting of the table. See Angular Material for details. |

Theming

The component is themed according to angular material custom component styling guidelines. To make the component adhere to the applicaiton theme:

1. Include the component theme in the application theme file @import 'ngmat-sorted-table/theme';
2. Include the component theme mixin: @include ngmat-sorted-table-theme($app-dark-theme);