antd table sort 排序
时间: 2025-05-30 16:35:01 浏览: 23
### 如何在 Ant Design Table 组件中实现排序功能
Ant Design 是一个广泛使用的 React UI 库,提供了丰富的组件来构建现代化的 Web 应用程序。Table 组件支持内置的数据排序功能,可以通过配置 `columns` 属性中的 `sorter` 字段轻松启用。
#### 基本概念
为了使表格列可排序,在定义表头时需设置 `sorter` 参数为 true 或者自定义比较函数[^1]:
```jsx
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
sorter: (a, b) => a.name.localeCompare(b.name),
},
];
```
如果希望提供多级排序,则可以传递对象给 `sorter` 并指定多个字段及其顺序关系[^2]:
```jsx
{
title: 'Age',
dataIndex: 'age',
key: 'age',
sorter: {
compare: (a, b) => a.age - b.age,
multiple: 3 // 表示这是第三优先级的排序条件
}
}
```
对于远程数据源的情况,当用户点击列标题触发排序事件时,应该监听 `onChange` 回调并将新的排序状态发送到服务器端查询接口[^3]:
```jsx
function handleTableChange(pagination, filters, sorter) {
console.log('Various parameters', pagination, filters, sorter);
}
<Table
columns={columns}
dataSource={data}
onChange={handleTableChange}
/>
```
通过上述方式可以在前端展示层面上完成简单的本地排序逻辑处理或是与后端交互获取已按特定规则排列好的记录集。
#### 实现代码示例
下面是一个完整的例子展示了如何在一个 Ant Design 的 Table 中添加基本的排序能力:
```jsx
import React from 'react';
import { Table } from 'antd';
class App extends React.Component {
state = {
data: [
{ key: '1', name: 'John Brown', age: 32 },
{ key: '2', name: 'Jim Green', age: 42 },
{ key: '3', name: 'Joe Black', age: 32 },
{ key: '4', name: 'Jim Red', age: 32 },
],
};
render() {
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
sorter: (a, b) => a.name.localeCompare(b.name),
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
sorter: (a, b) => a.age - b.age,
},
];
return (
<Table
columns={columns}
dataSource={this.state.data}
rowKey="key"
/>
);
}
}
export default App;
```
此实例创建了一个具有两列(姓名和年龄)并允许按照这两项进行升序降序切换显示的小型表格应用。
阅读全文
相关推荐

















