'Mui-datatables Material-UI: the page prop of a TablePagination is out of range

I have created a minimal example sandbox to show the problem/bug

Steps to reproduce:

Go to this link
Go to page 2
Click the button on top of the page

What is happening is our rowsPerPage is 2 but we have 4 rows initially so we have 2 pages.

When we navigate to the second page (which is showing rows 3 & 4) everything is good till now, but when we change the table data to an array of 2 rows only, the table is re-rendered but still shows the second page (which is empty as our newData holds only 2 rows and our rowsPerPage is 2).

At that point you have to click the left arrow to go to the page where you'll see the newData

I hope I am clear enough, how can I fix this problem?

Solution 1:^[1]

It looks like an open issue on their side in the latest version of the library. If a downgrade to a lower version of the library can be an option for you, your code is working just fine with version 2.0.0 of mui-datatables.

Solution 2:^[2]

I had a similar issue. In my case, the warning was generated when my app was in a loading state. While loading data, my record count = 0 causing the page prop validator to throw the warning.

I found two ways to solve this:

1. Hide pagination during the loading phase

This should cure the warning but might make the UI feel "janky" by flickering while the page is loading.

2. Use ternary logic to determine page value while loading

This was my preferred solution, allowing me to continue displaying the pagination controls while loading the page. The pagination information is not accurate during the brief loading period, but I find that to be more favorable than flickering.

To achieve the desired result, I created a constant to pass some logic into the currentPage prop for my table component:

// using a material-ui component in react web app
    
// sets page to 0 while loading

const pageWithLoading = {(page > 0 && records.length < rowsPerPage) ? 0 : page} 

<TablePagination curentPage={pageLoadingRange} {...props} />

I found a good discussion about these solutions here on GitHub

Solution 3:^[3]

had the same issues, didnt want to mess with the version so i came up with a workaroud:

Math.min(count, pageIndex) did the trick for the page prop

<TablePagination
            rowsPerPageOptions={[2, 5, 10, 25, 50]}
            component="div"
            count={count}
            rowsPerPage={rowsPerPage}
            page={Math.min(count, pageIndex)}
            onPageChange={onPageIndexChange}
            onRowsPerPageChange={onRowsPerPageChange}/>

Solution 4:^[4]

<TablePagination
          rowsPerPageOptions={[5, 10, 20, 25, 50, 75, 100]}
          component="div"
          count={rows.length}
          rowsPerPage={rowsPerPage}
          page={Math.min(rows.length, page)}
          onPageChange={handleChangePage}
          onRowsPerPageChange={handleChangeRowsPerPage}
        />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Arnaud Christ
Solution 2	NeuTrix
Solution 3	Ivan Yulin
Solution 4	Bhekanani Cele

'Mui-datatables Material-UI: the page prop of a TablePagination is out of range

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]