@dimanoid/ngx-dm-table NPM

ngx-dm-table

npm version bundle size build

Demo page: https://dimanoid.github.io/ngx-dm-table/

Installation

Install the library and dependecies:

npm i -S @angular/cdk resize-observer-polyfill @dimanoid/ngx-dm-table

Add module to imports:

import { DmTableModule } from '@dimanoid/ngx-dm-table';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule, BrowserAnimationsModule, CommonModule,
        .......
        DmTableModule  // <-------
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

API

DmTableComponent

<dm-table>
    <!-- see DmColumnDirective below -->
    <dm-column></dm-column>
    <dm-column></dm-column>
    <dm-column></dm-column>

    <!-- optional header for groups -->
    <ng-template #groupHeader
        let-row="row"
        let-rowIndex="ri"
        let-group="group"> <!-- group: DmTableRowsGroup -->
    </ng-template>

    <!-- optional footer for groups -->
    <ng-template #groupFooter
        let-row="row"
        let-rowIndex="ri"
        let-group="group"> <!-- group: DmTableRowsGroup -->
    </ng-template>
</dm-table>

Property	Description	Type	Default value
`[data]`	Array of rows to display	`any[]`
`[trackBy]`	trackBy function that will be used in `*cdkVirtualFor`	`(index: number, item: T) => any`
`[itemSize]`	Row height in pixels, minimum if rows has variable height	`number`	MIN_ITEM_SIZE (30)
`[moveableColumns]`	Whether table columns can be reordered by drag-n-drop or not	`boolean`	true
`[(colsOrder)]`	Array of row's IDs defining the current display order, can be changed if `[moveableColumns]` is set to true	`string[]`
`(colsOrderChange)`	Callback executed when `[colsOrder]` is changed	`EventEmitter<string[]>`
`[(colsWidth)]`	Hashmap of columns widths, object where key is column ID and value is width in pixels	`{ [id: string]: number }`
`(colsWidthChange)`	Callback executed when `[colsWidth]` is changed	`EventEmitter<{ [id: string]: number }>`
`[colsVisibility]`	Hashmap of columns visibility, object where key is column ID and value is boolean indicating if this column should be displayed	`{ [id: string]: boolean }`
`[externalSort]`	If `true` no internal sort will be performed, just change value and display	`boolean`	false
`[(sort)]`	Column ID and order used for internal sorting	`DmTableSort`
`(sortChange)`	Callback executed when `[sort]` is changed	`EventEmitter<DmTableSort>`
`[defaultColumnConfig]`	Default config for columns, can be overriden in column's definition	`DmTableColumnConfig`
`[tableClass]`	CSS classes that will be added to the `<table>` tags (header, body and footer tables)	`string`
`[rowClasses]`	Hashmap where key is CSS classes that will be added to row's `<tr>` tag if value function will return true	`{ [className: string]: (row: { [colId: string]: any },index: number,group:DmTableRowsGroup) => boolean }`
`(headerClick)`	Fires when table header is clicked	`EventEmitter<DmTableHeaderEvent>`
`(headerContextMenu)`	Fires when table header is right-clicked	`EventEmitter<DmTableHeaderEvent>`
`(rowClick)`	Fires when table row is clicked	`EventEmitter<DmTableRowEvent>`
`(rowContextMenu)`	Fires when table row is right-clicked	`EventEmitter<DmTableRowEvent>`
`[rowsDragEnabled]`	Enable DragEvents on rows	`boolean`	false
`(rowDragStart)`	Fires (if `rowsDragEnabled = true`) when table row gets `ondragstart` event.	`EventEmitter<DmTableRowDragEvent>`
`(rowDragEnd)`	Fires (if `rowsDragEnabled = true`) when table row gets `ondragend` event.	`EventEmitter<DmTableRowDragEvent>`
`[rowsDropEnabled]`	Enable DropEvents on rows	`boolean`	false
`(rowDrop)`	Fires (if `rowsDropEnabled = true`) when table row gets `ondrop` event.	`EventEmitter<DmTableRowDragEvent>`
`[rowDropAllowed]`	Callback function that determines if the dragged object can be dropped on this row	`(event:DmTableRowDragEvent) => boolean`	() => true

