Server side pagination with column sorting

[geetanshu-wi]

I am implement a table component containing server side pagination enabled and I need sorting on the columns as well.

But I am observing the strange behaviors -> when I am using only pagination and click on next page pageIndex is getting increment. When I am adding sorting hooks then pagination in not working fine. The pageIndex is getting back to 1 automatically and I am not able to figure it why.

You can find code at
https://codesandbox.io/s/eager-breeze-9cw0r

[zachrnolan]

I've been trying to figure this out as well. Adding useSortBy breaks pagination.

[preteriranto]

Use

• autoResetSortBy: false,
• autoResetPage: false

in useTable arguments.
This should fix your problem

[junagao]

Hello, I'm trying to figure out pagination with sorting as well.

I've added autoResetSortBy: false, and autoResetPage: false and sorting works but only for the items displayed in the current page.

How could I handle sorting of all items instead?

[nbppp2]

can you post an example on CodeSandbox?

[junagao]

Hi @nbppp2,

This example sorting works only for the visible items in a page: https://codesandbox.io/s/react-table-pagination-and-sort-forked-0yted?file=/src/App.js

And in this example, i'm trying to sort all items implement sorting with handleSort but sorting is not work at all: https://codesandbox.io/s/react-table-pagination-and-sort-xgyl0?file=/src/App.js

[alexeyivanov-dunice]

Hi @junagao i've managed to do it like that https://codesandbox.io/s/react-table-pagination-and-sort-forked-6fgbb?file=/src/App.js I hope it'll help

[Stevenlee731]

@alexeyivanov-dunice wow thank you for the sandbox! Super helpful for my use case

[maksym3d]

@alexeyivanov-dunice - your example should be in the official set of examples!