问题标签 [react-table-v7]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
496 浏览

reactjs - 如何停止共享 react-table v7 useTable 状态?

我有一个组件可以创建一个反应表,当只涉及一个页面时,它可以按预期工作:

不幸的是,如果我更改一页上的页面索引或大小,它也会影响所有其他页面。

“viewState”是我的构造,用于跟踪和保持过滤器、分页、扩展、列选择、分组和排序(并允许用户创建自己的自定义命名视图状态)。

似乎表的内部状态正在被破坏性修改,因为 viewState 副本显示了正确的分页数据(但在渲染后更新为不正确的共享值)。

我尝试使用 useControlledState 直接进入/退出 viewState 但这会导致错误,因为它试图在渲染操作期间更新状态。

0 投票
0 回答
27 浏览

reactjs - React Table 错误并且没有 CSS 文件

在此处输入图像描述

0 投票
1 回答
1389 浏览

reactjs - 如何向 React Table IndeterminateCheckbox 方法添加类型

我真的是打字稿世界的初学者,我目前使用的 React Table 库在文档中默认没有类型。

所以,我想请你帮忙将类型添加到IndeterminateCheckbox 方法

这是来自 React Table 文档的沙盒链接: https ://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/row-selection-and-pagination?from-embed=&file=/ src/App.js:613-1010

我的第二个问题是:我在哪里可以找到类型并自己添加它们?

0 投票
0 回答
320 浏览

javascript - React-table 对包含两个值或符号的自定义渲染单元格进行排序

在这种情况下,我在每个单元格中有两个值(如排名和值),但我只想对这两个值之一进行排序,但设置 sortBy 不起作用。我尝试使用 sortMethod 创建一个自定义函数,但我不知道如果我做了类似的事情它是如何工作的。(我只是从其他响应中复制粘贴了该功能,看看是否可以打印任何东西)

我不知道 a 和 b 是什么,也不知道如何根据我的情况引用它们,当我单击时,我什至无法将 a 和 b 打印到控制台,这让我觉得我做错了什么,以至于函数甚至没有触发。

同样要渲染单元格,我不知道如何在不添加包装的 div 的情况下添加值,所以看起来像这样,因为我需要两个值的两种不同样式

0 投票
1 回答
346 浏览

javascript - 通过 React-Table 传递 GraphQL 数组

希望这不是一个过于基本的问题(尽管我认为可能是)。我花了几天时间试图解决这个问题,但没有运气,我是新手。

我正在尝试将 GraphQL 与 Shopify 一起使用,以生成一个反应表,其中包含我在 Shopify 上收到的订单的一堆信息。我已经能够生成我想要的数据,但我似乎无法让它为数组中的每条数据生成一个新行。

从下图中可以看出,我只是在同一个单元格中得到“#1001”、“#1002”。这是我想要在各个行上的两个不同的订单。我确定我需要以某种方式使用 .map 并告诉 react-table 推送数据,但我尝试过的任何方法似乎都不起作用,如果它确实为我提供了两个单独的行 - 但没有数据说行。

我也认为我告诉表格获取数据的方式是错误的。我需要使用标题部分中的访问器来定义我从查询中收到的某些数据。大多数访问器都不正确,除非 orderNumber、Payment、customer。这是因为我需要从 lineItems 获取信息并根据产品将其分布在多个列中。这个问题并不是关于这个令人头疼的问题,但我只是想了解为什么某些列缺少访问器。

这是我的查询:

这是我的表:

结果如下:

结果

抱歉,这是多么冗长,我只是想涵盖所有基础。

谢谢!

0 投票
1 回答
257 浏览

reactjs - 将 HTML 输入控件添加到 React-Table 中的标题

我正在使用 React 和 React-Table 版本 7。它对我来说效果很好,但我想在我的顶级标题中添加一个复选框。所以我这样尝试:

但是当我这样做时,它只是打印出 HTML 而不是实际的复选框。

所以它看起来像这样:

Monster Types<input type="checkbox" id="horns" name="horns">

有谁知道在 React-Table 标头旁边添加 HTML 输入的方法?

谢谢!

0 投票
2 回答
1547 浏览

reactjs - React 表正在按过滤器排序

我正在为我的项目创建一个网格,我需要在其中实现列过滤。我已经完成了大部分工作,但面临一个问题,即每当我单击 ID 列的过滤器输入框时,该列都会被排序。我尝试过使用e.stopPropagation(),但这不起作用。

我的代码库的工作副本可以在https://4hz20.csb.app/找到,代码在https://codesandbox.io/s/data-table-forked-4hz20

列过滤器.js

另外我正在使用manualFilters: truemanualSortBy: true并且manualPagination: true因为我想在服务器端处理它们,但是手动排序和手动过滤器似乎不能一起工作,请参阅DataGrid.js第 37-39 行。

0 投票
0 回答
196 浏览

javascript - React-table v7,添加编辑行按钮

我正在制作一个交互式反应表。我的目标是制作一个在单击表格单元格中的按钮时每行可编辑的表格。

我设计了一个 EditableCell,如下所示:

在我的专栏中,我有:

我现在如何从“EditableCell”编辑“isEditing”属性?

0 投票
0 回答
61 浏览

reactjs - 当数据来自 redux 存储时,useState() 在刷新时丢失状态(数据)

我有一个奇怪的问题,使数据集未定义。我正在实施反应表(一个带钩子)。如果我使用 react-table 示例中的一个,他们会使用 makedata.js & 他们的代码如下

但是我的代码只是用 API 调用后来自 redux 的数据替换了 makeData。

因此,当我们对代码进行更改时,react 渲染和数据会很好,即data不是未定义的。当我们转到其他页面并导航回它时也是如此。我们刷新页面的那一刻,data是未定义的。

PS projectData 不是未定义的,只是在开始时,它是暂时的,但随后数据更新但它没有反映在我们的状态中&刷新虽然我们使用的是 useMemo ,但它data使未定义。data

0 投票
1 回答
127 浏览

javascript - 渲染 React Table [v7] 结果为 [object Object]

我是 Javascript 新手,所以请多多包涵。我正在尝试在 div 中呈现数据表,但我无法这样做。基本上我只想用我们创建的表格 div 替换 html 中的 div。

我正在使用带有 webpack 的 react table v7。下面的代码导致在浏览器中可以看到表格应该在的位置。

表应该在哪里

这是我的代码: