Reverse Pagination Ability

[zeekwan]

Hi there - First of all, great pagination component! It's been a great help and the documentation is amazing!

I had a question on how I might go about modifying the pagination so it's reversed.

Instead of... < 1 2 3 4 .... 10 >

It would go < 10 9 8 7 ....1 >

My use case is to follow logic like a book. The oldest writing and material is on page 1, and will always be on page 1. The newer material is on Page 10, etc. In the current system, the new content is always on page 1, while the old content gets put into the larger pages numbers and I lose track of their location.

What's your best suggestion to achieve this behavior?

[jonelantha]

Hi, great question!

Currently there's no way to do this but in the future I hope to add options for customisation of the links, so reversing the order could be an option then

Right now you can achieve something similar using just css but it's not perfect:

You can reverse the order of the items by adding

.pagination {
  flex-direction: row-reverse;
}

You'd then need to swap the arrows, you can do that with these props:

<Pagination previousLabel="»" nextLabel="«" />

Finally you may notice the styles aren't right for the next and previous buttons, this css should fix it (this is for bootstrap styles):

.page-item:first-child .page-link {
  margin-left: -1px !important;
  border-radius: 0 0.25rem 0.25rem 0 !important;
}
.page-item:last-child .page-link {
  border-radius: 0.25rem 0 0 0.25rem !important;
}

Visually this does exactly as you're asking but unfortunately the tabbing order will be backwards - that may be ok depending on your use case though?

[zeekwan]

Hi there, thanks for responding! I was working on this today and came to check if you had replied and you just saved me a lot of time!

I implemented the suggestions you wrote and it's definitely easier than my alternatives. It definitely accomplishes what I was setting out to do.

There's a couple issues elements I'm working through, which involves...

1. Making sure that I'm setting the page to the "Last" page (page 6) upon loading, versus page 1. Some state debugging to be done there.
2. ~~There's some interesting graphical behavior with the next and previous buttons. I can see the blue page indicator flashing before going to the correct page, which makes me believe there's a back and forth happening, like navigating from 6->5->6->5 when I'm clicking the right most button.~~ resolved