React-virtualized 中表中列的不同默认排序方向答案

【问题标题】：Different default sort directions for Columns in Table in React-virtualizedReact-virtualized 中表中列的不同默认排序方向
【发布时间】：2017-07-01 05:13:58
【问题描述】：

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

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

【问题讨论】：

标签： react-virtualized

【解决方案1】：

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

我认为最简单的方法是为您指定自己的 headerRenderer 为排序依据 Columns：

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

您甚至可以装饰default/built-in header renderer。然后，不要使用来自Table 的 sort-by 属性，只需将您自己的属性传递给 sorted-by 列：

从“react-virtualized”导入 {defaultTableHeaderRenderer}；

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

更新您在此处实际要求的内容（每列的默认排序方向）完全取决于您的应用程序。基本上你的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)
}

【讨论】：

Brian，感谢您的回复和很棒的图书馆。我已经在上面澄清了我的问题。