Custom search params
Hello, how I can use useSearchParams, with useTable for sync query, because I need to navigate for new page when I used new filters sorters and pagination , not updating current path?
6 Replies
Hi @RomaY. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The
useTable
hook in Refine provides a feature called syncWithLocation
which allows you to synchronize the table's state (like filters, sort order, pagination) with the URL's query parameters. When the URL changes, the useTable
state is automatically updated to match, and vice versa. This makes it easy to share table state across different routes or pages, and to allow users to bookmark or share links to specific table views.
To enable this feature, you can set the syncWithLocation
property to true
in the useTable
hook or in the <Refine />
component's options
prop.
Here is an example of how to use it in useTable
:
And here is an example of how to use it in <Refine />
:
However, if you want to navigate to a new page when new filters are applied, you might need to implement a custom solution that listens for changes in the useTable
state and then uses the useHistory
hook from react-router-dom
to navigate to the new page with the updated query parameters.
Unfortunately, the provided knowledge sources do not contain specific examples or instructions on how to implement this custom solution. You might need to refer to the React Router documentation (https://reactrouter.com/) for more information on how to use the useHistory
hook to programmatically navigate to new pages.
Sources:
- Refine Docs: useTable (https://refine.dev/docs/data/hooks/use-table#syncwithlocation)
- Refine Docs: Tanstack-table (https://refine.dev/docs/packages/tanstack-table/use-table#syncwithlocation)
- Refine Blog: How to Build a React Admin Panel with Mantine and Strapi (https://refine.dev/blog/react-admin-panel#how-to-share-the-current-page-with-filters)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@538717491908575242> kapa.ai is still learning and improving, please let us know how it did by reacting below
foreign-sapphire•5mo ago
I don’t want to use syncWithLocation, because it’s just replace current path, and I need to create a new one
@contributor
@kapa.ai
Let me check the knowledge base for you. One moment! :books:
Sorry @RomaY, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?
foreign-sapphire•5mo ago
I just want to navigate between pages with different filters by pagination and sorting, not just overwrite it
Who can help me?
@contributor
Or I can just set my serachParams, after that I take the value from searchParams to setFilters and then send the request to the server?
and I use useTable from @refined/core
@kapa.ai
Let me check the knowledge base for you. One moment! :books:
Sorry @RomaY, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?