如何在 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 表 - 排序剂量不适用于渲染
• 无法对盖茨比网站中蚂蚁设计表中的列进行排序
• 对已启用选择的 antd(Ant 设计(表进行排序

Answer 1

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

从他们的文档中进行列排序：

{
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()
},