javascript - Forcing a column to require sorting in Ant Design - Stack Overflow

admin管理员组

文章数量:1431413

So currently I have a table with sorting enabled on one of the columns, the column being createdAt. I want the table to always be sorted but currently how its working is that the column will toggle between DESC, to none, to ASC. This is causing me some headache since for the end user experience the table should always be sorted in some direction, and for future tables with multiple sorting columns I also want sorting to be required. I can't find any properties on the table or column to support this type of behavior so for a temporary work around I'm just checking on the back-end if its receiving the sorting params and if it isn't it just defaults to DESC on id.

Columns are defined in an array of objects and then used as a property on the ant design table. below is my date created column object

{
  title: 'Date Created',
  dataIndex: 'createdAt',
  key: 'createdAt',
  width: '17%',
  sorter: (a, b) =>
    (new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()) /
    (1000 * 3600 * 24),
  defaultSortOrder: 'descend',
  ...getColumnSearchProps('createdAt'),
  render: createdAt => {
    return (
      <span>
        {new Date(createdAt).getMonth()}/{new Date(createdAt).getDate()}/
        {new Date(createdAt).getFullYear()}
      </span>
    );
  }
},

and the ant design table ponent

<Table
    columns={columns}
    rowKey={record => record.id}
    dataSource={data}
    pagination={pagination}
    loading={loading}
    onChange={handleTableChange}
  />

Update: Below is a link to a code sandbox from the ant design website showcasing how sorting on tables works. My issue has to do with the ant design framework and not my code. If you sort the columns after the column is already ascending it disables the sort. I want my table to always have sorting on, all I need to do is remove the ability to disable the sort. Just looking for ideas.

Thanks for any help in advance!

So currently I have a table with sorting enabled on one of the columns, the column being createdAt. I want the table to always be sorted but currently how its working is that the column will toggle between DESC, to none, to ASC. This is causing me some headache since for the end user experience the table should always be sorted in some direction, and for future tables with multiple sorting columns I also want sorting to be required. I can't find any properties on the table or column to support this type of behavior so for a temporary work around I'm just checking on the back-end if its receiving the sorting params and if it isn't it just defaults to DESC on id.

Columns are defined in an array of objects and then used as a property on the ant design table. below is my date created column object

{
  title: 'Date Created',
  dataIndex: 'createdAt',
  key: 'createdAt',
  width: '17%',
  sorter: (a, b) =>
    (new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()) /
    (1000 * 3600 * 24),
  defaultSortOrder: 'descend',
  ...getColumnSearchProps('createdAt'),
  render: createdAt => {
    return (
      <span>
        {new Date(createdAt).getMonth()}/{new Date(createdAt).getDate()}/
        {new Date(createdAt).getFullYear()}
      </span>
    );
  }
},

and the ant design table ponent

<Table
    columns={columns}
    rowKey={record => record.id}
    dataSource={data}
    pagination={pagination}
    loading={loading}
    onChange={handleTableChange}
  />

Update: Below is a link to a code sandbox from the ant design website showcasing how sorting on tables works. My issue has to do with the ant design framework and not my code. If you sort the columns after the column is already ascending it disables the sort. I want my table to always have sorting on, all I need to do is remove the ability to disable the sort. Just looking for ideas. https://codesandbox.io/s/y4pxx

Thanks for any help in advance!

• javascript
• reactjs
• antd

Share Improve this question Follow edited Oct 21, 2019 at 15:13 JediMarley asked Oct 21, 2019 at 14:12 JediMarleyJediMarley 6811 silver badge55 bronze badges 10

• 2 You should definitely provide some code, sort feature in a table is not standard html. – Apolo Commented Oct 21, 2019 at 14:20
• @Apolo just updated, this is in reference to the Ant Design react UI framework and is definitely not using standard html. Hope that helps – JediMarley Commented Oct 21, 2019 at 14:44
• Everything look okay in the code above, could you post a code sandbox and show what the issue is? My best guess right now would be that the sorter that you wrote now isn't working as you expect it to. – Shivam Gupta Commented Oct 21, 2019 at 15:04
• @ShivamGupta Not an issue with the code at all, has to do with the framework. I updated the question above to have a link to a code sandbox. Just play around with sorting and you'll see what I mean. – JediMarley Commented Oct 21, 2019 at 15:15
• Ah now I understand what you mean. You want to disable the default sort (no sort option for the table) right? – Shivam Gupta Commented Oct 21, 2019 at 15:30

 |  Show 5 more ments

2 Answers 2

Sorted by: Reset to default 4

I have just faced with the same issue, and there is my solution:

At the columns define the sort directions like this:

sortDirections: ['ascend', 'descend', 'ascend']

Instead of this:

sortDirections: ['descend', 'ascend']

You can just render the column filter as you want, there is an official example for it.

Use filterDropdown with filterIcon to render a custom sorter as you like, both properties accepts ReactNode as expected.

filterDropdown Customized filter overlay React.ReactNode | (props: FilterDropdownProps) => React.ReactNode

---

filterIcon Customized filter icon ReactNode|(filtered: boolean) => ReactNode

Reference: - Column ponent.

本文标签： javascriptForcing a column to require sorting in Ant DesignStack Overflow