issue with all row selected with react-table server side pagination

Question

I am using react-table v7 to create a table with server side pagination. I am using this api.

Actually, when I click on the allRowSelected checkbox, only the rows of the actual page are selected. But my goal is to get all the rows of the table to be selected over all the pages. How can I achieve this goal ?

Another way, On the image, by click on the colored checkbox, I want all rows to be selecte on every single page of the table.

Here is my codesandbox: https://codesandbox.io/s/affectionate-sid-7h55gx

I've already use the properties toggleAllPageRowsSelected and toggleAllRowsSelected (docs), but I am not achieving my goal. Maybe I am missing something !

How can I achieve my goal ?

Answer 1

To persist row selection state all over the page indexes when performing server-side rendering. You can use

autoResetSelectedRows: false,

Use it in the useTable() hook.

This works perfectly for me.