extended-salmon•10mo ago

NextJS persistency TanStack + Mantine Table sorting

Hey, I have made a Table with TanStack + Mantine Table and now i want to implement sorting functionality but I am stuck on something; First of all persistency; whenever I enable a sort the page get reloaded. This is something I dont want. Next to that I want to enalbe multiple sorts and not just only one. Can anyone help me? I use NextJS also.

message.txt

9 Replies

kapa.ai•10mo ago

Hi @Justian. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Sure, I can help you with that. Firstly, to prevent the page from reloading when you enable a sort, you can use the syncWithLocation option provided by the useTable hook from TanStack. This option syncs the sorting state with the URL. If you disable it, the sorting state won't affect the URL and hence, the page won't reload. Here is how you can do it:

const { getHeaderGroups, getRowModel } = useTable({  
 columns,  
 syncWithLocation: false,
});

const { getHeaderGroups, getRowModel } = useTable({  
 columns,  
 syncWithLocation: false,
});

Source (https://refine.dev/docs/packages/tanstack-table/use-table#syncwithlocation) Secondly, to enable multiple sorts, you can use the multiSort option provided by the useTable hook. Here is how you can do it:

const { getHeaderGroups, getRowModel } = useTable({  
 columns,  
 multiSort: true,
});

const { getHeaderGroups, getRowModel } = useTable({  
 columns,  
 multiSort: true,
});

Unfortunately, I couldn't find any information about multiSort in the provided extracts. You might want to check the official documentation of TanStack for more details. Lastly, regarding Next.js, it shouldn't affect the sorting functionality of your table as long as you're using client-side sorting. If you're using server-side sorting, you might need to handle the sorting logic in your API routes. If you want to disable server-side sorting and handle sorting on the client-side, you can set the sorters.mode to "off" in the useTable hook:

useTable({  
 refineCoreProps: {  
 sorters: {  
 mode: "off",  
 },  
 },  
});

useTable({  
 refineCoreProps: {  
 sorters: {  
 mode: "off",  
 },  
 },  
});

Source (https://refine.dev/docs/packages/tanstack-table/use-table#sortersmode) I hope this helps! Let me know if you have any other questions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

extended-salmonOP•10mo ago

@kapa.ai the multisort is still not working. And I want to keep syncWithLocation on

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry for the confusion, but based on the information provided in the extracts, Refine doesn't seem to support multiple sorting out of the box. The syncWithLocation feature in Refine allows you to sync the sorting state with the URL, but it doesn't seem to support multiple sorts. Here's how you can use syncWithLocation:

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

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

Source (https://refine.dev/blog/react-admin-panel#how-to-share-the-current-page-with-filters) However, there's no mention of multiple sorting support in the provided extracts. You might need to implement a custom solution for this. I recommend checking the official documentation or reaching out to the Refine community for more help. As for the page reloading issue, it seems to be a known issue with Refine when syncWithLocation is set to true. There are ongoing discussions about this issue on GitHub, and the Refine team is working on a solution. You can follow the progress on this GitHub issue (https://github.com/refinedev/refine/issues/5517). I hope this helps! Let me know if you have any other questions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

conscious-sapphire•10mo ago

hello @Justian, which data provider are u using ?

extended-salmonOP•10mo ago

A rest API @Alican Erdurmaz

conscious-sapphire•10mo ago

Hello @Justian, I couldn't even sort multiple on their examples. https://tanstack.com/table/v8/docs/framework/react/examples/sorting

React Table Sorting Example | TanStack Table Docs

An example showing how to implement Sorting in React Table

conscious-sapphire•10mo ago

I will look debug more and I will inform you when I have a solution

NextJS persistency TanStack + Mantine Table sorting

Did you find this page helpful?