问题标签 [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 投票
2 回答
996 浏览

javascript - 如何根据反应表中firestore中的值设置复选框的默认状态

如何根据 React Table 中 firestore 的值设置复选框的默认状态。对不起,如果问题有点基本。我已经阅读了官方文档并且无法真正理解如何做到这一点,我还查看了其他一些很好的示例。

我希望在页面加载时检查 firestore 文档中的值,然后设置复选框的默认值。我还希望用户能够选中/取消选中它,然后更新文档中的该字段。

我已经在文档中查看了这个initialState.selectedRowIds: Object<rowId: Boolean>,但无法弄清楚如何让它工作或需要与它连接什么。

任何帮助将不胜感激。

下面是我的实现。

0 投票
2 回答
630 浏览

reactjs - 粘性列不起作用 - React Table

我正在尝试使我的 React Table 中的第一列具有粘性,但是我无法让它正常工作。当我水平滚动时,第一列可能仍会消失。

我正在做的是columns

CSS

0 投票
1 回答
2395 浏览

javascript - ReactTable v7 - noDataText 未显示在空数据上(使用 useTableHook)

我正在尝试使用反应表 v7显示一些数据。它使用useTable 钩子完美地工作,除了它只显示一个空表,没有预期的noDataText

在此处输入图像描述

这是没有数据的表格的视觉效果。如何让 reactTable(使用 usetable 挂钩)在它为空时显示“无数据”文本,并在获取数据时显示“正在加载”文本。

0 投票
2 回答
364 浏览

react-table - 如何将列隐藏从 react-table 6 升级到 react-table 7

之前在 react-table 6 中,一个只是show: false在列规范中添加了一个来隐藏一列。

这如何在 react-table 7 中实现?

0 投票
1 回答
335 浏览

reactjs - 通过在反应表中拖放来更改数据库

我想通过在用户界面中拖放来对数据库进行一些更改。实际上数据显示在表格中。单行具有称为优先级的属性,并且表根据优先级排序。现在通过拖放行我必须更改优先级。api中的优先级交换功能已经完成。如何进行拖放,将数据发送到后端

0 投票
1 回答
691 浏览

reactjs - 如何处理“警告:validateDOMNesting(...):不能作为子级出现
. " 使用 react-window 渲染表格行时

我正在使用(和材料 UI 表)react-window创建虚拟表。react-table 7

我正在嵌入 FixedSizeList 而不是 TableBody。像这样的东西:

并且 RenderRow 返回 TableRows。像这样的东西:

由于react-window工作原理,它创建了几个divs 来实现列表滚动,根据需要动态嵌入所需的 TableRows,从而导致输出一个 react js 警告。

webpack-internal:///490:506 Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>

只是忽略这个警告,不是我想做的事情,因为它可能会导致其他警告不被注意到。(我也不想在测试时使用发布版本)

那么是否可以防止发出此警告?或者是否可以在react-window不收到此警告的情况下用于表行?

更新:尝试设置innerElementType建议tbody

这会更改FixedSizeList呈现的内部 div。

从:

所以现在包含在 tbody 中。

所以我想我还需要使用outerElementType来更改外部,来div处理警告,但我想不出任何有效的方法......divtable

如果我不想包含 a我可以thead设置outerElementTypetableinnerElementTypetbody

0 投票
3 回答
10586 浏览

react-table - 如何为反应表 7 提供自定义排序功能?

useSortBy sortType 属性的文档说:

但没有完全解释如何使用它。

那么如何提供一个 sortType 函数呢?

0 投票
1 回答
2549 浏览

reactjs - 如何在反应表中设置默认排序?

我正在尝试对中的所有列进行默认排序react-table v7并仅显示升序和降序,我尝试了以下

默认情况下,这确实会更改表格中的顺序,但排序图标不会出现在我这样写的列上

并且column.isSorted仍然是false当我控制台日志时。有人可以帮我解决这个问题吗?

0 投票
1 回答
1158 浏览

reactjs - 仅在升序和降序之间进行反应表排序?

React 表排序有 3 个条件,default viewascendingdescending他们的官方示例所示https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sorting

现在,我只想在ascendingdescending删除默认视图之间进行设置。我尝试默认对第一列进行排序

但是当我单击该列并且我不知道如何删除它时,默认视图仍然存在。我在他们的文档中也找不到。

0 投票
1 回答
9084 浏览

reactjs - 单击带有反应表的单元格上的“编辑”按钮时如何使行可编辑

我正在react-table我的应用程序上使用交互式表格。

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

我设计了一个EditableCell像下面这样的。

我的表的定义是:(我使用了我的 EditableCell 组件)

setRowEditing函数中,我将更改当前行或其单元格的状态,以便将行中的单元格呈现为输入字段或其他内容。

但我不知道如何正确更改状态。

你能就此提出建议吗?