ReactJS中Ant Design Table空值排序异常问题求助

你的问题出在自定义排序函数没有结合表格的排序方向（升序/降序）动态调整null值的排序逻辑，导致只有单一排序方向能让null值显示在末尾，另一个方向会让null跑到前面。

当前代码的问题 #

你现在的函数对null值的处理是固定的：只要a[col]是null就返回-1（让a排在b前面），b[col]是null就返回1（让b排在a后面）。这种逻辑只在某一种排序方向下符合需求，比如当表格是降序时，null可能会被挤到末尾，但升序时null会直接排在最前面，完全不符合你的要求。

修正后的解决方案 #

要实现无论升序还是降序，null值始终在表格末尾，需要根据当前表格的排序方向，动态调整null值的排序权重，同时同步调整数值型数据的排序逻辑。

步骤1：维护表格的排序状态

首先在组件中通过useState维护当前表格的排序信息，然后通过Table的onChange事件更新这个状态：

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

const YourComponent = () => {
  // 维护排序状态：包含排序字段和方向（ascend/descend）
  const [currentSorter, setCurrentSorter] = useState({});

  // 表格变化时更新排序状态
  const handleTableChange = (pagination, filters, sorter) => {
    setCurrentSorter(sorter);
  };

步骤2：修改自定义排序函数

调整排序逻辑，根据当前的排序方向（ascend/descend）来决定null值的返回值，确保null始终排在末尾：

const customSorter = (a, b, col) => {
  const { order } = currentSorter;
  // 两个都是null，顺序不变
  if (a[col] === null && b[col] === null) {
    return 0;
  }
  // 根据排序方向，让null始终排最后
  if (a[col] === null) {
    // 升序时，null的权重比所有数值大，返回1（排后面）；降序时权重比所有数值小，返回-1（排后面）
    return order === 'ascend' ? 1 : -1;
  }
  if (b[col] === null) {
    return order === 'ascend' ? -1 : 1;
  }
  // 数值型数据的排序，根据方向调整顺序
  const numA = parseFloat(a[col]);
  const numB = parseFloat(b[col]);
  return order === 'ascend' ? numA - numB : numB - numA;
};

步骤3：在列配置中使用排序函数

在Table的列配置里，把自定义排序函数传入sorter属性：

const columns = [
  {
    title: '数值列',
    dataIndex: 'value',
    key: 'value',
    // 调用自定义排序函数，传入当前列的dataIndex
    sorter: (a, b) => customSorter(a, b, 'value'),
  },
  // 其他列配置...
];

return (
  <Table
    columns={columns}
    dataSource={yourDataSource}
    onChange={handleTableChange}
  />
);
};

export default YourComponent;

逻辑说明 #

• 当表格是升序时：null值的排序返回1（比任何数值都大），所以会被排到所有有效数值的后面；数值部分按从小到大排序。
• 当表格是降序时：null值的排序返回-1（比任何数值都小），所以同样会被排到所有有效数值的后面；数值部分按从大到小排序。

这样就能实现你需要的「无论排序方向如何，null始终在末尾」的效果。

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