narrow-beige
narrow-beige16mo ago

Reset sorting for useTable

I have a reset button, which I am using to reset the sorting on the table. Btw I am also doing multiple sorting over my table. I am using setSorter return by useTable hook. When I click on the reset button, I am calling setSorter and setting the sorter state to blank array. The sorting works, as it refetches the data,however, it looks like the sorting params withtin the Table component is not getting updated. When I go back to sorting the table with any of the fields, it is still making use of the previous sort fields it had prior to the reset, in addition to the new field being sorted.
10 Replies
refine-support-bot
Hey, I am refine support bot :wave:. I am here to help you with your question. I searched for the answer to your question in the refine documentation and could not find an answer. Please wait for someone from the refine core team or the community to try to help you. 👊
narrow-beige
narrow-beige16mo ago
Before any sorting
No description
narrow-beige
narrow-beige16mo ago
First time applying sorting sorting my plateNo and capacity
No description
narrow-beige
narrow-beige16mo ago
After I click on the reset Button it fetches clean data without any sorting but the Ui still shows previously greyed out columns
narrow-beige
narrow-beige16mo ago
now after reset button when I click on any filed to sort, the previous fields are still there within the sort, in addition to the new field, in this case fuel
No description
narrow-beige
narrow-beige16mo ago
I understand I can make use of onChange function on table along with sortOrder for each column, but doesn't that defeat the purpose of setSorter ? And also I will than have to do manually call useList
rising-crimson
rising-crimson16mo ago
Hey @haribo_mushi, It's probably caused by using syncWithLocation prop If you use syncWithLocation prop, you should use getDefaultSortOrder method from @pankod/refine-antd package to get default sort order from location. So, Can you try it like this?
import { useTable, getDefaultSortOrder } from "@pankod/refine-antd";


const { sorter } = useTable();

...
<Table.Column
dataIndex="id"
title="ID"
sorter
defaultSortOrder={getDefaultSortOrder("plateNo", sorter)}
/>
...
import { useTable, getDefaultSortOrder } from "@pankod/refine-antd";


const { sorter } = useTable();

...
<Table.Column
dataIndex="id"
title="ID"
sorter
defaultSortOrder={getDefaultSortOrder("plateNo", sorter)}
/>
...
narrow-beige
narrow-beige16mo ago
i see let me give it a shot
rising-crimson
rising-crimson16mo ago
You can ignore to my last message, I've deleted it. If the problem is persist, let me know 🙏
narrow-beige
narrow-beige16mo ago
import { useTable, getDefaultSortOrder } from "@pankod/refine-antd";


const { sorter } = useTable();

...
<Table.Column
dataIndex="id"
title="ID"
sortOrder={getDefaultSortOrder("plateNo", sorter)}
defaultSortOrder={getDefaultSortOrder("plateNo", sorter)}
/>
...
import { useTable, getDefaultSortOrder } from "@pankod/refine-antd";


const { sorter } = useTable();

...
<Table.Column
dataIndex="id"
title="ID"
sortOrder={getDefaultSortOrder("plateNo", sorter)}
defaultSortOrder={getDefaultSortOrder("plateNo", sorter)}
/>
...
adding your code snippet to both defaultSortOrder and sotOrder worked thanks