Client-side pagination on table component breaks on last page

My table component uses client-side pagination. This bug happens only if I do not specify the page size.

Issue:
When the page size is not specified in the component config, pagination breaks on the last page. Say I have a dataset of 150 items. The table decides to break that set down into pages of 13 items each. Each page has 13 items, until you click through to the last page, which has 7 items remaining. At this point the table automatically refreshes the pagination of the entire table to be 7 items per page, and the items showing in the current page are no longer the last 7 items anymore but (current_page_number) * (7_items_per_page).

Steps I've taken to troubleshoot:
A workaround is to specify a page size in the table config. If you do that, then the last page correctly renders the remainder, instead of causing the whole table to refresh with a different page size.

1 Like

Hello @ch_dc ,

I understand the issue you're facing with server-side pagination. I'd like to share a practical solution that I’ve implemented using Retool’s database resource with limit-based server-side pagination.

SQL Query:

To handle pagination effectively, I used the following SQL query:

SELECT (SELECT COUNT(*) FROM sample_users) AS Total_Count, *
  FROM sample_users LIMIT {{ table2.pagination.pageSize }}
offset {{ table2.pagination.offset }}
  • This query returns the total number of records using a subquery and fetches the data for the current page using LIMIT and OFFSET based on Retool’s table pagination inputs.

Total Row Count:

To display the total row count in the table, I referenced the value like this:

{{ getUser.data[0].total_count }}

This allows Retool’s table component to correctly calculate and display the number of pages.

Event Handler Setup:

To make pagination dynamic, I added an Event Handler on the table:

  • Event: Change Page
  • Action: Trigger the query (in this case, getUser) that fetches the paginated data.

This ensures the query is re-run every time the user navigates to a different page, keeping the data in sync with the pagination controls.

Screenshots for Reference:

Here are screenshots showing the configuration:

3 Likes

Hello! Thank you, I'm familiar with server-side pagination and we've had good outcomes using it in Retool. This bug pertains to client-side pagination.