Usages Advanced Usage

Advanced Usage

PanemuTable supports various complex usage such as server side data processing, dynamic row style, dynamic cell style, custom cell header etc.

Server Side Pagination, Sorting, Filtering and Grouping

This functionality requires server API that support pagination, sorting, filtering and grouping. PanemuTabelController provide a way to propagate required parameters to the server.

Create an instance of PanemuTableController with custom datasource by calling static method PanemuTableController.createWithCustomDataSource(). The role of PanemuTableDataSource is replaced with custom function accepting 3 parameters:

  1. startIndex: zero based index for pagination.
  2. maxRows: number of rows displayed in one page
  3. tableQuery: contain grouping, sorting and filtering information that the server should handle.

The method should returns TableData observable.

controller = PanemuTableController.createWithCustomDataSource<People>(
  this.columns, 
  this.retrieveData.bind(this)
);
...
...
constructor(private dataService: DataService, private pts: PanemuTableService){}

private retrieveData(startIndex: number, maxRows: number, tableQuery: TableQuery): Observable<TableData<T>> {
  return this.dataService.getMockedServerData(startIndex, maxRows, tableQuery)
}
splitscreen_top
Enrolled:month
/ 12
Id
Name
Email
Gender
Country
Amount
Enrolled
Last Login
Verified
arrow_rightApr 2023 (21)
arrow_rightNov 2023 (18)
arrow_rightJan 2023 (24)
arrow_rightJul 2023 (25)
arrow_rightDec 2023 (17)
arrow_rightAug 2023 (23)
arrow_rightOct 2023 (20)
arrow_rightMar 2023 (27)
arrow_rightJun 2023 (30)
arrow_rightSep 2023 (23)
arrow_rightMay 2023 (23)
arrow_rightFeb 2023 (15)
startIndex: 0
Result row type: RowGroup
maxRows: 100
Result row count: 12
tableQuery: {"groupBy":{"field":"enrolled","modifier":"month"}}