Multiple table search params
How should I handle multiple independent table search params on a single page (some synced to URL, some not)?
I have a page with 5 different tables. Each table has its own filters, sorting, and pagination. Some of these tables should sync their state (e.g. page number, filters) to the URL via search params, while others should keep state internally without touching the URL.
I read through this TanStack blog post https://tanstack.com/blog/search-params-are-state, which is helpful conceptually, but it doesn’t make it clear how to handle multiple independent state slices that may or may not persist to the URL.
What would be a good pattern or approach to:
• Namespace search params so each table can manage its own without collision
• Allow each table to optionally sync to the URL or stay local
• Update search params partially, without affecting unrelated table states
Has anyone dealt with this kind of hybrid setup before? Would love to hear examples, patterns, or custom hook ideas that scale well.
3 Replies
noble-gold•3mo ago
a concrete example would help here
why do some tables have their state in the url and others don't?
ratty-blushOP•3mo ago
I think we could boil it down to have tables to always save the state to url if any filter/sorring/pagination etc on it was changed to keep it simple and reliable. Having some that save and some that don’t does indeed smell bad
genetic-orange•3mo ago
you could encode each table's params into json and persist that in a single param per table
rather than have multiple params per table
or if all the tables have the same params you can use param arrays to "namespace" them by index