antd Table列排序

antd Table组件提供了很方便的列排序功能，可以通过设置`sorter`属性来实现。

首先在表头列中设置`sorter`属性为一个对象，对象中包含两个属性：`compare`和`multiple`。

`compare`属性是一个比较函数，接收两个参数，分别是当前行数据的两个单元格的数据，返回值为`1`或`-1`。当返回值为`1`时表示第一个单元格的数据大于第二个单元格的数据，需要升序排列；当返回值为`-1`时表示第二个单元格的数据大于第一个单元格的数据，需要降序排列。

`multiple`属性用于支持多列排序，当该属性为`true`时，按下`shift`键再点击列头可以添加该列到排序中。

举个例子，假设我们有一个表格数据如下：

const dataSource = [
  {
    key: '1',
    name: '张三',
    age: 23,
    address: '北京市海淀区',
  },
  {
    key: '2',
    name: '李四',
    age: 25,
    address: '上海市黄浦区',
  },
  {
    key: '3',
    name: '王五',
    age: 20,
    address: '广州市天河区',
  },
];

我们可以在表头列中设置`sorter`属性来实现对数据的排序，比如按照年龄从小到大排序：

import { Table } from 'antd';

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
    sorter: (a, b) => a.age - b.age,
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
];

function App() {
  return <Table dataSource={dataSource} columns={columns} />;
}

这样就可以在年龄列头点击来实现升序或降序排列了。

如果要支持多列排序，只需要将`multiple`属性设置为`true`即可：

import { Table } from 'antd';

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
    sorter: { compare: (a, b) => a.age - b.age, multiple: true },
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
    sorter: { compare: (a, b) => a.address.localeCompare(b.address), multiple: true },
  },
];

function App() {
  return <Table dataSource={dataSource} columns={columns} />;
}

现在我们可以按下`shift`键再点击地址列头来实现多列排序了。