eager-peach•4mo ago

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

kapa.ai•4mo ago

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:

useTable({  
 refineCoreProps: {  
 syncWithLocation: true,  
 },  
});

useTable({  
 refineCoreProps: {  
 syncWithLocation: true,  
 },  
});

And here is an example of how to use it in <Refine />:

<Refine {...} options={{ syncWithLocation: true }}>

<Refine {...} options={{ syncWithLocation: true }}>

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: ----------------------

kapa.ai•4mo ago

<@538717491908575242> kapa.ai is still learning and improving, please let us know how it did by reacting below

eager-peach•4mo 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

kapa.ai•4mo ago

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?

eager-peach•4mo 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

kapa.ai•4mo ago