ngx-selection-table

An Angular 13 module for selecting data from table with checkbox, filter and collapsible/expandable sub title.
For Angular 6 / 7 support please use older versions.

Installation

npm install ngx-selection-table --save

DEMO

Check out the DEMO for more information!

Usage

Importing The 'ngx-selection-table' Module

import { SelectionTableModule } from 'ngx-selection-table';

@NgModule({
  declarations: [...],
  imports: [
    SelectionTableModule,
    ...
  ],
  providers: [],
  bootstrap: [...]
})
export class AppModule { }

Enabling Selection Table

<ngx-selection-table 
                 (change)="selectItem($event)"
                 [tableSource]="tableSource"
                 [keyColumn]="'ID'"
                 [hiddenColumns]="['_YScaleGroup','TT']"
                 [tooltipColumn]="'TT'"
                 [searchStyle]="'searchAll'"
                 [searchColumn]="'KPI'"
                 [filter]="true"
                 [checkbox]="true"
                 [multiSelection]="true"
                 [clickToSelect]="true">
</ngx-selection-table>

Parameters

Name | Description | Example | ------------- | ------------- | ------------- (change) | On change function called after the status of checkbox changed | (change)="selectItem($event)" tableSource | Source data of the table | [tableSource]="tableSource" keyColumn | The name of the key column | [keyColumn]="'ID'" hiddenColumns | The columns which need to be hidden | [hiddenColumns]="['_YScaleGroup','TT']" tooltipColumn | The column which will be used for tooltip | [tooltipColumn]="'TT'" searchStyle | Search style of the search input. Supports three types: 'searchAll','searchWithSubHeader', 'searchInChildren'. | [searchStyle]="'searchAll'" searchColumn | the column which will be searched by the search input | [searchColumn]="'KPI'" filter | Enable or disable the search input | [filter]="true" checkbox | Enable or disable the checkbox | [checkbox]="true" multiSelection | Enable or disable the multiple selection | [multiSelection]="true" clickToSelect | Enable or disable clicking the table row to select | [clickToSelect]="true"

Input data samples:

tableSource =  [
    {ID: 1, KPI: 'Host', header: true},
    {ID: 2, KPI: 'CPU', 'Y-Scale': 100, _YScaleGroup: 0, TT: 'tooltips2'},
    {ID: 3, KPI: 'Resident Memory', 'Y-Scale': 2000000, _YScaleGroup: 1, TT: 'tooltips3'},
    {ID: 4, KPI: 'SQL', header: true},
    {ID: 5, KPI: 'Open Connections', 'Y-Scale': 100, _YScaleGroup: 10,  TT: 'tooltips15'},
    {ID: 6, KPI: 'Internal Connections', 'Y-Scale': 100, _YScaleGroup: 10, TT: 'tooltips16'},
    {ID: 7, KPI: 'Threads', header: true},
    {ID: 8, KPI: 'Active Threads', 'Y-Scale': 50, _YScaleGroup: 12, TT: 'tooltips29'},
    {ID: 9, KPI: 'Waiting Threads', 'Y-Scale': 50, _YScaleGroup: 12,  TT: 'tooltips30'},
  ];

Search Style Samples:

Search String | Search Style | Result ------------- | ------------- | ------------- 'Host' | searchAll | 'Host', 'CPU', 'Resident Memory' 'Host' | searchWithSubHeader | 'Host' 'Host' | searchInChildren | empty

Todo

• ~~Support Angular 13~~
• ...

License

MIT