themesberg / themesberg/flowbite-react

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

Open
#1,181 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

:rocket: enhancement
Dominant language
TypeScript
Stars
2.1k
Forks
506
PR merge metrics
No merged PRs in 30d

Description

  • I have searched the Issues to see if this bug has already been reported
  • 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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in src/components/Pagination/Pagination.tsx at the linked calculation of firstPage and lastPage. Reproduce the table layout with totalPages=23 while changing currentPage, then compare the label with the displayed item range. Done means the table layout reports the actual range, including a shorter final page, without breaking the pagination layout.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, tailwindcss, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.