代码之家 › 专栏 › 技术社区 › garajo

React虚拟化中表中列的不同默认排序方向

react-virtualized

0

garajo · 技术社区 · 7 年前

react-virtualized ,通过定义 sortBy 数据键和 sortDirection 在表组件中。我有另一个列,我希望在用户第一次单击它时按降序(而不是默认的升序)排序,但看不到如何做到这一点。是否可以为每列设置默认排序方向?

我不想同时对列进行排序,而是希望在第一次对每列实现排序时,对每列有不同的排序方向。例如,我想启动默认设置,使我的表按姓氏升序排序。但是,我还有一些其他列包含整数或布尔值,当用户第一次单击这些列时,我希望按降序排序。按升序,这些列将首先显示false和0(如果有),但如果首先用true或集合的上限数字排序,则更有意义。我试图稍微改善用户体验,这样就不必点击两次列来获得降序。

1 回复 | 直到 7 年前

1

bvaughn 7 年前

RV的 Table

我认为做你想做的事情最简单的方法是你自己指定 headerRenderer 对于排序依据 Column s:

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

default/built-in header renderer ,而不是使用 桌子 只需将您自己的传递到按列排序:

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)
}