无法对 Gatsby 网站的 Ant Design Table 中的列进行排序

Posted 2023-03-08

【中文标题】无法对 Gatsby 网站的 Ant Design Table 中的列进行排序

【英文标题】：Can't sort Column in Ant Design Table in Gatsby site

【发布时间】：2020-04-16 04:21:33

【问题描述】：

我在 Gatsby 网站中实现了一个 Ant 设计表。我正在从 graphql 中提取数据。到目前为止，一切都很好。数据显示正常，分页工作等。

现在我想添加对列进行排序的功能。为此，我将表和列设置如下：

<Table
  dataSource=data.allNewsFeed.edges
  onChange=onChange
  rowSelection=rowSelection
  rowKey="id"
>
  <Column
    title="Title"
    dataIndex="node.title"
    key="title"
    sorter=(a, b) => a.node.title - b.node.title
    sortDirections=["descend", "ascend"]
  />
</Table>

现在，确实显示了用于对列进行排序的图标，但是当我单击它时没有任何反应。

如果我从排序功能中删除.node，也会发生同样的事情：sorter=(a, b) => a.title - b.title。

所以，我被卡住了——知道为什么这不起作用以及如何解决它吗？

谢谢。

【问题讨论】：

这能回答你的问题吗？ how to sort a table in alphabetical order with antd

【参考方案1】：

我想您可以使用String.prototype.localeCompare 代替a.node.title - b.node.title 进行正确排序。正如文档所述：

localeCompare() 方法返回一个数字，指示引用字符串是在排序顺序之前还是之后或与给定字符串相同。

不知何故：

const values = ['random', 'something', 'else', 'text'];
const result = values.sort((a,b) => 
  return a.localeCompare(b);
);

console.log(result);

所以我猜在提到的情况下它会是：

<Column title="Title"
        dataIndex="node.title"
        key="title"
        sorter=(a, b) => a.node.title.localeCompare(b.node.title)
        sortDirections=["descend", "ascend"] />

我希望这会有所帮助！

【讨论】：

谢谢 - 非常感谢。我需要使用 Dennis Vash 的答案才能真正让它发挥作用，但正如他所指出的，他的答案是基于你的。

没问题，很乐意为您提供帮助！

【参考方案2】：

@norbitrial's answer 是正确的，作为参考，这里是一个通用排序器（用于数字和字符串）：

const sorter = (a, b) => (isNaN(a) && isNaN(b) ? (a || '').localeCompare(b || '') : a - b);

// Usage example with antd table column
[
  
    title: 'Status',
    dataIndex: 'status',
    key: 'status',
    width: '10%',
    // status can be Number or String
    sorter: (a, b) => sorter(a.status, b.status),
    render: Name
  
]