Question

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

更新：我不想同时对列进行排序，而是希望在每列首次实施排序时为每列添加不同的排序方向。例如，我想启动我的表的默认值按lastname按升序排序。但是，我有一些其他列包含整数或布尔值，并且我想在用户第一次单击这些列时按降序排序。按升序排列，这些列首先显示false和0（如果有的话），但如果它们首先按true或set的高位数排序则更有意义。我试图略微改善用户体验，因为不必在列上单击两次以获得降序。

Answer 1

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

我认为最简单的方法就是为您排序Column指定自己的headerRenderer：

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

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

从＆＃39; react-virtualized＆＃39;中导入{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)
}

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

1 个答案: