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 [email protected]',
gender: 'female',
company: 'Johnson, Johnson and Partners, LLC CMP DDC',
age: 22,
},
{
name: 'Claudine Neal',
email: 'Claudine [email protected]',
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>

Compatibility

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