Table Server Integration
Integrating with a Server
By default the table component is setup for client side data manipulation. What if there is too much data to send to the front end? Implementing server-side data manipulation is what is required.
Setting it up
For server-side integration to work properly, the following must be present on go-table:
(tableChange)- to handle the table events[loadingData]- to handle the loading of the table[tableConfig]- because it's required
example.html
<go-table
*ngIf="tableConfig"
(tableChange)="handleTableChange($event)"
[loadingData]="tableLoading"
[tableConfig]="tableConfig">
<go-table-column field="id" title="ID"></go-table-column>
<go-table-column field="name.first" title="First Name"></go-table-column>
<go-table-column field="name.last" title="Last Name"></go-table-column>
<go-table-column field="email" title="Email"></go-table-column>
<go-table-column field="gender" title="Gender"></go-table-column>
<go-table-column field="ip_address" title="IP Address"></go-table-column>
</go-table>
There are 5 properties of the table config that are important when building out server-side integration:
pageConfig.offset- the current place in the data setpageConfig.perPage- the current number of items on each pagesearchConfig.searchTerm- the current search term (if table search has value)sortConfig.column- the current column that is sorted (if table is sorted)sortConfig.direction- the current sort direction (if table is sorted)
example.ts
tableConfig: GoTableConfig = new GoTableConfig({
dataMode: GoTableDataSource.server,
tableData: []
});
tableLoading: boolean = true;
constructor(private mockService: TableMockDataService) { }
ngOnInit() {
this.handleTableChange(this.tableConfig);
}
It is recommended to pass the entire GoTableConfig to the service that is retrieving the data and map the properties of the object to the corresponding parameters of the endpoint that is being hit.
When the data is successfully returned, the properties shown below must be set.
handleTableChange(currentTableConfig: GoTableConfig) : void {
this.mockService.getMockData(currentTableConfig).subscribe(data => {
currentTableConfig.tableData = data.results;
currentTableConfig.totalCount = data.totalCount;
this.tableConfig = currentTableConfig;
this.tableLoading = false;
});
}
Important Notes
Total Results
For the best user experience with server-side integrations, the data returned from the server should have two properties:
{
results: [{}], // the actual results for the table
totalCount: 12345 // the total count for the entire table, not just this page
}
These properties should then be set, upon a successful response, to the corresponding properties on the GoTableConfig, tableData and totalCount.
[loadingData]
When server mode is enabled, this property will be set to true whenever the tableChange event is fired. The responsibility to set it back to false falls upon on the parent component after data is received from the server. This is to provide a consistent and helpful experience to users and should not be overridden.
(tableChange)
The tableChange event is emitted anytime a trigger is fired in the table component. These triggers are:
- Any page change
- Page size change
- Sort change
- Search change