ngx-selection-table

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