[material-ui][TablePagination] Out of range error

[lokomass]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/p/sandbox/zealous-perlman-forked-yyqttv

Steps:

1. go to page 2
2. remove the 11th item
3. trigg the error

Current behavior 😯

No response

Expected behavior 🤔

no error

Context 🔦

When I remove an item in a page, and this is the last (like 11th element), I want to go to previous page.
But, there is an error because on page 1, there isn't no more items.

Your environment 🌎

No response

[aacevski]

Adding this piece of code in the TablePagination component fixes this issue:

 React.useEffect(() => {
    const newLastPage = Math.max(0, Math.ceil(count / rowsPerPage) - 1);
    if (page > newLastPage) {
      onPageChange(null, newLastPage);
    }
  }, [count, page, rowsPerPage, onPageChange]);

However should this fix be implemented in the component itself? If so, I can open a pull request for this fix - however in my honest opinion it would pollute the component itself. What do you guys think?

[lokomass]

Thanks for your reply, I've tried this in the sandbox : https://codesandbox.io/p/sandbox/zealous-perlman-forked-9kskcl
But problem is the same, we come back to first page, but Mui error appears again

[aacevski]

Yep, this happens because of line 374 in the TablePagination.js component.

I would propose to add the useEffect fix in the component itself (in the core component I mean) and remove this warning since that use case will be handled with the useEffect.

[lokomass]

You mean in the node_module folder ??? There isn't another solution ?

[aacevski]

You mean in the node_module folder ??? There isn't another solution ?

No no, I mean I meant to add this code in the core package so it gets fixed for you, but that was more of a question to the maintainers haha, sorry for the confusion.

[ZeeshanTamboli]

You should address this in your component, which is why we issue the warning. Previously, we handled it in the Table Pagination component, but we removed that functionality in #14534. You can find the reasoning behind this decision in the discussion in #13995.

Furthermore, I don't believe you need to use useEffect to handle it. You can calculate it during component re-renders. Using useEffect for this purpose is inefficient. You can learn more in the React docs.

Check out the updated CodeSandbox: here.