Question 285297 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to put the special string to the bottom when using table sorter

I want the special string '--' always at the bottom regardless of the direction ascending or descending.

The sorted results I expect are:

  • Ascend: ['1.1', '1.2', '1.3', '--', '--']
  • Descend: ['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: "--" }]}
        />
    );
}

I tried this solution, but it doesn’t work.

enter image description here

codesandbox

Tags:

2

Answers


  1. 0

    The sortOrder value should be used at both places where you compare with "--":

    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

    Login or Signup to reply.
  2. 0

    Try this code to get special string ‘–‘ always at the bottom, may be it will helpful for you

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

function sorter(sortOrder) {
  return function (a, b) {
    if (a === "--") {
      return sortOrder === "ascend" ? 1 : -1;
    }
    if (b === "--") {
      return sortOrder === "ascend" ? -1 : 1;
    }
    if (a === b) {
      return 0;
    }

    return sortOrder === "ascend" ? (a < b ? -1 : 1) : a < b ? 1 : -1;
  };
}

export default function App() {
  const dataSource = [
    { value: "1.1" },
    { value: "--" },
    { value: "1.3" },
    { value: "1.2" },
    { value: "--" },
  ];

  return (
    <Table
      columns={[
        {
          dataIndex: "value",
          title: "value",
          sorter: (aRecord, bRecord, sortOrder) =>
            sorter(sortOrder)(aRecord.value, bRecord.value),
        },
      ]}
      dataSource={dataSource}
    />
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search