Table does not refresh with update pagination state when turn on manual Pagination about material-react-table HOT 10 CLOSED

Pass your pagination state to state instead of initialState

from material-react-table.

thanks for the response, tried following, but same problem still there ...
.....
const table = useMaterialReactTable({
columns: tableColumns,
data: personSearchTableData,
enablePagination: true,
manualPagination: true,
state: {pagination},
});

from material-react-table.

the problem is when the pagination state is changed but table.options.state.pagination.pageIndex is not updated the result is table is not refreshed with changed state (pagination)

from material-react-table.

Make a sandbox showing the bug and I can look. If this was a true bug in MRT, I would expect this example to be broken, but it seems fine: https://www.material-react-table.com/docs/examples/react-query

from material-react-table.

Hi Kevin, thanks for the quick response, I did some local testing with reference on the example you provided unfortunately the problem still not resolved. I created a Pagination test component on code sandbox, It shows all records on the table when set manualPagination = true and I can see the bottom pagination component show page size = 5, but when I switch off manualPagination it shows 5 records as expected.
https://codesandbox.io/p/sandbox/react-environment-forked-225wm3?file=%2Fsrc%2FPaginationTest.js%3A62%2C26

from material-react-table.

@wwu2008 It is working as designed. You do realize that setting manualPagination: true means that all internal pagination logic in MRT is turned off, and assumes that the data that you pass to the table is already correctly paginated. It is up to your back-end to apply the correct data size when using manual pagination.

From the docs:

In your sandbox, you are hardcoding the data to always be 16 rows, with none of your own pagination logic applied, so it will always just show those 16 rows if manualPagination is true.

If you don't want to do pagination logic in your back-end, just don't turn it off in MRT.

from material-react-table.

Hi Kevin, Yes, I got your meaning. Manual pagination is designed ONLY for backend server pagination. In my user case I load whole data from backend (without pagination) so no need to use manual pagination, everything working fine. However some data in my table has link when user click it opens (navigate) another page with state data piped to the new page (table data including pagination index and size). On this new page when user click back button the UI would reload the previous table page data (I use redux useSelector hook) with same data and same pagination (index and size). when reload the page we need to reset the pagination (cashed when load new page with link) we don't want load page with initial pagination instead I need to reset current table pagination (index) to cashed index, (for example, before navigate to new page I was in page3, ie pageIndex=2, and when navigate back I should in page 3, not page1 for the table in pagination) in this case I need use some table pagination (build in not manual) API to reset pagination state and trigger page refresh with new index/size but seems MRT do not provide this feature. In my impression there is only 2 options: Opt 1 use build in pagination ie MRT will auto handle state and etc. or Opt2 use manual pagination handle state by yourself (backend), Unfortunately it's not fit my needs I need opt 1 but I can change pagination state when required, Can you give me some suggestions to achieve my goal? BTY I love MRT it's easy use with nice features & functions.

from material-react-table.

In summary of my comments, I'm looking for a solution to change MRT build-in pagination (Auto) state without using manual pagination. I did try to achieve this by forcing reloading the page via props (pageIndex) & set initial state pagination but it's still not fully solved my issue. If current MRT don't provide this feature, I'd strongly reaccommodate adding this in next version. It will largely promote usage of MRT.

from material-react-table.

Why you need that if you can add page number as params to the url to receive actual page payload. The links are useful only when you have an app that use SSR not CSR.

If you can access page payload like this:

http://locahost/api/data?page=1

You don't need those links

from material-react-table.

I still don't understand what they're asking for

from material-react-table.