@nix-otps-fe/lib-primeng14-table-wrapper
v0.1.8
Published
This library was developed to speed up the PrimeNG table implementation
Downloads
31
Readme
Wrapper Library for PrimeNG table
This library was developed to speed up the PrimeNG table implementation
Features
- Lazy loading/staticdata
- Global search
- Paging
- Sorting
- Filtering
- Different column types
Installation
npm i @nix-otps-fe/lib-primeng14-table-wrapper
Usage/Examples
In you component
initTableConfig(): VmTableConfig {
const tableConfig: VmTableConfig = new VmTableConfig([
new VmTableColumnTextAction('displayName','String', false, ColumnJustification.Left, {
filterType: VMTableFilterType.Text
}, 'task_click'),
new VmTableColumnDate('lastModifiedDate', 'Date', true),
new VmTableColumnActions('', 'Actions', false, ColumnJustification.Center, [
{
actionName: 'TestAction',
severity: VMTableSeverity.Success,
icon: 'pi-folder-open'
}
] ),
])
tableConfig.striped = false;
// Configure options here
return tableConfig
}
Available options with default values
columns: IVMTableColumn[];
responsiveLayout: 'stack' | 'scroll' = 'stack'
tableSize: VMTableSize = VMTableSize.Small;
striped: boolean = false;
lazyLoadOnInit: boolean = true;
paginator: boolean;
styleClass: string = `${this.tableSize} ${(this.striped) ? 'p-datatable-striped' : ''}`
rowsPerPageOptions: number[] = [10,15,25];
stateStorage: VMTableStateStorage = VMTableStateStorage.Local;
stateKey: string;
scrollHeight: number = 0;
globalSearch = false;
Example of utility methods
logAction(event:ActionRowData<any>) {
console.log(event);
}
getTableData(event: LazyLoadEvent): void {
this.loading = true;
this.testService.testTableData(event).subscribe((data) => {
this.tableData = data.data;
this.totalRows = data.totalRecords;
this.loading = false
})
}
In your component's HTML
<lib-vm-table
[value]="tableData"
[totalRecords]="totalRows"
[loading]="loading"
[config]="initTableConfig()"
(onLoadData)="getTableData($event)"
(onRowActionClick)="logAction($event)"
>
</lib-vm-table>