问题标签 [react-table-v7]

我是新来的反应。我有一个 json api，我需要在客户端显示为表格。我想使用 react-table v7。我的想法是：

• 将数据中的键作为列 Headers 和 Accessor
• json数据是行

我有一个表格组件，它将标题和数据作为道具，请看下面：

然后我有另一个组件通过 axios 发出获取请求，并从其响应中设置列和数据，并导入 Table 组件以传递此处定义的道具，代码如下：

最后是 App 组件

但是我收到此错误，请参见图片，

我不知道我在哪里做错了。我将不胜感激任何帮助。

我正在尝试使用 react-table 构建权限表。

在处理我的数据之后，我有这种类型的数组（这纯粹是一个例子，对于每个管理员/编辑/读者我都有其他数据）：

我希望我的专栏是描述/管理员/编辑/读者。

对于每一行（将对应于特定描述），我想为管理员/编辑/读者列设置一个按钮/复选框设置为它们的值（1/0），如果该人单击/取消选中描述“读取”的单元格管理员中的按钮/复选框，然后我将访问 id 并更改其在我的数据库中的值。

我上传了一张我如何看待它的照片。

反应表是否可能，因为我似乎找不到任何关于如何将多个数据“分配”到单元格的信息，或者我应该用另一种方法开发它。

预先感谢您的任何帮助。

我在 react-table rowSelection 中使用了以下代码，它给出了以下编译错误。

不能在回调中调用 React Hook “React.useRef”。React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用 react-hooks/rules-of-hooks

不能在回调中调用 React Hook “React.useEffect”。React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用 react-hooks/rules-of-hooks

我提供react-table了一些具有嵌套值的数据。下面是我的数据数组中的一个项目示例：

我可以将 useGlobalFilter 用于诸如orgIdor之类的非嵌套键administrator，但是当我想查找位置时，react-table不会呈现任何行。

这就是我的 onChange 处理程序中的内容：

我曾尝试查看文档，但没有任何具体内容。

谢谢你。

我对我的桌子有以下要求：

1. 表应该有固定的标题
2. 它需要自动调整大小：为了使无限滚动工作，第一次获取应该获得足够的数据量，以便滚动出现。
3. 表体应该作为无限加载器工作：当滚动到列表的末尾时，表体应该显示加载指示器并加载更多行

我的假设如下：

1. 由于用户将滚动浏览可能的大量数据集，我应该虚拟化列表（react-virtualized 似乎是我唯一的好选择）
2. 因为我们目前有 react-table 我想保留它（它具有声明表行、列、访问数据和过滤 + 排序的强大机制）
3. 当我们使用材料 ui 时，我需要使用材料 ui 反应组件
4. 因为 react-virtualized 有自己的 Table 组件我可以使用它，但是 react-table 有不同的渲染行和列的方式，所以我必须使用 List 组件。（react-table 分隔行和列，而 react-virtualized 直接使用列作为 Table 组件的子级）
5. 我看到 react-virtualized 与名为 InfiniteLoader 的 HOC 组件一起工作，所以我也应该使用它
6. 最后，我需要我的列不要因为它有更多的文本（即具有动态高度）而被弄乱。因此，我尝试为此使用 CellMeasurer。

在这个沙箱中可以看到我能够实现的目标 https://codesandbox.io/s/react-table-infinite-mzkkp?file=/src/MuiTable.js （我不能在这里提供代码，因为它很大）

所以，一般来说，我可以让 React-virtualized 中的 Autosizer、CellMeasurer 和 List 组件正常工作。我被困在无限滚动部分。我在官方文档上看到了示例，但它似乎有点反模式（直接突变状态根本不是一件好事）

所以我试图达到类似的结果，但是如果你能看到，我的 loadMore 函数由于某种原因触发得太早了。它导致几乎每个滚动事件都发送请求。

任何帮助深表感谢。

我已经尝试过的：

1. 使用 react-window 而不是 react-virtualized 它仅适用于简单的用例，并且由于单元格的动态大小而失败。
2. 使用 react-inifnite-scrollcomponent（https://www.npmjs.com/package/react-infinite-scroll-component）它适用于整个页面（无法制作“粘性”标题，无法呈现加载指示器作为表体，它颂歌对长列表没有任何优化）
3. 使用 react-virtualized 中的 Table 组件。我无法使其与 react-table 一起工作（因为 react-virtualized 中的 Table 组件似乎直接将 Cells 渲染为 Table 组件的子级。我知道它具有 renderRow 功能，但这意味着两个不同的地方，而 react-table 有

此外，尚不清楚如何以这种方式呈现自定义过滤器。

我有一张我在'react-table'上设计的表格。我想根据我在桌子上标记的复选框进行排序。例如，当我按column name时，应该首先列出真正的列名。如果你能帮助我，我会很高兴。

错误的图片（真值应该是第一个或假值由选择）

嘿。
只有在尝试构建我的项目时，我才会收到下一个错误。在本地运行它时，一切正常并且正在导入钩子，但是在尝试构建它时，我得到：
'useTable' is not exported by node_modules/react-table/index.js.
看到了一些代码示例，我所做的一切都与它们完全相同。试图删除我的node_modules并重新安装所有东西 - 但它没有用。

有什么帮助？？？
谢谢！！

这是我导入组件的方式：

这是构建失败后我得到的错误：

我有一个想要删除或修改数据的反应表。我的所有单元格的代码都在下面。

在这种情况下，我想修改项目。反应表没有更新。

我第一次使用 react-table v7。我的行中有有状态的组件——本质上是每行中有一个有状态的键/值选择器（当然是在一个单元格内）。

我注意到当表的状态发生变化时，整个渲染树会卸载并重新安装 - 例如，如果我选择一行或以编程方式插入新行。这当然会导致我的有状态组件被重新安装和重新初始化。

我陷入了困境，试图解释为什么会发生这种情况。这不是非常可取或必要的，实际上为什么会发生。有人知道吗？

https://codesandbox.io/s/goofy-ives-4cq9s

我正在使用 React Table 并且我试图让我的表格可点击以链接到不同的页面以获取到达行。但是现在我没有错误屏幕，我的列没有显示任何行的任何数据。

（当我拿走

一切恢复正常）

这是我的专栏文件：

这是我用来尝试使单元格可点击的 linkTo 函数：

这是桌子本身，虽然我不认为桌子是问题，但谁知道呢，肯定不是我哈哈。：