DmColumnDirective

<dm-column>
    <ng-template #header></ng-template> <!-- optional header template for column -->

    <!-- optional cell template for column -->
    <ng-template #cell
        let-row="row"
        let-dmColumnDirective="ct"
        let-colIndex="ci"
        let-rowIndex="ri">
    </ng-template>

    <!-- OR -->
    <ng-template #cell let-cellValue></ng-template>
    
    <ng-template #footer></ng-template> <!-- optional footer template for column -->
</dm-column>

Property	Description	Type
`[colId]`	Unique ID of the column	`string`
`[colIdAlias]`	Alternative ID of the column that can be used to match the current sort	`string`
`[title]`	Column header title string, will be displayed if no `#header` template is defined	`string`
`[pinnable]`	Not yet implemented	`boolean`
`[sortable]`	Whether the table can be sorted by this column or not	`boolean`
`[resizable]`	Whether this column can be resized or not	`boolean`
`[flexible]`	Should be set for the column that will "accumulate" all the size change first, if not set the last column will be marked as flexible, if more then one column set as flexible last one will be used	`boolean`
`[whitespace]`	This will be set as a value of the CSS property `whitespace` for every cell in this column	`string`
`[minWidth]`	Minimum width of the column in pixels, column will not be shrinked less then this value	`number`
`[maxWidth]`	Maximum width of the column in pixels, column will not be expanded more then this value	`number`
`[frozen]`	Not yet implemented	`'left' \\| 'right' \\| 'no'`
`[headerTooltip]`	This will be set as a `title` of column's header tag	`string`
`[headerClass]`	CSS classes that will be added to column's header `<th>` tag	`string`
`[cellClass]`	CSS classes that will be added to column's cell `<td>` tag	`string`
`[cellClasses]`	Hashmap where key is CSS classes that will be added to cell's `<td>` tag if value function will return true	`{ [className: string]: (row: { [colId: string]: any },colId: string,rowIndex: number,colIndex: number,group:DmTableRowsGroup) => boolean }`
`[footerClass]`	CSS classes that will be added to column's footer `<td>` tag	`string`
`[sort]`	Type of data for internal sort or custom sort function	`'string' \\| 'number' \\| 'boolean' \\| ((a: any, b: any) => number)`

DmTableSort

export interface DmTableSort {
    colId: string;
    order: number;
}

DmTableColumnConfig

export class DmTableColumnConfig {
    pinnable: boolean = false;
    sortable: boolean = false;
    resizable: boolean = true;
    whitespace: string = 'normal';
    minWidth: number;
    headerClass: string;
    cellClass: string;
    footerClass: string;
    sort: 'string' | 'number' | 'boolean' | ((a: any, b: any) => number);

    constructor(json?: any) { }
}

DmTableHeaderEvent

export interface DmTableHeaderEvent {
    colId: string;
    index: number;
    first: boolean;
    last: boolean;
    event: MouseEvent;
}

DmTableRowEvent

export interface DmTableRowEvent {
    index: number;
    row: any;
    event: MouseEvent;
}

DmTableRowDragEvent

export interface DmTableRowDragEvent {
    index: number;
    row: any;
    event: DragEvent;
}

DmTableRowsGroup

export interface DmTableRowsGroup {
    index: number;
    first: number;
    last: number;
    rows: any[];
    data: any;
}

Example

<dm-table class="ngx-dmt-stripes"
    [data]="[
        [1, 'one', { key: 'value1' }],
        [2, 'two', { key: 'value2' }],
        [3, 'three', { key: 'value3' }]
    ]"
    [colsWidth]="{ 0: 50 }"
    [defaultColumnConfig]="{ minWidth: 200 }">
    <dm-column title="ID"
        minWidth="50" maxWidth="150"
        sortable="true" sort="number">
    </dm-column>
    <dm-column title="Text" sortable="true" sort="string"></dm-column>
    <dm-column>
        <ng-template #header>
            <div>
                <i style="color: red">
                    <u>Key value</u>
                </i>
            </div>
        </ng-template>
        <ng-template #cell let-item>
            <div>
                key: <b>{{ item['key'] }}</b>
            </div>
        </ng-template>
    </dm-column>
</dm-table>