Can't sort Column in Ant Design Table in Gatsby site

Question

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.

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?

Thanks.

Does this answer your question? [how to sort a table in alphabetical order with antd](https://stackoverflow.com/questions/55808128/how-to-sort-a-table-in-alphabetical-order-with-antd) — core114, Dec 25 '20 at 07:44

norbitrial · Answer 1 · 2019-12-25T15:38:23.267

3

I guess you can use instead of a.node.title - b.node.title the String.prototype.localeCompare for proper sorting. As the documentation states:

The localeCompare() method returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.

Somehow this:

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

console.log(result);

So I guess in the mentioned case it would be:

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

I hope this helps!

edited Dec 25 '19 at 15:38

answered Dec 25 '19 at 15:32

norbitrial

14,716
7
32
59

Thanks - much appreciated. I needed to use Dennis Vash's answer to actually get it to work, but as he noted, his answer was based on yours. – Moshe Dec 25 '19 at 16:06
No issues, happy to help! – norbitrial Dec 25 '19 at 16:07

score 3 · Accepted Answer · answered Dec 25 '19 at 15:41

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

Can't sort Column in Ant Design Table in Gatsby site

2 Answers2

Linked