使用react-table-v6进行表排序

Question

我正在尝试将排序方法应用于表中的一列。该列具有数值和空值（“--”）。我想以升序和降序的方式对值进行排序。我希望所有空值都应位于两种排序类型中的表格底部。

有人可以建议一个与react-table-6一起使用的自定义排序函数吗？

谢谢你...

Answer 1

你问这个问题真是太疯狂了，因为我刚刚以完全相同的要求完成了这个完全相同的问题——你很幸运！

这是在 TypeScript 中，但如果需要，您可以删除类型。

栏目：

  const columns: Column[] = useMemo(
    () => [
      {
        Header: 'Rank',
        accessor: 'rank',
        sortType: rankSort, // This is the rankSort() function below
        maxWidth: 10,
      },
      ...
    ],
    []
  );

这是排名功能：

const getRankValueString = (value: number, desc?: boolean): string => {
  let stringValue = value.toString();

  if (stringValue === '--') {
    if (desc) {
      stringValue = '-9999999';
    } else {
      stringValue = '9999999';
    }

    return stringValue;
  }

  for (let i = stringValue.length; i < 6; i++) {
    stringValue = `0${stringValue}`;
  }

  return stringValue;
};

const rankSort = (
  rowA: Row,
  rowB: Row,
  columnId: string,
  desc?: boolean
): number => {
  return getRankValueString(rowA.values[columnId], desc).localeCompare(
    getRankValueString(rowB.values[columnId], desc)
  );
};

这有点 hacky，但它可以对最多 6 位数字的值进行排序。我愿意接受优化。

Answer 2

您可以通过在此处提供自定义排序功能来覆盖

sortMethod

列属性。它使用标准比较器函数，接收两个值并返回 -1、0 或 1 来指示相对顺序。

请参阅此处的示例：https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v6/examples/custom-sorting?file=/src/index.js:675-685

有关如何使用它的简短代码片段：

  render() {
    const { data } = this.state;
    return (
      <div>
        <ReactTable
          data={data}
          columns={[
            {
              Header: "Name",
              columns: [
                {
                  Header: "First Name (Sorted by Length, A-Z)",
                  accessor: "firstName",
                  sortMethod: (a, b) => {
                    if (a.length === b.length) {
                      return a > b ? 1 : -1;
                    }
                    return a.length > b.length ? 1 : -1;
                  }
                },