基于过滤数据的React-Table中的动态页脚

问题描述 投票:0回答:2

有没有办法根据过滤后的数据更新React-Table中的页脚?我试图将一个页脚加总,并在数据过滤时更改。

***更新:我在下面添加了一个如何解决这个问题的答案。您还可以在此处查看我的工作表的完整代码:https://github.com/travisdock/pf-frontend/blob/master/src/components/table.js

react-table
2个回答
0
投票

当然有!只需使用state属性作为页脚的内容。现在,如果你改变状态的这一部分,react将呈现使用该状态属性的所有组件(再次)。有关更多信息,请阅读反应文档中的“State and Lifecycle”。


0
投票

对于任何好奇我最终在这里做的是我的代码:

Footer: columnProps => {
        return(
          <span>
            {columnProps.data.length > 0 ? this.sumEntries(columnProps.data) : 0}<br></br>
            {columnProps.data.length > 0 ? this.averageEntries(columnProps.data) : 0}
          </span>
        )
      }

事实证明,Footer可以接收columnProps的prop,它具有表中显示的当前数据,并在过滤器更改数据时更新。我在页脚的两行中添加了总计和平均值,效果非常好。

© www.soinside.com 2019 - 2024. All rights reserved.