透视反应表中的过滤器答案

【问题标题】：Filters in pivoted react-table透视反应表中的过滤器
【发布时间】：2018-11-07 07:40:52
【问题描述】：

我正在使用 react-table 来呈现一个旋转和聚合的表。但是，过滤器不再起作用：每次过滤时，都不会返回任何行。在我添加旋转和聚合之前，这些相同的过滤器运行良好。

有什么建议吗？

【问题讨论】：

我们需要代码来帮助您...

标签： reactjs filter react-table

【解决方案1】：

此答案涉及 react-table v6，而不是 v7。 （从问题中不清楚 OP 使用哪个版本，但我发现关于 v6 的这个问题的信息很少，所以我发布了我所看到的）

如果您希望过滤已聚合的行（即在具有 A 和 B 列的表中，其中 A 是枢轴，B 是聚合的，而您想过滤 B 列）我发现我可以使用row._subRows 值。

我有一列指定了它的聚合（换句话说，它指定了为被枢轴折叠的行的那一列显示的内容）。我意识到该列的标准filterMethod 接收具有此不同“聚合”值的聚合行。如果我在filterMethod 中为该行返回false（因为聚合值不是我要过滤的值，而是不同的值），过滤器方法会拒绝此翼下的所有“子行”聚合，因为它拒绝旋转的行。

如果您打算按子行进行过滤，则解决方案是不要丢弃带有子行的旋转行。（然后在聚合行之后将它们传递给filterMethod）

我现在过滤这些聚合的行的方式是如果row._subRows 是undefined，那么我知道我正在处理“未聚合的行”并像往常一样简单地过滤。否则（当row._subRows 是not undefined）然后我知道我正在处理顶级聚合行，并且我返回true，因此子行被传递给filterMethod。像这样：

filterMethod: (filter, row) => {
    if (row._subRows === undefined) {
      return row[filter.id].toLowerCase().includes(filter.value.toLowerCase())
    } else {
      return true;
    }

有两点需要注意：

过滤时，行仍将全部折叠在其枢轴上，但当您展开它们时，值将受到过滤器的限制。崩溃是一个单独的问题，我没有信心解决它。
您可能不希望包含没有与您的过滤器匹配的子行的聚合行。我尚未对此进行彻底测试，但即使没有子行匹配，我当前的解决方案也可能保留这些行，因为它们在过滤中被标记为 true。解决此问题的一种方法可能是检查 _subRows 的实际值，如果您知道要显示子行，则仅返回 true。

请注意 react-table v6 的其他过滤方面以及它们与我在这里所说的内容和我有限的理解之间的关系。

【讨论】：

【解决方案2】：

聚合/透视时，提供给filterMethod 的值略有不同。

我使用 Fuse.js 和 filterAll={true} 在某些字段上提供模糊过滤，并且必须更新函数以包含 _pivotVal 作为过滤工作检查的一部分。

filterMethod: (filter, rows) => {
    var fuse = new Fuse(rows, { keys: [ filter.id, "_pivotVal" ]});
    var res = fuse.search(filter.value);
    return res;
}

【讨论】：