@agentsmith.bgd/dynamic-table-lib NPM

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<string, never>[]`	Table data. Array of objects where key coresponds to tableHead key

Events

Event	Description
pageChange(page):`EventEmitter<number>`	Dispatch when we click on pagination buttons and emits target page
filterChanged(IFilter):`EventEmitter<IFilter>`	Dispatch when some display or filtering option is changed
editRow(Record):`EventEmitter<Record<string, never>>`	Dispatch when some row action button is clicked
sliderClicked(Record):`EventEmitter<Record<string, never>>`	Dispatch when some slider is clicked in row
headerActionClicked(actionname):`EventEmitter<string>`	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

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,
}

<as-dynamic-table
  (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"
></as-dynamic-table>