Search code examples
reactjsmaterial-uimui-datatable

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

  • 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.