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.
npm install ngx-selection-table --saveCheck out the DEMO for more information!
import { SelectionTableModule } from 'ngx-selection-table';
@NgModule({
declarations: [...],
imports: [
SelectionTableModule,
...
],
providers: [],
bootstrap: [...]
})
export class AppModule { }<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>| 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" |
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 String | Search Style | Result |
|---|---|---|
| 'Host' | searchAll | 'Host', 'CPU', 'Resident Memory' |
| 'Host' | searchWithSubHeader | 'Host' |
| 'Host' | searchInChildren | empty |
Support Angular 13- ...
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent