rare-sapphire•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. 👊

rare-sapphireOP•2y ago

Before any sorting

rare-sapphireOP•2y ago

First time applying sorting sorting my plateNo and capacity

rare-sapphireOP•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

rare-sapphireOP•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

rare-sapphireOP•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

continuing-cyan•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)}
/>
...

rare-sapphireOP•2y ago

i see let me give it a shot

continuing-cyan•2y ago

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

rare-sapphireOP•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

Reset sorting for useTable

Did you find this page helpful?