问题标签 [react-table]

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 投票
0 回答
2777 浏览

javascript - 更新 React Table 以在提交后不选择任何行

编辑 -

我在这里使用这个例子react-table select table (HOC)

只需在上述链接的示例代码中添加此代码即可提供我想要实现的结果。

背景

我在我的 React.js 应用程序中使用 react-table。具体来说,我正在使用选择表,它在每一行旁边提供了一个复选框。在我的情况下,这允许用户选择多行。一旦用户提交了他们的选择,他们选择的行中的数据就会被发送到我的应用程序中以供其他用途。

提交后,我正在清除处于状态的数据。这很重要,以防他们需要在之后直接进行另一次提交。在我从包含先前选择的每一行的状态数组中清除数据后,即使数据不再保存在状态数组中,表格仍会显示先前选择的行。

示例代码

这就是我清除包含所选数组的数组的方式,

这是类中的所有相关代码,

问题

提交表单后如何更新表格,以便没有选中任何行的复选框?或者换句话说,我怎样才能让表格与显示已选择行的状态数组一致?就我而言,在我将状态数组更新为空数组后,仍会在 UI 中选择所选行。

0 投票
1 回答
2799 浏览

javascript - React Table 外包可用的道具

我想从我的反应表中外包可用的道具。我已经搜索了一些网站,但我没有找到有关此案的任何信息。这种情况的背景是,我想多次使用这个表,我不想一次又一次地初始化表。

从这段代码中,我想外包以下道具:

  • 班级名称
  • 多排序
  • 显示分页
  • 可调整大小
  • 等等

你有什么想法,我如何外包这个?

问候 MCW

0 投票
1 回答
256 浏览

asp.net-core-mvc - 手动反应表 onFetchData 到 net-core API 控制器

我正在使用带有 net-core API 控制器的 react-table,并且在抓取“排序”和“过滤”字段时遇到了一些麻烦。

我正在“onFetchData”方法中发送字段,如下所示:

例如,发送的包含 3 种排序类型和 3 个过滤器的查询字符串如下所示:

服务器端,我的控制器设置如下:

我的任何请求对象如下

我正在努力让控制器使用 URL,但到目前为止我还没有在网上找到任何东西。我在想我可能应该只使用 Regex 构建自己的自定义过滤器,但我想我会先在这里发布,看看是否有其他人提出了解决方案?

0 投票
0 回答
1022 浏览

reactjs - 是否可以在 react-table 组件中实现类似 Excel 的排序小部件?

我正在使用react-table组件来显示和过滤我的数据集。我的过滤器如下所示:

在此处输入图像描述

从上图中可以看出,每一列都可以提供过滤组件(inputselect)。

现在,我需要实现类似 excel 的过滤器,如下所示:

在此处输入图像描述

到目前为止,我想出的是实现一个自定义组件来显示所需的小部件并将其定位为与标题标题相关的绝对位置:

这是解决我的任务的可接受方法(尤其是 CSS 定位)还是有更好的方法来存档?

0 投票
0 回答
1137 浏览

reactjs - 未捕获的 SyntaxError:引用反应表时 Chrome 中出现意外的标识符

我是新来的反应。react-table在 Chrome 中引用一个非常奇怪的问题。一旦我将 import 语句添加到我的页面:import ReactTable from 'react-table';然后对页面的任何部分执行任何操作或重新渲染,我就会在 Chrome 的这一行中收到一个奇怪的语法错误:import PropTypes from 'prop-types'in propTypes.js

此错误仅在开发工具源中可见。控制台中什么都没有。当悬停在它上面时状态"Uncaught SyntaxError: Unexpected identifier"。这仅在 Chrome 中发生并阻止任何调试,但不会导致任何其他错误,并且功能似乎不受影响。

它与'react-table'包有关,因为一旦我删除它import,一切都很好,我在其他页面上所做的任何事情都不会对此错误产生任何影响。当我试图查看时,propTypes.js我什至找不到这条线。有人至少可以指出如何解决这个问题吗?

Chrome 是客户群的主要浏览器,它对我的​​开发至关重要。

  • Chrome 版本:版本 64.0.3282.186(官方构建)(64 位),
  • 节点:6.11.13
  • “反应”:“^16.2.0”。
  • “道具类型”:“^15.6.1”,
  • “反应表”:“^6.8.0”,

我一直在用这个敲我的头,现在在网上搜索了一段时间,没有结果。请帮忙!任何提示都受到高度赞赏。

0 投票
1 回答
233 浏览

json - 渲染部分 JSON 对象

我在将一些 JSON 数据渲染到 React 表(来自库 react-table)时遇到了一些问题。这是我正在使用的 json 示例:

对于选择的语言,如果需要,我只需要显示每列翻译文本的一个对象。(在本例中,日期不需要翻译成任何特定语言)

这是我渲染我的 react-table 的方式:

你对如何做到这一点有任何线索吗?

更新

这是我为解决问题所做的工作:

这是我制作的功能(假设 lang 是我想要的语言):

0 投票
2 回答
6906 浏览

reactjs - 反应表中的图标

我一直在努力寻找如何在 ReactTable 的单元格中显示图标(来自库 react-table)。我所能找到的只是它接受 HTML 符号。有很多符号,但我正在寻找的是显示标志......

我已经尝试<i class='fa fa-cloud' />用于测试,但我无法使其工作。

有任何想法吗 ?

0 投票
1 回答
82 浏览

react-table - 将多个单元格值分隔为行

似乎无法弄清楚如何将我的数组分成单独的行,而不是全部出现在同一个单元格中。我有一个这样的数据结构:

我在主表上显示了 Env,而成员显示为子组件。但是,所有成员都显示在同一个单元格中。有没有办法让它们显示在单独的行中,还是我需要列出它们?例如 [{Env: DEV, Member: John Doe, Env: DEV, Member: Jane Smith}] 当前代码如下:

任何帮助深表感谢。

0 投票
1 回答
11295 浏览

javascript - 如何在 React-Table 上获取单元格值?

我在 React.js 中开发,我正在使用React-Table。我需要在特定列中获取单元格值。

我已经引用了 table 组件来访问它的内部状态。

但我不知道在哪里可以找到列中的单元格值。

是否可以在列上获取单元格值?

0 投票
0 回答
376 浏览

javascript - 循环反应表中的表

我正在尝试为反应表创建一个循环。我有一个功能 getMyData

然后导出函数