Mui-datatables: Cannot update page property from the outside

[NoMercy235]

Expected Behavior

Dynamically setting the page property of the options should update the table and trigger the onChangePage event.

Current Behavior

Nothing happens. The table does not react to any change in its options

Steps to Reproduce (for bugs)

1. Go here https://codesandbox.io/s/focused-lichterman-k8170
2. Notice that there's a set timeout which calls setPage(1) after one second
3. Notice that nothing changes in the table

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 4.0.1 |
| MUI-datatables | 2.1.0 |
| React | 16.8.6 |
| browser | any |

[gabrielliwerant]

Couple of things. Your table version is lower than the latest. Additionally, you are using hooks from newer versions of react than are officially supported by this library.

If you can construct your example without using react hooks and with the latest version of the library, and still demonstrate that there is a problem, I will be happy to take a look.

[chenasraf]

@gabrielliwerant here is the same example using regular state and version 2.6.2, still doesn't work - I can say I'm using recompose + withState and the same bug applies.

https://codesandbox.io/s/recursing-cdn-ywbcp

[NoMercy235]

Hello! Sorry for the messy initial example. It was midnight and I was in a hurry. 😅 The example provided by @chenasraf is exactly my case. After the table is rendered, altering the options won't change the internal state of the table. One workaround I've thought of would be to change the key property of the table based on the conditions that I change in the options object, but that is a bit ugly.

As a side note, I've tried to update to the latest version of mui-datatables this morning (2.6.2) and the issue is still there. I can provide more information/examples tonight if you need them.

[NoMercy235]

Update: I've found a workaround for now by using React's reference and then calling the changePage method from the MUIDataTable component. However, I cannot replicate the same behavior in codesandbox. You can see here https://codesandbox.io/s/heuristic-swanson-krp9v the same way I've used in my project to modify the page from outside the table, but, for some reason, it doesn't work in the sandbox. I have the same version of React and mui-datatables locally.

LE: managed to get it working in the sandbox as well. Apparently, I should've used the innerRef property instead of ref, but, for some reason, in the local project, it works with ref, too (and with innerRef as well). 😱 Anyways, maybe it's some configuration I have. 🤔

[gabrielliwerant]

Yes, it might need to be hacked. I looked into it a little, and it appears to be a manifestation of the issue discussed here: https://github.com/gregnb/mui-datatables/issues/679. The table is managing page state internally for pagination. In a situation like that, it's fundamentally impossible for react to both respect changes coming from props AND internal state derived from those props.

[NoMercy235]

Yup, I also did my share of investigation. It looks like this can't possibly be done without changing a big chunk of the current logic, and I suppose that's not in the plan for any near future. 😄 Should we close this issue and just be content with the fact that you can use React's reference to get around this kind of problems?

[chenasraf]

Ref sounds like a reasonable solution, provide it actually works - I will try it out myself soon, but if the codesandbox example doesn't work, there might need to be some modifications anyway.

Also, references are not currently covered in the readme, and knowing React refs being finnicky, I think this is something that should be documented, as I had no idea it was possible before this discussion.

[NoMercy235]

@chenasraf You can check the sandbox from my last comment. I modified it and it works properly now. The references are not often used, indeed, and it's better that way because you can abuse them a lot and do things that you're not supposed to. 😛 In edge cases like this one, however, there is no other way. Perhaps the documentation should be updated to specify this kind of possibility in the eventuality that someone needs to do something similar. But with a big red exclamation sign in front of it to let the users know it should be used as a last resort. 😄

[gabrielliwerant]

I think it's worth keeping this issue open in case others run into the same issue and are looking for a workaround. Thanks for looking into this and for helping to provide one!

[Ahsan-R-Kazmi]

@NoMercy235 Thanks for the example here: https://codesandbox.io/s/heuristic-swanson-krp9v. It really helped me out with this issue, since the table would not change back to page 0 when doing a new search (using server-side data) from another page.

[ShqipognjaLL]

Thanks for the example. Just out of curiosity, innerRef is not a React or Material UI property is it? Therefore it has to be a property implemented by MUI-Datatables itself. Is this documented anywhere? I can't seem to find it.

[chenasraf]

@ShqipognjaLL innerRef is a Material UI property, which passes its value to ref prop on appropriate element inside the component