@nix-otps-fe/lib-primeng14-table-wrapper NPM

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>