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.
9 Replies
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:
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:
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:
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:
----------------------<@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
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
:
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:
----------------------<@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