Tanstack React Table V8含null值列排序异常及数字排序改造咨询

一、含null值列排序卡顿的原因与修复 #

原因分析 #

1. 状态更新逻辑错误：你的onSortingChange回调写法有误，React Table V8中该回调接收的是新的排序状态数组，而非函数。调用sorting()会导致状态更新异常，这是排序卡顿的核心原因。
2. 数据分布放大问题：当列中存在大量null值时，错误的状态更新逻辑会让表格无法正确识别排序状态切换，表现为排序“卡顿”。description列看似正常，是其数据分布恰好让错误的状态更新偶尔生效，属于不稳定的偶然情况。

修复步骤 #

1. 修正状态更新逻辑：
   将原onSortingChange代码改为：

onSortingChange: newSorting => {
    tableStateSetSorting(tableStateDispatch, newSorting)
},

2. 优化自定义排序函数（可选）：
   明确判断null，避免!运算符误判空字符串等其他 falsy 值：

const customSorting = (rowA, rowB, columnId, desc) => {
    const valA = rowA.getValue(columnId);
    const valB = rowB.getValue(columnId);

    if (valA === null && valB === null) return 0;
    if (valA === null) return desc ? -1 : 1;
    if (valB === null) return desc ? 1 : -1;

    return String(valA).localeCompare(String(valB));
};

二、数字类型字段inUseCount的排序实现 #

针对数字字段，直接通过数值相减实现排序，同时兼容null值处理：

步骤1：添加数字排序函数 #

在表格配置的sortingFns中新增数字排序逻辑：

const table = useReactTable({
    // ...其他配置
    sortingFns: {
        customSorting,
        numberSort: (rowA, rowB, columnId, desc) => {
            const valA = rowA.getValue(columnId);
            const valB = rowB.getValue(columnId);

            if (valA === null && valB === null) return 0;
            if (valA === null) return desc ? -1 : 1; // null在降序时排前，升序时排后
            if (valB === null) return desc ? 1 : -1;

            return desc ? valB - valA : valA - valB;
        }
    },
    // ...其他配置
});

步骤2：为inUseCount列指定排序函数 #

修改对应列的配置：

{
    id: "inUseCount",
    header: value => (
        <ColumnHeaderSort
            column={value.column}
            label={t("common.inUseCount")}
        />
    ),
    accessorKey: "inUseCount",
    // ...其他配置
    sortingFn: "numberSort",
    cell: ({ getValue }) => <>{getValue()}</>,
},

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