Ellipse in Pagination for Dynamic data

[shivamBentley]

Hi,

I am using paginator in ITwin UI Table, I am facing an issue to show ellipses in paginator for dynamic data. Assume we are fetching data from backed only when it is required. so we made the logic if user click on last page ( in paginator ) we start fetching data and update in table it, we try to load one page extra. [Note: We know we have data or not on before every fetch].

if more data is available

if more data is not available

We want to make users experience bit better, If we have data can we show ellipses after last page if we have data if not then show last page number ( as default behaviour )

[r100-stack]

Our current default logic to show the ellipses between the current pages range and the first or last page. We do not show ellipses before the first page or after the last page.

E.g. Table → With Paginator story:

Here, we show ellipses between pages 1 and 13 and also between 27 and 101.

---

To make the TablePaginator work properly by default even when lazy-loading, we need to pass the totalRowCount prop to the TablePaginator. Once the page is clicked (TablePaginator's onPageChange), you can lazily download the page data. You can take ideas from the Table → With manual paginator and filter story for implementing this.

[shivamBentley]

I understood your point, but we don't know totalRowCount which makes it a bit difficult to control the paginator.

[mayank99]

Can you share more details about your user case? totalRowCount sounds like something that should be possible to query, no? Also, does this mean the user will never reach the last page? And how does sorting work?

[shivamBentley]

Please check out this code - Table - With manual paginator

At line number 2080, here we are passing total size of data. so, we do not have this information we are implementing server-side pagination in our list.

When user changes pageSize, page, sort or search we query data using these informations. So, we get only two information in response data and the next cursor. if next cursor is null, it means we don't have any data, else we have data. If we have more data, then we want to show paginator like this.

@mayank99

[r100-stack]

I'm still a bit confused why the totalRowsCount would not be known on the frontend. Could you elaborate?

Based on the table filters, would it not be possible to know the number of matching rows on the backend? This backend query could be a separate one that is not related to the data and next cursor call that you're making. i.e. you'd still be lazily downloading the page data once a page button clicked. But you'll be making a separate query in the beginning to just get the number of matching rows.

When user changes pageSize, page, sort or search we query data using these informations. So, we get only two information in response data and the next cursor.

Changing "pageSize, page, sort" wouldn't change the total row count. But actions like search, filter, etc. could change the total row count. So, whenever an action is performed that could change the total row count, would it be possible to send a new query to the backend to get the number of rows that match the new filters, search query, etc.?

Additionally, showing the user the total number of pages would also be better UX. They can then quickly navigate to the first/last page.