React 中的动态页脚-Table 基于过滤后的数据
Dynamic Footer in React-Table Based on Filtered Data
有没有办法让 React-Table 中的页脚根据过滤后的数据更新?我正在尝试放置一个页脚,该页脚对一列求和并随着数据的过滤而变化。
***更新:
我在下面添加了一个关于我如何让它工作的答案。您还可以在此处查看我工作 table 的完整代码:
https://github.com/travisdock/pf-frontend/blob/master/src/components/table.js
当然有!
只需使用状态属性作为页脚的内容。现在,如果您更改状态的这一部分,React 将(再次)渲染使用该状态属性的所有组件。有关更多信息,请阅读 React 文档中的“State and Lifecycle”。
如果有人好奇我是怎么做到的,这里是我的代码:
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 的道具,该道具在 table 中显示当前数据,并在过滤器更改数据时更新。我在页脚的两行中添加了总计值和平均值,效果非常好。
有没有办法让 React-Table 中的页脚根据过滤后的数据更新?我正在尝试放置一个页脚,该页脚对一列求和并随着数据的过滤而变化。
***更新: 我在下面添加了一个关于我如何让它工作的答案。您还可以在此处查看我工作 table 的完整代码: https://github.com/travisdock/pf-frontend/blob/master/src/components/table.js
当然有! 只需使用状态属性作为页脚的内容。现在,如果您更改状态的这一部分,React 将(再次)渲染使用该状态属性的所有组件。有关更多信息,请阅读 React 文档中的“State and Lifecycle”。
如果有人好奇我是怎么做到的,这里是我的代码:
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 的道具,该道具在 table 中显示当前数据,并在过滤器更改数据时更新。我在页脚的两行中添加了总计值和平均值,效果非常好。