使用 react-table-v6 进行表格排序答案

【问题标题】：Table Sorting with react-table-v6使用 react-table-v6 进行表格排序
【发布时间】：2021-10-15 12:21:20
【问题描述】：

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

谁能建议一个自定义排序函数与 react-table-6 一起使用？

谢谢...

【问题讨论】：

标签： react-table columnsorting react-table-v6 tablesort

【解决方案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 位的值进行排序。我愿意接受优化。

【讨论】：