react-table - React-table 如何禁用客户端排序并仅使用服务器端排序数据

Question

我想使用服务器端排序数据并想绕过反应表排序功能。我只想使用排序点击方法。

Answer 1

要使用自定义可排序功能，您可以使用两种不同的解决方案。

1/ 使用默认排序方式

您可以直接使用组件defaultSortMethod中的道具ReactTable，这里使用库使用的默认方法react-table，您可以自己替换：

defaultSortMethod: (a, b, desc) => {
    // force null and undefined to the bottom
    a = a === null || a === undefined ? '' : a
    b = b === null || b === undefined ? '' : b
    // force any string values to lowercase
    a = typeof a === 'string' ? a.toLowerCase() : a
    b = typeof b === 'string' ? b.toLowerCase() : b
    // Return either 1 or -1 to indicate a sort priority
    if (a > b) {
      return 1
    }
    if (a < b) {
      return -1
    }
    // returning 0, undefined or any falsey value will use subsequent sorts or
    // the index as a tiebreaker
    return 0
  },

2/ 指定特定列的排序方法

您可以添加sortMethod在列中调用的道具，您可以在其中调用自定义排序函数。

这是一个按长度自定义排序的示例：

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;
        }
      },
      {
        Header: "Last Name (Sorted in reverse, A-Z)",
        id: "lastName",
        accessor: d => d.lastName,
        sortMethod: (a, b) => {
          if (a === b) {
            return 0;
          }
          const aReverse = a.split("").reverse().join("");
          const bReverse = b.split("").reverse().join("");
          return aReverse > bReverse ? 1 : -1;
        }
      }
    ]
  }
]

这是整个工作示例。