React-virtualized Table 中列的不同默认排序方向

Question

使用 react-virtualized 的 Table 和 Column 组件，我通过定义 sortBy dataKey 和 sortDirection 实现了默认的排序列和方向=20=] 组件。我有另一列，我希望在用户第一次单击它时按降序（而不是默认的升序）排序，但看不到如何执行此操作。是否可以为每列设置默认排序方向？

更新：我不想同时对列进行排序，而是希望在每列首次实现排序时对每列有不同的排序方向。例如，我想为我的 table 启动默认值，按姓氏升序排序。但是，我还有其他一些包含整数或布尔值的列，当用户首次单击这些列时，我想按降序排序。按升序，这些列将首先显示 false 和 0（如果有），但如果它们首先按 true 或集合的上限数字排序会更有意义。我正在尝试稍微改善用户体验，以便不必在列上单击两次即可获得降序。

Answer 1

RV 的Table 不支持同时按多列排序的概念。（我不确定它有什么意义，除非 1 个字段是主要排序，另一个是次要排序？）无论哪种方式，我认为用例并不常见。

我认为最简单的方法是为 Columns:

指定自己的 headerRenderer

<Column
  {...otherProps}
  headerRenderer={yourHeaderRenderer}
/>

您甚至可以装饰 default/built-in header renderer。然后，不要使用 Table 中的排序依据道具，只需将您自己的道具传递给排序依据列：

从 'react-virtualized' 导入 {defaultTableHeaderRenderer}；

function yourHeaderRenderer(props) {
  return defaultTableHeaderRenderer({
    ...props,
    sortBy: yourSortByHere,
    sortDirection: yourSortDirectionHere
  });
}

Update 您在这里实际要求的内容（每列的默认排序方向）完全取决于您的应用程序。基本上你的 sort 函数看起来像这样：

let prevSortBy;

const sort = ({ sortBy, sortDirection }) => {
  if (sortBy !== prevSortBy) {
    // You can decide the initial sort direction based on the data.
    // Just ignore RV's best-guess default in your case.
  }

  prevSortBy = sortBy;

  // Do your sort-logic here (eg dispatch a Redux action or whatever)
}

React-virtualized Table 中列的不同默认排序方向

Different default sort directions for Columns in Table in React-virtualized

react-virtualized