问题标签 [react-table-v7]

我对 react 和 react-table 很陌生，以前我在客户端过滤上成功运行了以下代码，现在我正在尝试将其更新为服务器端过滤。我的代码如下所示：

看起来ColumnFilter像

我在这里想要的是handleSearchquuery回调const ColumnFilter = ({ column, handleSearchQuery }) => {

这样我就可以调用回调而不是setFilter调用onChange。

目前，这个过滤器被渲染为：

看起来这是相关文档，但无法理解。

https://react-table.tanstack.com/docs/api/useFilters#column-options

在我的反应表中选择一行时出现错误。这个问题（可能）是由无限的重新渲染循环引起的。过程如下：

1. 我想选择一行。
2. react-table 使用 useMountedLayoutEffect() 方法来通知 const selectedFlatRows（所有选定行的列表）是否已更改。
3. 然后 useMountedLayoutEffect() 调用一个应该导出所有选定行的方法。被调用的 Method 由其父级使用 props 提供给 table 组件。函数很简单，如下：

4、react-table的父组件是一个material UI Dialog。对话框基本上只是表格组件。对话框代码看起来像这样；

5. 使用这样的按钮调用包含表格的对话框。

6. 一旦我在表格中选择一行，我的屏幕就会冻结，一段时间后会出现此错误：

错误：超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。React 限制了嵌套更新的数量以防止无限循环。

好像我遇到了无限的重新渲染循环，但我找不到问题。有没有人对我可以尝试解决这个问题有什么建议？

有一列称为截止日期，定义如下

我想在另一个名为 position 的列中访问截止日期值，我正在尝试下面的代码，但它现在正在工作

我是新来的反应。

我使用 react-table 模块制作了一个表格我试图突出显示第一列中的单元格不等于第 2 列中它旁边的单元格的所有单元格。

这是我的表格组件：

当我运行这个我得到两个错误

预期 ',' 在

背景颜色：{rows[0].cells[index].value!==rows[1].cells[index].value ? “红色”：空}

预期'：'在

背景颜色：{rows[0].cells[index].value!==rows[1].cells[index].value ? “红色”：空}

任何帮助将非常感激

我有一个 react-table v7（带有粘性页眉和页脚），它使用 react-window 呈现数千个虚拟化行。

一个新的要求需要表格也有粘性列，但我不能让它工作，因为 react-window 添加了几个嵌套的 div 用于虚拟化打破了列的粘性。

已经有一个钩子（https://github.com/GuillaumeJasmin/react-table-sticky）允许创建粘性列，但是一旦使用 react-window 它也会中断；一些开发人员指出了一些很好的解决方法，但页脚将不再粘滞（https://github.com/GuillaumeJasmin/react-table-sticky/issues/5）。

在这个阶段，我还尝试并排使用两张表（一张用于粘性列，一张用于其余列），但考虑到应用了虚拟化，当向上/向下滚动时，行会变得不同步。我也尝试使用另一个虚拟化组件（https://github.com/bvaughn/react-virtualized）但遇到了同样的问题。

有没有人遇到过相同或类似的问题并找到了让它工作的方法？

提前致谢。

我正在使用react-table库进行过滤和分页。我正在使用来自自定义 API 的请求数据Node并使用useTable来自react-table. 的文档react-table说应该记住表数据，所以我使用了useMemo钩子。代码如图所示：

但是，我收到以下错误：

谁能帮我解决这个问题？提前致谢！

我正在使用 React Table 7.6.x。

我为我的 React Table 创建了列过滤器。

如果我尝试过滤在访问器中使用 return 语句返回链接组件的列，则过滤器不起作用。奇怪的是 - 如果我在访问器中使用格式化函数，过滤器会按预期工作，例如：

但这样做：

打破过滤器。

有没有办法可以在创建过滤器时解释这一点，或者我应该以不同的方式编写列？

过滤器不起作用 - 使用返回的列属性

如果我更改为：

列过滤器代码

默认列声明

更新：如果我更改要使用的列Cell而不是accessor过滤器框就会消失。

我正在尝试将反应表分组与排序结合起来，并且遇到了一些奇怪的冲突。具体来说，当什么都没有打开时，我希望排序正常工作，但是当一个组被展开以查看它的孩子时，我不希望组的顺序移动。我目前已经设置了一个挂钩来查看展开状态以及自定义排序功能，但我不确定这是否是最好的方法。

我必须在这里使用扩展，因为当行被传递到 sortFnc 时，无论出于何种原因，似乎row.isExpanded正确未定义。基本上在这里我只是拥有它，因此如果其中任何一个（或子组）被扩展，它就会使用默认索引作为组的排序。

这样做的问题是，如果组已经排序，那么您会得到一种奇怪的用户体验，即在您展开时将组从排序顺序更改为原始索引顺序，然后在您展开时返回到排序顺序。如果我可以获得显示该行的当前索引，这可以解决，但我似乎无法弄清楚如何获得它。

我还认为可能还有更好的方法可以完全做到这一点。谢谢！

我开发了一个包含一些数据的反应表，并在每一行中添加了一个“显示”按钮。单击显示按钮应显示所选行的数据。这是一种获取有关数据的更多信息。在主页中，它在表格中显示所有订单。通过单击显示按钮，它应该只显示选定行的数据。这就像在 gmail 中一样。当我们单击每封新电子邮件时，它会导航到仅包含所选电子邮件数据的新页面。有经验的能帮我吗？

我有 react-table 7。我已经完成了列过滤器和全局过滤器。我必须进行行分组，所以需要添加手动过滤器。