Table server side pagination
How to set up server side pagination for a table
If your dataset contains thousands of records, you might struggle with load time and app performance. Server side pagination allows you to load records that are on a current page only.
To implement server side pagination, follow the below steps:
  1. 1.
    Enable Server side pagination table setting in the component's configuration sidebar.
  2. 2.
    In your load action use {{ui.table.pageSize}} and {{ui.table.paginationOffset}} variables to control the data you need to load. With these variables, you can configure your action to only load the page that table requests, by sending pageSize and paginationOffset variables to your API or Load table action.
  3. 3.
    Make sure Automatic trigger setting is enabled for your load action. It will rerun the action every time you change a page.
    • In case you don't want your action to be triggered automatically, additionally assign your load action to the On Page Change component's trigger.
  4. 4.
    Set table Show loading setting to be true while load action is loading - {{actions.loadData.loading}}
Server side pagination example

Filtering and sorting

When server side pagination is enabled, table filters and sorting don't work automatically, as they cannot filter and sort the data while it's being loaded page by page. To configure server side filters and sorting, you can use {{ui.table.sortColumn}}, {{ui.table.sortDirection}} and {{ui.table.filters}} variables in your action to send this data to your API/SQL query or Load table action.
Copy link