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
with custom datasource by calling static method
. The role of
is replaced with custom function accepting 3 parameters:
startIndex
: zero based index for pagination.maxRows
: number of rows displayed in one pagetableQuery
: contain grouping, sorting and filtering information that the server should handle.
The method should returns
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)
}
Enrolled:month
/ 12
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"}}