旋转反应台中的过滤器

时间:2018-11-07 07:40:52

标签: reactjs filter react-table

我正在使用react-table来渲染一个透视和聚合的表。 但是,过滤器不再起作用:每次我过滤时,都不会返回任何行。在添加透视和聚合之前,这些相同的过滤器运行良好。

有什么建议吗?

2 个答案:

答案 0 :(得分:1)

此答案涉及反应表v6,而不是v7 (目前尚不清楚该问题是由OP使用哪个版本,但我发现有关v6的此问题的信息很少,因此我将发布所见内容)

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

我有一列指定其聚合(换句话说,它指定了由枢轴折叠的行的该列显示的内容)。我意识到该列的标准filterMethod接收到的聚集行具有不同的“聚集”值。如果我为false中的这一行返回filterMethod(因为聚合值不是我要过滤的值,而是不同的值),则filter方法将拒绝下的所有“子行”该聚合的机翼,因为它拒绝了枢纽行。

此问题的解决方案是,如果要按子行过滤,则不要抛出带有子行的枢轴行。 (然后将它们传递到汇总行之后的filterMethod

我现在过滤这些汇总行的方式是,如果row._subRowsundefined,那么我知道我正在处理“未汇总的行”,并且像往常一样简单地进行过滤。否则(当row._subRows不是 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的其他过滤方面以及它们与我在这里所说的内容和我有限的理解之间的关系。

答案 1 :(得分:0)

汇总/透视时,提供给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;
}