Configure server-side pagination for the Table component
Learn how to implement server-side pagination of data with the Table component.
When building apps using large data sets, it's important to limit how much data your queries return. Returning large sets of data at once can affect performance in your apps, especially when joining multiple tables in complex queries. Server-side pagination is a best practice of optimize queries so they only return the results necessary to populate a given view.
Most databases and APIs support a form of server-side pagination. When new data is needed to populate the view, the query is triggered again and the server retrieves the next set of results.
The Table component supports Limit-Offset, Cursor, and GraphQL Relay server-side pagination.
Demo
The following demo app uses server-side pagination with the NASA Image Library API to display results in a table. Each page contains ten results and updates whenever the page or search term changes. You can expand each row to reveal the image caption.
Enable server-side pagination
Filters do not function if server-side pagination is enabled. Any filtering logic must be added to the resource query.
In the Add-on settings, click + and select Pagination. The Table component uses client-side pagination by default. Click Enable server-side pagination to display the relevant settings.
Whichever pagination method you use, you must specify the Page size