使用Table Sorter时如何将特殊字符串'--'固定在末尾

需求说明 #

需要让特殊字符串--在表格升序或降序排序时，始终排在所有有效数据的末尾：

• 升序预期结果：['1.1', '1.2', '1.3', '--', '--']
• 降序预期结果：['1.3', '1.2', '1.1', '--', '--']

修正后的代码实现 #

import "antd/dist/antd.css";
import { Table } from "antd";

function sorter(sortOrder) {
    return function (a, b) {
        // 标记是否为特殊字符串
        const isASpecial = a === "--";
        const isBSpecial = b === "--";

        // 两者都是特殊字符串，排序位置不变
        if (isASpecial && isBSpecial) return 0;
        // 仅a是特殊字符串，让a排在后面
        if (isASpecial) return 1;
        // 仅b是特殊字符串，让b排在后面（a优先）
        if (isBSpecial) return -1;

        // 转换为数字处理有效数据排序，避免字符串比较异常
        const numA = parseFloat(a);
        const numB = parseFloat(b);
        
        // 根据排序方向返回结果
        return sortOrder === "ascend" ? numA - numB : numB - numA;
    };
}

export default function App() {
    return (
        <Table
            columns={[
                {
                    dataIndex: "value",
                    title: "value",
                    sorter: (aRecord, bRecord, sortOrder) => sorter(sortOrder)(aRecord.value, bRecord.value),
                },
            ]}
            dataSource={[{ value: "1.1" }, { value: "--" }, { value: "1.3" }, { value: "1.2" }, { value: "--" }]}
        />
    );
}

关键逻辑说明 #

• 特殊字符串优先级处理：优先判断--，无论排序方向如何，只要某一方是特殊字符串，就固定让它排在末尾，不受排序规则影响
• 数值转换优化：将有效字符串转换为数字后再比较，避免纯字符串比较带来的异常（比如'1.10'和'1.2'的字符串比较逻辑错误）
• 排序方向适配：正常数据根据升序/降序要求，通过数字差值直接返回排序结果，逻辑直观可靠

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