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

Pagination is broken if there is only one page

Open sergiivorobei opened this issue 2 years ago • 4 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. 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

sergiivorobei avatar Oct 06 '23 09:10 sergiivorobei

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

MateoWartelle avatar Oct 07 '23 16:10 MateoWartelle

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.

SutuSebastian avatar Oct 13 '23 09:10 SutuSebastian

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

Mukilan1600 avatar Jan 22 '24 19:01 Mukilan1600

I have the same issue. Just waiting for the fix. Thanks!

crudobaker avatar Oct 31 '24 12:10 crudobaker