CODEWITHSUNDEEP
javascriptreactjsantd
JediMarley
JediMarley

Reputation: 68

Forcing a column to require sorting in Ant Design

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 component

<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!

Upvotes: 4

Views: 4861

Answers (2)

Peter
Peter

Reputation: 1259

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']

Upvotes: 4

Dennis Vash
Dennis Vash

Reputation: 53964

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

Upvotes: 0

Related Questions