Keeping table settings between page navigation/sessions
Hey all. I’ve put together a Table component with React using this library. It lets the user reorder columns, show/hide columns, pin, sort etc. As per the examples, I initialise the state in the (generic) table component and pass it in to the useReactTable hook.
However, I want a users preferences (e.g. their column order, or what is pinned or visible) to be kept when they navigate to a different page and back again, or even between sessions. I know I’ll need to use something like redux for the former and local storage for the latter, but does anyone have any advice/suggestions on implementing this as I’m not exactly sure how to?
8 Replies
flat-fuchsiaOP•3y ago
Just bumping this
plain-purple•3y ago
Local storage is straight forward enough. That way even when the session ends or browser is closed, the user can still return to the same state.
Read it up on MDN and hook in to it via a check with useEffect when your table component mounts.
plain-purple•3y ago
Window: localStorage property - Web APIs | MDN
The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.
plain-purple•3y ago
flat-fuchsiaOP•3y ago
Thanks @aniallator8, I’m going to look at this now. I’m trying to create a generic Table component, so I would think that this would need to be handled by the component that renders the generic Table component and then pass it in as a prop? Do you have any advice around setting this up for Tanstack Table, and how I would handle updating local storage whenever the user makes a change? (E.g. hiding a column)
I’ve had a go at moving the table state to redux but I’m having a lot of issues with typing. If I use local storage, does that mean that none of it would need to be in global state and I could go back to using local state? (Albeit in the component that renders the generic table, rather than the table itself)
foreign-sapphire•3y ago
I had that issue solved with a react router and a drawer 😄 Since opening the details would reset table filters. It was difficult to add the state directly to the redux slice because of the updater function. But for your issue I would try redux persist if you manage to find a clean solution to add your state to the slice or local storage
absent-sapphire•3y ago
I’d probably use zustand with persist, it’s super easy to implement. It checks state into localstorage (or whatever storage solution you decide to use), and also your zustand store is just a hook, no providers needed
We’re using it this way in production
plain-purple•3y ago
Two things:
- Yes, your state - and by association your table instance (
useReactTable) - will definitely need to be stored in the consuming component, with only the Tanstack Table calls such as getToggleSortingHandler() being emitted from within the genericTable component.
- Zustand with persist (https://docs.pmnd.rs/zustand/integrations/persisting-store-data) is a great call. That will then be able to manage your data layer and will remove a lot of the headache of working out when your components/app needs to re-render.Zustand Documentation
Zustand Documentation
Zustand is a small, fast and scalable bearbones state-management solution, it has a comfy api based on hooks