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

Display a list of pages

With a default option, only one input with the current page will be displayed. If you want to display all the available pages, you can specify the total row count, and based on this, the number of pages will be counted and displayed based on the items per page.
To retrieve the total row count, you will need to create additional action that will retrieve the total number of items, for example, a query:
Please note that for SQL-like databases, when using a Load Table action type, you can obtain the row count using {{}}.

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.