Mui-datatables: Failed prop type: The page prop of TablePagination is out of range.

[richardszegh]

I am using mui-datatables to display data, and I have a button that filters the data (using JS filter method), removing some elements. When I am on a page that shouldn't exist after the data has been filtered due to decreased quantity of data, mui-datatables will not reset the page to the first page or to the last page where there is still data to be displayed, rather it will stay on the page I was before with no data to show.

Expected Behavior

When filtering the data, mui-datatables should move the page to either the first page or to the last one which still has data to display.

Current Behavior

When filtering the data, mui-datatables stays on the same page it was on before, even when there is no data to show on that page and the page should not exist.

Steps to Reproduce (for bugs)

CodeSandBox: https://codesandbox.io/s/mui-datatables-pagination-issue-9xpbj

1. Open the sandbox.
2. Go to the second page.
3. Remove some data using the button provided on top.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 4.2.0 |
| MUI-datatables | 2.6.4 |
| React | 16.8.6 |

[gabrielliwerant]

Thank you for creating this issue and helping me to verify what is going on.

So, in this case, you are providing your own filtering functionality. The issue described previously was fixed because it involves filtering/searching that occurs within the table functionality. Since you are providing your own mechanism, the table has no way of knowing that you are filtering the data, and so it does not have a good way to determine your intent. We could be defensive and check how many rows exist as compared to the pagination and current page, but the problem with this is that it is interpreting intent of the developer without any knowledge of it and may easily lead to situations where it does not perform as expected when devs are providing different functionality.

So I would say that this is similar to a serverside use case, where you are responsible for managing the state of the table. In this case, the fix would be for you to set the page option after filtering, so the table knows what it should be displaying.

[richardszegh]

@gabrielliwerant I understand, your help is much appreciated! One last question: how am I able to set the option you are talking about explicitly after doing my filtering?

[gabrielliwerant]

Something like this should work (in psuedocode):

this.state = {
  orders: data,
  currentPage: 0
};

const options = {
  page: this.state.currentPage
};

handleFilter = () => {
  const filteredOrders = data.filter(item => {
    return item.urgent === true;
  });

  // Check how many orders we have here and set page according
  // Ex:
  // let myPage = 0;
  // if (filteredOrders > rowLimit) myPage = 1;

  this.setState({
    orders: filteredOrders,
    currentPage: myPage
  });
};

return (
  <div>
    <button onClick={this.handleFilter}>Filter</button>
    <MUIDataTable data={this.state.orders} options={options} columns={columns} />
  </div>
)

[richardszegh]

@gabrielliwerant I have implemented your suggestion in the previous codesandbox demo (available on the same link), but still no luck. This approach doesn't seem to reflect the change of the local state onto the table. Any other ideas?

[gabrielliwerant]

Looks like there are some material-ui errors that are getting in the way. Your version is too high for the library. If I reduce it to 3.6.2, it works. I didn't experiment with how high it can go before an error, but you can start with that one.

[richardszegh]

@gabrielliwerant Reducing the version to 3.6.2 solved the issue. Thank you for your help & time!