flowbite-react icon indicating copy to clipboard operation
flowbite-react copied to clipboard

Pagination with table layout and hardcoded "showing X to X of X entries"

Open RedGlow opened this issue 2 years ago • 2 comments

  • [x] I have searched the Issues to see if this bug has already been reported
  • [x] I have tested the latest version

Steps to reproduce

  1. Create a Pagination element with layout='table', a fixed totalPages (like 23) and a variable currentPage
  2. Notice that there is this behaviour while navigating:
    • currentPage = 1 => "Showing 1 to 5 of 23 Entries"
    • currentPage = 2 => "Showing 1 to 5 of 23 Entries"
    • currentPage = 3 => "Showing 1 to 5 of 23 Entries"
    • currentPage = 4 => "Showing 2 to 6 of 23 Entries"
    • currentPage = 5 => "Showing 3 to 7 of 23 Entries"
    • (this behaviour goes on)

Current behavior

The "Showing" label doesn't seem to actually display information related to the page.

Expected behavior

Showing the actual range of items displayed, like "Showing 1 to 10 of 230 Entries", "Showing 11 to 20 of 230 Entries" and so on. This, though, would require the pagination element to take parameters regarding this range, since it depends on the actual results displayed in a table and could be variable (e.g.: last page could contain less elements than the full page).

Other notes

I have noticed in the code that this info is extracted from:

  const lastPage = Math.min(Math.max(layout === 'pagination' ? currentPage + 2 : currentPage + 4, 5), totalPages);
  const firstPage = Math.max(1, lastPage - 4);

Which seems to be used both for the default "pagination" layout, where it probably makes sense (I haven't checked), but also for the table layout, where the label doesn't (or shouldn't? or doesn't appear to?) refer to pages but rather to single items.

RedGlow avatar Dec 12 '23 11:12 RedGlow

Yeah, I've noticed this as well. This is a hybrid of bugfix and new feature. We have weird behavior in some environments where the first couple of clicks don't change the active page, and also, there should definitely be a property to set the number of items per page.

tulup-conner avatar Dec 12 '23 22:12 tulup-conner

I think it either needs the number of items per page + total number of items, or starting item index + last item index, otherwise there isn't enough information to correctly compute the indices of the last page. E.g., if we have 35 elements and 10 elements per page, we will have the ranges 1-10, 11-20, and then the last page is 21-35, which is not the same as the component could compute on its own just with the page size (which would result in 21-40).

If I find some time I can try to make a pull request for this issue (more likely during the upcoming winter holidays rather than right now).

RedGlow avatar Dec 13 '23 08:12 RedGlow