Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Pagination is broken if there is only one page #1048

Open
2 tasks done
sergiivorobei opened this issue Oct 6, 2023 · 3 comments · May be fixed by #1240
Open
2 tasks done

Pagination is broken if there is only one page #1048

sergiivorobei opened this issue Oct 6, 2023 · 3 comments · May be fixed by #1240
Labels
🐛 bug Something isn't working confirmed This bug was confirmed good first issue Good for newcomers
Milestone
1.0.0

Comments

@sergiivorobei
Copy link

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

Steps to reproduce

  1. Render pagination component with this props:
<Pagination 
  currentPage={1} 
  totalPages={1} 
  showIcons
  nextLabel=""
  previousLabel=""
/>

Current behavior

There is no 1 between the arrows, just two buttons (previous and next)
Screenshot 2023-10-06 at 11 33 51

Expected behavior

1 is shown between the arrows, similarly to the case when we have 2 and more pages.
image

Context

I would like to show the Pagination component with only one page when user has a small amount of data.

The problem is in range function, where this check is contained

if (start >= end) {
    return [];
}

I would assume it should be

if (start > end) {
    return [];
}

but not sure whether this breaks the expected behaviour from your side. If you are fine I can create the PR.

Thanks,
Sergii
@rluders rluders added 🐛 bug Something isn't working confirmed This bug was confirmed labels Oct 6, 2023
@MateoWartelle
Copy link
Contributor

MateoWartelle commented Oct 7, 2023 •
edited

I think maybe this needs to be currentPage < 1 also

For this

<Pagination 
  currentPage={0} 
  totalPages={0} 
  showIcons
  nextLabel=""
  previousLabel=""
/>
pagination-0

we wouldn't want them to be able to click previous if no pages are available

@SutuSebastian
Copy link
Collaborator

we wouldn't want them to be able to click previous if no pages are available

Agreed, but this doesn't mean we do not show the pages, even if its just one.

@tulup-conner tulup-conner added the good first issue Good for newcomers label Jan 1, 2024
@tulup-conner tulup-conner added this to the 1.0.0 milestone Jan 1, 2024
Mukilan1600 added a commit to Mukilan1600/flowbite-react that referenced this issue Jan 21, 2024
@Mukilan1600
fix(pagination): show page number when there is only 1 page
d531dbf 
When there is only 1 page the page number is not shown, instead only the disabled buttons are shown.
The correct behaviour is to show the active page number (1) and have the buttons disabled.

fix themesberg#1048
@Mukilan1600 Mukilan1600 linked a pull request Jan 21, 2024 that will close this issue
Open
@Mukilan1600
Copy link

@tulup-conner I've raised a PR to fix this

@coderabbitai coderabbitai bot mentioned this issue Apr 8, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐛 bug Something isn't working confirmed This bug was confirmed good first issue Good for newcomers
Projects
None yet
Milestone
1.0.0
Development

Successfully merging a pull request may close this issue.

fix(pagination): Show page number when there is only 1 page Mukilan1600/flowbite-react
6 participants
@rluders @sergiivorobei @MateoWartelle @SutuSebastian @Mukilan1600 @tulup-conner