DynamicTableLib

Dynamic table component

Attributes

| Attribute | Type | Description |
|-----------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------|
| loading=false | boolean | If data are currently loading. Shows spinner if true and dim the table |
| striped=false | boolean | Add table-stripped class |
| bordered=false | boolean | Add table-bordered class |
| hovered=false | boolean | Add table-hovered class |
| enableSearch=false | boolean | Enables search field |
| rowCounter=false | boolean | Add first column as row counter |
| enableLog=false | boolean | Enable console logger (developer logs) |
| perPage=0 | number | Offset for table pagination |
| page=0 | number | Current page (active page) |
| totalItems=0 | number | Total items in page |
| tableHeadStorageKeyName=null | string | Total items in page |
| tableStyle="" | "" or "table-light" or "table-dark" | If key name is set, column chooser is enabled and new layout will be saved to localStorage |
| headStyle="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 |
| paginationAlignment="" | "" or "justify-content-center" or "justify-content-end" | Aligment of pagination component left(default), center or right |
| perPageValues!:=[10, 20, 50, 100] | number[] | Displays dropdown with page offset chooser |
| headerActions!:=[] | IActionButton[] | CTA buttons in table header |
| rowActions!:=[] | IActionButton[] | CTA buttons in each table row |
| tableHead!:=null | ITableHead[] | Setup of the table. Columns are created, and key is used to access data values |
| tableData!:=null | Record[] | Table data. Array of objects where key coresponds to tableHead key |

Events

| Event | Description |
|-------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------|
| pageChange(page):EventEmitter | Dispatch when we click on pagination buttons and emits target page |
| filterChanged(IFilter):EventEmitter | Dispatch when some display or filtering option is changed |
| editRow(Record):EventEmitter> | Dispatch when some row action button is clicked |
| sliderClicked(Record):EventEmitter> | Dispatch when some slider is clicked in row |
| headerActionClicked(actionname):EventEmitter | Dispatch when header action is clicked emitting action name |
| rowActionClicked({ action: actionName; value: rowData }):EventEmitter<{ action: string; value: any }> | Dispatch when row action is clicked emitting action name and row data |

Installation

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
(pageChange)="pageChange($event)"
(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"
>
`

Compatibility


There is only one dependency: Angular > 12.x.x`