themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.82k stars 406 forks source link

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

Open RedGlow opened 8 months ago

RedGlow commented 8 months ago

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.

tulup-conner commented 8 months ago

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.

RedGlow commented 8 months ago

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).