Dynamic table component
npm install @agentsmith.bgd/dynamic-table-libfalse | boolean | If data are currently loading. Shows spinner if true and dim the table |false | boolean | Add table-stripped class |false | boolean | Add table-bordered class |false | boolean | Add table-hovered class |false | boolean | Enables search field |false | boolean | Add first column as row counter |false | boolean | Enable console logger (developer logs) |0 | number | Offset for table pagination |0 | number | Current page (active page) |0 | number | Total items in page |null | string | Total items in page |"" | "" or "table-light" or "table-dark" | If key name is set, column chooser is enabled and new layout will be saved to localStorage |"table-default" | "table-default" or "table-primary" or "table-secondary" or "table-success" or "table-danger" or "table-warning" or "table-info" or "table-light" or "table-dark" | Style of the table header |"" | "" or "justify-content-center" or "justify-content-end" | Aligment of pagination component left(default), center or right |[10, 20, 50, 100] | number[] | Displays dropdown with page offset chooser |[] | IActionButton[] | CTA buttons in table header |[] | IActionButton[] | CTA buttons in each table row |null | ITableHead[] | Setup of the table. Columns are created, and key is used to access data values |null | Record[] | Table data. Array of objects where key coresponds to tableHead key |EventEmitter | Dispatch when we click on pagination buttons and emits target page |EventEmitter | Dispatch when some display or filtering option is changed |EventEmitter> | Dispatch when some row action button is clicked |EventEmitter> | Dispatch when some slider is clicked in row |EventEmitter | Dispatch when header action is clicked emitting action name |EventEmitter<{ action: string; value: any }> | Dispatch when row action is clicked emitting action name and row data |Install dynamictable-lib from npm
``bash`
npm i @agentsmith.bgd/dynamictable-lib
Add package to NgModule imports:
`
import { DynamicTableLibModule } from '@agentsmith.bgd/dynamictable-lib';
@NgModule({
...
imports: [DynamicTableLibModule, ...],
...
})
`
Add component to your page
``
rowActions: IActionButton[] = [
{ actionName: 'edit', btnColor: 'btn-primary', faIcon: 'fa-edit' },
{ actionName: 'options', btnColor: 'btn-success', faIcon: 'fa-cogs' },
{ actionName: 'delete', btnColor: 'btn-danger', faIcon: 'fa-times' },
];``
tableHead: ITableHead[] = [
{ key: 'id', label: 'ID', mandatory: true },
{ key: 'name', label: 'Name' },
{ key: 'email', label: 'Email' },
{ key: 'gender', label: 'Gender' },
{ key: 'company', label: 'Company' },
{ key: 'age', label: 'Age', hidden: true },
];``
tabledata = [
{
name: 'Ethel Price',
email: 'Ethel Price@company.com',
gender: 'female',
company: 'Johnson, Johnson and Partners, LLC CMP DDC',
age: 22,
},
{
name: 'Claudine Neal',
email: 'Claudine Neal@company.com',
gender: 'female',
company: 'Sealoud',
age: 55,
}`html`
(filterParamsChanged)="sortChanged($event)"
[bordered]="true"
[rowCounter]="true"
[headStyle]="'table-success'"
[headerActions]="headerActions"
[hovered]="true"
[page]="0"
[perPage]="15"
[rowActions]="rowActions"
[striped]="false"
[tableData]="tableData"
[tableHeadStorageKeyName]="'someKey'"
[tableHead]="tableHead"
[totalItems]="totalItem"
>