rival-black•2y 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•2y ago

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. 👊

rival-black•2y ago

Before any sorting

rival-black•2y ago

First time applying sorting sorting my plateNo and capacity

rival-black•2y ago

After I click on the reset Button it fetches clean data without any sorting but the Ui still shows previously greyed out columns

rival-black•2y 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

rival-black•2y 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

rare-sapphire•2y 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)}
/>
...

rival-black•2y ago

i see let me give it a shot

rare-sapphire•2y ago

You can ignore to my last message, I've deleted it. If the problem is persist, let me know 🙏

rival-black•2y 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