Mui-datatables: Reducing table data can cause current page to be out of bounds

[lounsbrough]

We have opened a PR that should fix this bug: https://github.com/gregnb/mui-datatables/pull/717

Expected Behavior

Current Behavior

When I am on page 10 of a large table, and I modify the data in the table such that there are now only 9 pages, the component blows up.

Steps to Reproduce (for bugs)

1. Load table with several pages of data
2. Navigate to the last page
3. Remove a large portion of the data
4. The table component will throw an error and wreck your site

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 3.5.1 |
| MUI-datatables | 2.5.1 |
| React | 16.8.4 |
| browser | Chrome |

[gabrielliwerant]

Unfortunately, these steps weren't specific enough for me to reproduce the issue. :(

I loaded an example from the site with several pages of data, set the data to only a single entry, and everything appears to work fine:

Can you provide a code sample in codesandbox which demonstrates the issue?

Thanks!

[lounsbrough]

You got it: https://codesandbox.io/s/gifted-brattain-ty0j6

I made this as simple and concise as possible. You can navigate forward a couple pages, and then click the button to "Reduce data to 1 row" and you will notice a couple things:

• The pagination shows an invalid state, for example, it might be 31-1 of 1, which is clearly invalid.
• The more concerning issue is the prop type error which you can see in the console. This causes higher order components to blow up, and seems like an issue in general.

This is what our PR is intended to fix.

Let me know if you want more clarification on what we're seeing, and thanks for your help with this!

[gabrielliwerant]

So, in your bug report here, you listed your version of material ui as 3.5.1, which is correct as the highest the library officially supports at the moment. But in the example in the codesandbox, your version is the latest. If I switch it down to 3.5.1, there is no pagination issue, and again, everything seems to work fine.

Can you break this on 3.5.1 with an HOC?

[lounsbrough]

I see that this is indeed fixed in codesandbox by downgrading material ui. However we still see the issue in our app with the same version (3.5.1). We will try to reproduce in the sandbox tomorrow with the same versions.

Thanks!

[lounsbrough]

We changed the codesandbox demo to use Redux like our application does and are still unable to recreate the issue. We will do some further investigation and then most likely close this issue.

https://codesandbox.io/s/gifted-brattain-ty0j6

[lounsbrough]

Ok, we have it broken in codesandbox. We changed our code to remove data more randomly, and now you can see the issue. Let me know what else you need from me to reproduce this issue.

Note that you should move close to the last page, as it will remove ~50% of the data.

https://codesandbox.io/s/gifted-brattain-ty0j6

Thanks!

[gabrielliwerant]

Phew! Finally, I can reproduce, with your help, thank you. I've created a minimal example forked from your example: https://codesandbox.io/s/stoic-bassi-e2ncs?fontsize=14. You'll notice if you switch between 9 and 10 rows of data, the bug will appear. It's an edge case around remaining data results sets that are larger than the page count. I will work on a fix, but in the mean time, you should be able to fix on your end by resetting the page to 0 after you change the amount of data. which you will need. PR up now.

[alexeykush]

So, when it will be fixed?