Saving Table State When Navigating away in NextJS

[rlawrence89]

Background:
My application retrieves data from graphql and displays that data using react table. My react Table implements pagination, global and column filtering for now.

Current Challenge:
If i were to filter my data in the table and navigate away from the page the back using the browser back button all my filters are reset.
How can i persist my filtered results while navigating?

[tannerlinsley]

Control the filter state as part of the URL and thus the browser history

[rlawrence89]

Was able to figure it out Thanks for putting me on the right track

[NixBiks]

I think it would be great with an example. I guess you basically want to have the URL control state instead of react-table, e.g. for sorting. Or how did you solve it?

[talatkuyuk]

React-table has and keeps own state. If you save or keep this state object into a state management like redux; then you can get this table state from the redux store whenever the table instance created again. I mean that you can use redux store instead of react hooks while creating the table instance for the react-table state (variables and update functions). I didn't implement yet, but I know I have to store the table state somewhere in redux store, session storage or local storage. You should think about not only filter state but also other table feature state and you can not keep all the table state in the URL. If your consideration is only the filter state, you good to go with the URL.

[AdaptingAFM]

\

you can not keep all the table state in the URL.

It is completely possible and normal to store UI state within the params of the URL. And it is really trivial to both serialize and de-serialize the state you have to present considering how stablished the URL standard is.

[talatkuyuk]

@AdaptingAFM Thank you for clarification. I know that the table state is composed of mostly arrays and objects if you implement all the table features. So it is possible that the table state can be put in the URL through stringifying, but is it practical to keep all the state in the URL instead of redux like store? The user may navigate the react/nextjs page through a navigation/side bar, and may want to see the same table state that he/she arranged when he/she last visited the table page. That's what I meant in my answer above.