无法对Gatsby站点的Ant设计表中的列进行排序 [英] Can't sort Column in Ant Design Table in Gatsby site

问题描述

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

I have implement an Ant Design Table in a Gatsby site. I am pulling in the data from graphql. So far everything has worked just fine. The data is displaying properly, pagination works, etc.

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

Now I want to add the ability to sort the columns. To do so, I set up the table and columns as follows:

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

现在，确实显示了用于对该列进行排序的图标，但是当我单击它时什么也没有发生.

Now, the icon for sorting the column does shows up, but nothing happens when I click on it.

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

Same thing happens if I remove .node from the sorter function: sorter={(a, b) => a.title - b.title}.

所以，我陷入了困境–知道为什么它不起作用以及如何解决?

So, I am stuck -- any idea why this is not working and how to fix it?

谢谢.

推荐答案

@norbitrial的答案是正确的，仅供参考这是一个通用的分类器(用于数字和字符串):

@norbitrial's answer is correct, as for reference here is a generic sorter (for numbers and strings):

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

这篇关于无法对Gatsby站点的Ant设计表中的列进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！