如何对 Ant Design V2.x 表中的数据进行排序？

Question

我正在使用Ant Design V2.X，但我无法更新到较新的版本。我继承了代码，我正在努力根据特定列对数据进行排序。它应该被订购一次，而不是动态排序。

这就是我在 React 组件的 return() 函数中的内容：

<Table size="small"
       dataSource={this.props.Data}
       rowKey={(record) => (record.LedgerId * 100 + record.PositionId).toString()}
       pagination={false}
       showHeader={true}
>

我假设rowKey 会根据箭头函数对我的数据进行排序，但事实并非如此。 大家能指导我如何解决这个问题吗？

背景资料

在组件中，我有以下声明：

export interface ViewTableProps {   
    selectedEntity: number,
    Data Interfaces.ViewEntry[],
}

其他地方

export interface ViewEntry {
    //Id: number,
    LedgerId: number,
    PositionId: number,
    Value: number,
    children: ViewEntry[]
}

相关和不那么相关的帖子

• Antd table - sort dosen't work with render
• Can't sort Column in Ant Design Table in Gatsby site
• Sort an antd (Ant Design) table that has selection enabled

Answer 1

如果您想为各个列添加实际的排序器，您需要在列定义的sorter 属性中编写排序函数。如果要默认对整个数据集进行排序，可以在将数据源传递给表之前对其进行排序。

列排序from their docs:

{
    title: 'Age',
    dataIndex: 'age',
    defaultSortOrder: 'descend',
    sorter: (a, b) => a.age - b.age,
  },

如果你想要一个“默认排序”，你可以只做一个函数来对表外的数据进行排序；

const sortData = (data) => {
   // Call slice to create a new Array and prevent mutating it if it's stored in state
   return data.slice().sort((a, b) => a.myKey - b.myKey);
}

...

<Table size="small"
       dataSource={sortData(this.props.Data)}
       rowKey={(record) => (record.LedgerId * 100 + record.PositionId).toString()}
       pagination={false}
       showHeader={true}
>

Answer 2

如果您想订购日期，我建议您这样做：

import moment from 'moment';

并添加

{
 title: 'Date',
 dataIndex: 'date',
 key: "date",
 sorter: (a, b) => moment(a.date).unix() - moment(b.date).unix()
},