Antd Table自定义排序：如何在排序变更时触发API数据请求？

方案一：利用Table的onChange事件监听排序变化 #

这是最直接的官方适配方案，Antd Table的onChange事件会返回当前的排序信息（包含排序列的columnKey和排序方向order），你可以通过这个事件触发后端API请求，获取排序后的数据。

实现步骤： #

1. 移除列配置中的本地排序函数sorter: (a, b) => a.date - b.date，只保留sorter: true开启排序交互（显示排序图标）；
2. 在组件中维护排序状态，通过onChange事件获取最新排序参数，调用API更新数据。

代码示例： #

import { useState } from 'react';
import { Table } from 'antd';

const MyTable = () => {
  const [data, setData] = useState([]);
  const [sortInfo, setSortInfo] = useState({ columnKey: '', order: '' });

  // 模拟后端API请求
  const fetchData = async ({ sortField, sortOrder }) => {
    const res = await fetch(`/api/data?sortField=${sortField}&sortOrder=${sortOrder}`);
    const newData = await res.json();
    setData(newData);
  };

  return (
    <Table
      columns={[
        {
          title: "Date",
          dataIndex: 'date',
          key: 'date',
          width: 85,
          showSorterTooltip: { target: 'full-header' },
          sortDirections: ['descend'],
          // 仅开启排序交互，不执行本地排序
          sorter: true,
        },
        // 其他列配置...
      ]}
      dataSource={data}
      onChange={(pagination, filters, sorter) => {
        // 保存当前排序状态
        setSortInfo(sorter);
        // 触发后端排序请求
        fetchData({ sortField: sorter.columnKey, sortOrder: sorter.order });
      }}
    />
  );
};

export default MyTable;

方案二：自定义表头排序按钮，手动控制排序状态 #

如果需要更灵活的交互逻辑（比如自定义排序图标、多字段组合排序等），可以完全自定义表头的排序触发逻辑，手动维护排序状态并触发API请求。

实现步骤： #

1. 关闭列配置中的默认排序（sorter: false）；
2. 自定义表头内容，添加点击事件切换排序状态；
3. 根据排序状态调用API获取数据，并同步更新表头的排序图标显示。

代码示例： #

import { useState } from 'react';
import { Table, DownOutlined, UpOutlined } from 'antd';

const MyTable = () => {
  const [data, setData] = useState([]);
  const [sortKey, setSortKey] = useState('');
  const [sortOrder, setSortOrder] = useState('');

  // 模拟后端API请求
  const fetchData = async ({ sortField, sortOrder }) => {
    const res = await fetch(`/api/data?sortField=${sortField}&sortOrder=${sortOrder}`);
    const newData = await res.json();
    setData(newData);
  };

  const handleSortClick = (columnKey) => {
    let newOrder = '';
    if (sortKey === columnKey) {
      // 当前已选中该列，切换排序方向（可根据需求调整逻辑）
      newOrder = sortOrder === 'descend' ? '' : 'descend';
    } else {
      // 选中新列，默认降序
      newOrder = 'descend';
    }
    setSortKey(newOrder ? columnKey : '');
    setSortOrder(newOrder);
    // 触发后端排序请求
    fetchData({ sortField: columnKey, sortOrder: newOrder });
  };

  return (
    <Table
      columns={[
        {
          title: (
            <div 
              onClick={() => handleSortClick('date')} 
              style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4 }}
            >
              Date
              {/* 根据当前排序状态显示对应图标 */}
              {sortKey === 'date' && sortOrder === 'descend' ? 
                <DownOutlined /> : 
                sortKey === 'date' ? <UpOutlined /> : null
              }
            </div>
          ),
          dataIndex: 'date',
          key: 'date',
          width: 85,
          // 关闭默认排序交互
          sorter: false,
        },
        // 其他列配置...
      ]}
      dataSource={data}
    />
  );
};

export default MyTable;

注意事项： #

• 后端排序时，务必移除本地排序函数，避免本地排序结果和后端返回数据冲突；
• onChange事件会在分页、筛选、排序操作时都触发，若需单独处理排序逻辑，可对比前后sortInfo状态，仅在变化时触发请求；
• 自定义表头时，尽量保持和Antd默认排序一致的交互体验，避免用户困惑。

内容的提问来源于stack exchange，提问作者howard wolowitz