时间戳

首页 > 解决方案 > 透视反应表中的过滤器

reactjs - 透视反应表中的过滤器

问题描述

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

有什么建议么 ？

标签： reactjsfilterreact-table

解决方案

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

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

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

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

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

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

需要注意的两点是：

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

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

推荐阅读