Pagination is broken if there is only one page

[sergiivorobei]

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

Expected behavior

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

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

[MateoWartelle]

I think maybe this needs to be currentPage < 1 also

For this

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

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

[SutuSebastian]

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.

[Mukilan1600]

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

[crudobaker]

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

[yamin-H]

Hi, can I work on this if it's not actively maintained?

[DevLikhith5]

I'd like to fix this bug. The issue is that Pagination doesn't handle the single-page edge case — it should either hide or disable navigation when there's only one page. Planning to open a PR with the fix.

[JessenReinhart]

I've raised a PR for this