Я реализовал Ant Design Table на сайте Gatsby. Я вытягиваю данные из graphql. Пока все работало просто отлично. Данные отображаются правильно, нумерация страниц работает и т. Д.

Теперь я хочу добавить возможность сортировки столбцов. Для этого я настроил таблицу и столбцы следующим образом:

{amp}lt;Table dataSource={data.allNewsFeed.edges} onChange={onChange} rowSelection={rowSelection} rowKey="id" {amp}gt; {amp}lt;Column title="Title" dataIndex="node.title" key="title" sorter={(a, b) ={amp}gt; a.node.title - b.node.title} sortDirections={["descend", "ascend"]} /{amp}gt; {amp}lt;/Table{amp}gt; 

Теперь появляется значок для сортировки столбца, но ничего не происходит, когда я нажимаю на него.

То же самое происходит, если я sorter={(a, b) ={amp}gt; a.title - b.title} из функции сортировщика: sorter={(a, b) ={amp}gt; a.title - b.title} .

Итак, я застрял — есть идеи, почему это не работает и как это исправить?

Благодарю.

Ответ @ norbitrial правильный, так как для справки здесь используется общий сортировщик (для чисел и строк):

 const sorter = (a, b) ={amp}gt; (isNaN(a) {amp}amp;{amp}amp; 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) ={amp}gt; sorter(a.status, b.status), render: Name } ] 

Я предполагаю, что вы можете использовать вместо a.node.title - b.node.title String.prototype.localeCompare для правильной сортировки. Как указано в документации:

Метод localeCompare () возвращает число, указывающее, идет ли строка ссылки до или после или совпадает с заданной строкой в ​​порядке сортировки.

Как-то так:

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

Так что я думаю, что в упомянутом случае это будет:

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

Надеюсь, это поможет!