使用表格排序器时如何将特殊字符串放在底部

Question

我希望特殊字符串

'--'

始终位于底部，无论方向是上升还是下降。

我期望的排序结果是：

• 上升：

  ['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) {
        // equal items sort equally
        if (a === b) {
            return 0;
        }

        // nulls sort after anything else
        if (a === "--") {
            return 1;
        }
        if (b === "--") {
            return -1;
        }

        // otherwise, if we're ascending, lowest sorts first
        if (sortOrder === "ascend") {
            return a < b ? -1 : 1;
        }

        // if descending, highest sorts first
        return a < b ? 1 : -1;
    };
}

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: "--" }]}
        />
    );
}

我尝试了这个解决方案，但它不起作用。

代码沙盒

Answer 1

sortOrder

值应该用在与

"--"

比较的两个地方：

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

function sorter(a: any, b: any, sortOrder: SortOrder | undefined) {
    // equal items sort equally
    if (a === b) {
        return 0;
    }

    // "--" sorts after anything else, so return value depends on sortOrder:
    if (a === "--") {
        return sortOrder === "descend" ? -1 : 1; // <-- HERE (1)
    }
    if (b === "--") {
        return sortOrder === "descend" ? 1: -1; // <-- HERE (2)
    }

    return +a - +b;
};

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

CodeSandbox：https://codesandbox.io/s/antd-table-sorter-forked-yj8hmv?file=/src/App.tsx