作为React初学者的React-data-grid
React-data-grid是一个基于React框架的可编辑数据表格组件，它提供了丰富的功能和灵活的配置选项，使开发者能够轻松地创建交互式的数据表格。
React-data-grid的主要特点包括：
- 可编辑性：React-data-grid允许用户直接在表格中编辑数据，包括单元格的文本、复选框、下拉列表等。
- 排序和过滤：它支持对表格数据进行排序和过滤，使用户能够快速找到所需的数据。
- 分页和滚动：React-data-grid支持分页和滚动加载，可以处理大量数据而不影响性能。
- 自定义组件：开发者可以根据自己的需求自定义表格的单元格组件，以实现更复杂的交互和展示效果。
- 事件处理：React-data-grid提供了丰富的事件处理机制，开发者可以监听各种事件，如单元格点击、行选择等。
React-data-grid适用于各种场景，包括但不限于：
- 数据展示和编辑：可以用于展示和编辑各种类型的数据，如表格数据、报表数据等。
- 数据分析和可视化：可以用于数据分析和可视化，通过对表格数据的排序、过滤和聚合，帮助用户更好地理解和分析数据。
- 后台管理系统：可以用于开发各种后台管理系统，如用户管理、订单管理等。
腾讯云提供了一系列与React-data-grid相结合的产品和服务，包括：
- 腾讯云云服务器（CVM）：提供稳定可靠的云服务器，用于部署React-data-grid应用。
- 腾讯云对象存储（COS）：提供高可用、高可靠的对象存储服务，用于存储React-data-grid中的数据。
- 腾讯云数据库（TencentDB）：提供多种类型的数据库服务，如关系型数据库（MySQL、SQL Server）、NoSQL数据库（MongoDB、Redis）等，用于存储和管理React-data-grid的数据。
- 腾讯云CDN加速（CDN）：提供全球分布式的内容分发网络，加速React-data-grid的静态资源加载，提升用户体验。
- 腾讯云容器服务（TKE）：提供高性能、高可靠的容器服务，用于部署React-data-grid应用的容器化版本。
以上是对React-data-grid的简要介绍和相关腾讯云产品的推荐。希望能对您有所帮助！
相关·内容
尝试在这里使用react-data-tables，并在左侧、右侧和中心出现错误。快要疯了。
按照的说明并使用来自的代码示例后，我遇到了以下问题。
如果我在我的文件中使用这个
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDataGrid from 'react-data-grid';
import ReactDataGridPlugins from 'react-data-grid/addons';
var Toolbar = R
浏览 4提问于2016-07-29得票数 1
我对React和TypeScript都是新手，我正在尝试基于它们的简单示例创建一个简单的React数据网格：
这就是我所拥有的：
import React from 'react';
import ReactDataGrid from 'react-data-grid';
const columns = [
{ key: "id", name: "ID", editable: true },
{ key: "title", name: "Title", editable: true
浏览 6提问于2020-02-28得票数 0
回答已采纳
在React-Data-Grid回购中，我看到了
export interface DataGridProps {
columns: ColumnList;
(...)
rowRenderer?: React.ReactElement | React.ComponentType;
rowGroupRenderer?: React.ComponentType;
(...)
和
export default class ReactDataGrid extends React.Component<DataGridProps, DataGridState> { ...
浏览 1提问于2019-07-09得票数 1
我正在尝试使用React-Data-Grid和"react-data-grid-addons“创建带有过滤列选项的动态表。我刚刚在我的组件中导入了这两个插件，导入grid-add-ons会导致代码失败，错误如下。请协助或是否有任何其他选项来创建带有筛选器的表
import ReactDataGrid from "react-data-grid";
import { Toolbar, Data, Filters } from "react-data-grid-addons"; //Writing this only fails the code
./no
浏览 7提问于2020-05-09得票数 3
我正在尝试在react-data-grid中实现DnD功能，但我得到的是"TypeError: Object(...) is not a function" Error。 在TypeSript中有一个与我在沙箱中提供的文件相同的文件(它仅供参考)。我正在尝试实现React中的功能，但在将TS代码转换为React代码时出现了一些错误。我使用的是react-data-grid ^7.0.0-canary.33。 <DndProvider backend={HTML5Backend}>
浏览 38提问于2021-01-08得票数 1
回答已采纳
1回答
我想分叉的回购在吉突，作出一些改变，并安装在我的反应应用程序。
我在repo的package.json中添加了名称、版本和描述属性
我尝试通过npm安装用户名/repo_url#分支来安装它。
它确实安装和构建了包，但是忽略了节点_模块/react grid/packages/*/中的dist和lib文件夹，而且我无法在代码中导入它。
我试过了
1)在我的应用程序的.gitignore中注释dist
2)在我的应用程序的package.json中使用dist添加文件属性
毫无办法。我做错了什么？
编辑
下面是@Derek响应之后的堆栈跟踪
npm install piby180/react-d
浏览 1提问于2019-07-12得票数 1
1回答
我在我的应用程序中使用了几次React ()。我注意到有一个控制台警告道具“未定义”，即使只使用最低要求的道具也会打印。
最小的，可复制的例子
安装RDG
$ npm install react-data-grid --save
或与纱线：
$ yarn add react-data-grid
file.tsx
import React from 'react';
import ReactDataGrid from 'react-data-grid';
const columns = [
{ key: 'id', name: 'ID
浏览 1提问于2019-06-07得票数 1
当react-data-grid中的"select all“复选框被选中时，我想编写一些自定义逻辑。那么，当用户单击"select all“复选框时，如何获得该复选框句柄呢？
下面是指向一些react-data-grid示例的链接和指向存储库的链接
在我的render()中，我定义了react-data-grid，如下所示。
呈现该表时，它看起来像这样的
let dataGrid = <ReactDataGrid
ref={node => this.grid = node}
onGridSort={this.handl
浏览 0提问于2018-08-24得票数 0
4回答
我有一个关于ReactDataGrid组件的问题。我已经安装了react-data-grid。代码与reac grid的web中的代码相同：
const columns = [
{ key: 'id', name: 'ID' },
{ key: 'title', name: 'Title' },
{ key: 'count', name: 'Count' }];
const rows = [{ id: 0, title: 'row1', count: 20 }, { i
浏览 26提问于2020-02-14得票数 2
我目前正在使用react-data-grid，而且我已经差不多完成了……我在工具栏中显示了filters按钮。我需要另一个按钮来影响表中所有选定的项，我想将其添加到工具栏的左侧，以节省空间。有没有人知道用react-data-grid做这件事的方法？
我查看了github中的代码，我看到了Toolbar项，它似乎非常特定于react-data-grid，但也有AdvancedToolbar项，我不确定它是否可以用于将您自己的自定义项添加到react-data-grid中。
在react-data-grid示例中没有任何添加自定义按钮或组件的示例，但我想知道是否有人做过这样的事情，并且可以分享一
浏览 27提问于2016-07-29得票数 2
1回答
我是当今技术的新手，但我正计划在一个宠物项目中使用react-data-grid。
我有点醉醺醺地试图理解git，npm，react，react-data-grid，babel，webpack，javascript及其变体.所以我想我应该试着用Facebook上的create-react-app开发我的第一个简单的create-react-app应用程序。
在呈现过程中，我会遇到以下失败，并且我被困住了：
'WEBPACK_IMPORTED_MODULE__react"React".createElement')：未定义不是对象(求值TypeError)
浏览 1提问于2018-01-25得票数 0
回答已采纳
)我在我的应用程序中使用了几次React ()。我注意到有一个道具"enableRowSelect“的控制台警告，它会打印您是否使用上述道具。
控制台警告：
enableRowSelect已被废弃，并将在将来的版本中删除。请改用rowSelection
最小的，可复制的例子
安装RDG
$ npm install react-data-grid --save
或与纱线：
$ yarn add react-data-grid
file.tsx
import React from 'react';
import ReactDataGrid from 'rea
浏览 2提问于2019-06-05得票数 3
1回答
我在这里遵循教程：http://adazzle.github.io/react-data-grid/docs/examples/column-sorting并尝试实现react-data-grid，因为它为我提供了进行排序、特定单元格的树型视图等功能。但我收到了如下错误： 不变冲突:钩子只能在函数组件的主体内调用。 import React from "react";
import { useState } from "react";
import ReactDOM from "react-dom";
import ReactDataGrid
浏览 21提问于2019-04-20得票数 0
我正在加载一个react- data -grid，其中包含一个逐行填充的数据源(每秒添加一次行)。一旦它达到9行，它就会停止添加行。我还有另一个问题，在我改变屏幕上的缩放比例之前，网格不会显示出来。事先为空。这是我的网格元素 import React, { Component } from 'react';
import DataGrid from 'react-data-grid';
import 'react-data-grid/dist/react-data-grid.css';
const columns = [
{ key: &
浏览 16提问于2020-03-27得票数 1
因此，我正在尝试使用react-data-grid，但我在单元格编辑方面遇到了问题。我要做的是编辑一个单元格，然后更新单元格以显示新值。我尝试了React数据网格网站上的所有示例，但似乎没有一个有效。我可以编辑该单元格，但如果我单击另一个单元格或按enter键，该单元格将返回到其旧值。我不知道为什么，但是onGridRowsUpdated从来不会开的！我希望有人能帮我解决这个问题，下面是我的代码： import React, { Component } from "react";
import ReactDataGrid from "react-data-grid&#
浏览 13提问于2020-04-05得票数 1
我正在尝试将react数据网格与电子js集成，在使用"useState“时我遇到了一些问题。控制台要求我添加错误边界，但添加也没有帮助。我在stackoverflow中搜索了类似的问题，并确保react升级到了使用钩子的最新版本，并且与react-dom相同。但是，即使遵循了上面的步骤，我也不能让它工作。
我正在尝试使用react-data-grid documentation 中的高级过滤选项
但唯一的区别是我尝试在电子js上使用react-data-grid。由于我是javascript的新手，我不确定我错在哪里。
存储库链接：
错误的屏幕截图：
任何建议或帮助，我们将不胜感激。
浏览 2提问于2018-12-17得票数 0
1回答
响应数据网格x轴滚动不工作在浏览器(crome)，我的当前(70.0.3538.77)版本(克罗姆)，但在以前的版本(69.*)。但是和其他浏览器工作的很好。我的React版本是"react"："16.4.1"，React-data-grid版本是“react data-grid”："4.0.8"，"react-data-grid-addons"："4.0.8“。
浏览 0提问于2018-11-03得票数 1
回答已采纳
嗨，伙计们，我试着在webpack中把和addons库设置为外部函数，这样他们就不会被包含在我的资产捆绑中。在我试图把它转移到webpack的外部部分之前，我已经把一切都做好了。我在一些堆栈跟踪中发现了以下错误消息，但无法使其正常工作。也许我的用例有点不同，问题就在别的地方？这是我得到的信息：
React.createElement: type无效--需要一个字符串(用于内置组件)或类/函数(用于组合组件)，但是got: object。检查Table的呈现方法。
我在我的package.json中使用了以下版本：
"dependencies": {
"r
浏览 2提问于2017-11-16得票数 1
我正在尝试用我自己的数据创建一个带有react- data -grid的数据表。首先，我尝试重新创建入门示例，得到以下错误 "TypeError: Cannot read property 'map' of undefined" at
.../node_modules/react-data-grid/dist/react-data-grid.js:1094. 我正确地安装了所有的东西，我不确定为什么会发生这种情况，而我只是按照教程的字面意思去做。 最初从我自己的数据开始，然后我使用了与示例中相同的数据，它仍然有相同的错误。 通过此链接使用教程：https:
浏览 9提问于2019-07-04得票数 1
回答已采纳
我运行的代码是：
import React from "react";
import ReactDataGrid from "react-data-grid";
const styles = {
fontFamily: "sans-serif",
textAlign: "center"};
const Example = () => {
const columns = [
{ key: "id", name: "ID" },
{ key: "t
浏览 0提问于2020-11-15得票数 1
回答已采纳
我已经将react-data-grid集成到了我的一个项目中。在那里，我想根据加载的行来设置网格的动态高度。我该怎么做呢？
浏览 0提问于2019-09-04得票数 4
1回答
我正在尝试React-Data-Grid，希望得到的捆绑包大小将比我目前在应用程序中使用的ag-Grid或Tabulator更小。
我在一个小组件中尝试它，以验证生成的包大小。但出乎意料的是，我的应用程序大小增加了大约10MB。而ag-Grid或制表器导致“仅”增加约2MB。我使用Laravel作为后台；我不会更改Laravel生成的webconfig.js，因为默认的webconfig对我的应用程序来说已经足够了。上面的结果是我执行该命令时的结果：
npm run watch
它由Laravel框架(Laravel Mix)生成的脚本提供。当然，如果我通过执行以下命令来运行生产模式：
npm
浏览 9提问于2020-02-27得票数 0
如何通过方法访问传递给组件的分派功能？如果我试图通过this.props访问回调。找不到函数。显示以下错误:未在EditTable中指定必需的支柱EditTable，而TypeError: this.props.onDataUpdated不是函数
ConsumerIDManagement.js
import { connect } from 'react-redux'
var React = require('react');
var EditTable = require("../components/EditTable");
const C
浏览 5提问于2016-07-20得票数 1
回答已采纳
1回答
我最近安装了react数据网格组件，并开始尝试测试它。它应该从文档中运行，但是我得到了一个我不理解的编译错误。我会感谢你的帮助。谢谢。
下面是错误。我得到了
./node_modules/react-data-grid/lib/DataGrid.js 102:37
Module parse failed: Unexpected token (102:37)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to
浏览 2提问于2020-07-07得票数 3
3回答
如何使用react-data-grid实现行明细和自定义明细组件的展开/折叠？
我有用户表，我希望在单击/双击用户行后能够看到用户详细信息。类似这样的东西：。可以使用这个组件吗？
浏览 1提问于2017-06-09得票数 1
我正在开发一个使用的react应用程序。通过webpack服务资产，通过npm管理依赖关系。
我想对localhost上的react-data-grid进行修改，并让这些更改出现在我现有的项目中。
做这件事最好的方法是什么？
浏览 0提问于2015-11-18得票数 1
我正在使用react-data-grid。当我在mobile中加载网格时，冻结的列在水平滚动中闪烁。这是重现错误的链接。
。
只需在移动视图中加载网格并尝试水平滚动即可。
任何以前遇到过这个问题的人，请给出一些解决方案
浏览 0提问于2017-09-14得票数 1
以下是我用于react-data-grid的版本。在Chrome上运行应用程序。
"react": "^15.4.2",
"react-data-grid": "^2.0.8",
"react-data-grid-addons": "^2.0.17",
我正在从主网站复制示例。网格本身正在按预期运行，但我在Chrome的控制台中收到以下警告：
Warning: Failed prop type: Invalid prop `options[0]` supplied to `DropDownEdito
浏览 1提问于2017-03-03得票数 1
1回答
我查看了react-data-grid源代码，并注意到这一行：
return x - this.cell.current!.getBoundingClientRect().left;
我好像弄不明白到底是什么东西！正在做什么。
浏览 0提问于2019-12-19得票数 0
1回答
我正在参与一个相当大的React项目，该项目使用react-data-grid显示大量可编辑的数据。现在，您必须单击Update按钮将更改发送到服务器。我手头的任务是创建这样的自动保存功能：
用户选择单元格来编辑文本。
用户更改文本
用户要么移动到另一个单元格，要么单击远离数据网格。
更改将持久化到服务器。
以下是我尝试过的：
每个列上的onBlur事件。事件将触发，但事件似乎附加到div而不是底层的input控件上。因此，在触发此事件时，我无法访问该单元格的值。
onCellDeselected在<ReactDataGrid>组件本身上。该方法似乎
浏览 5提问于2016-11-30得票数 2
1回答
我有以下代码，但我的网格没有加载以下代码，但没有错误。我相信这是由于异步axios调用，但我不知道如何摆脱它。 import React, { useState } from "react";
import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";
import { Toolbar, Data } from "react-data-grid-addons";
import axios from 'axios';
浏览 19提问于2020-07-23得票数 0
回答已采纳
2回答
我正在尝试将数据网格安装到我的移动应用程序中，并且我总是一步一步地对每个库进行文档化。我安装了所有的东西，它写了错误信息。
我试着谷歌，看看图书馆的文件，但什么也没有。没有人像我一样没有这类问题:/。
import React from 'react';
import ReactDataGrid from 'react-data-grid';
const columns = [
{ key: 'id', name: 'ID' },
{ key: 'title', name: 'Title'
浏览 0提问于2019-06-05得票数 5
回答已采纳
示例:在Modal中弹出的表格当我们点击搜索按钮时，java应用程序中有一个现有的功能，它将弹出一个模态窗口(如数据表格网格)，并以表格格式显示数据，并提供过滤和排序选项，当我们从表格中选择记录时，它将在现有的表单中被选中。如何使用ReactJs和react-bootstrap实现这一点？是否有库可以导入并满足此要求？过滤，排序下拉列表...
Col1 Col2 Col3 +添加行
选择此行时..Col1 Col2 Col3 -Del行
好的。选中该行后，值将显示在主窗体中
浏览 15提问于2017-02-03得票数 0
1回答
我正在尝试使用ag-grid的新react-ui，但是它显示模块不存在。https://www.ag-grid.com/react-data-grid/reactui/ import { AgGridReact } from '@ag-grid-community/react'; 错误： Failed to compile.
./src/features/ppc/landingPage.jsx
Module not found: Can't resolve '@ag-grid-community/react' 我换成了 import { AgGrid
浏览 67提问于2021-10-21得票数 0
我刚刚开始探索React-data-grid，我注意到您必须设置rowCount，这让我想知道是否可以动态添加更多行。我使用websockets来获取数据，这些数据将作为行添加到表中。如果不支持，这可能是一个交易杀手。
浏览 11提问于2019-02-28得票数 0
回答已采纳
我是个新手。昨天才开始学习。我想在react应用程序中实现数据网格，所以决定使用ReactDataGrid组件。我使用命令npm install react-data-grid --save安装组件网。这就是我在页面中实现代码的方式。 import { Component } from 'react';
import ReactDataGrid from 'react-data-grid';
class Employee extends Component {
constructor(pros) {
super(pros);
浏览 30提问于2020-11-08得票数 1
回答已采纳
我正在使用react-data-grid &为某一列制作了一个自定义菜单组件，因为我无法获取网格高度的顶部，以定位我的网格我尝试对值进行硬编码，但它失去了响应性。
我把grid-component放在一个div中，通过Id来定位它。
在react的世界里，这是一种正确的方法吗？
有没有更好的方法来抓住网格的顶部？？
浏览 2提问于2020-02-26得票数 0
使用React+Typescript，我需要在表格上实现上下文菜单，点击行单元格和列标题。
我看了几个库: ag grid在企业版中提供了上下文菜单，它只在行单元格上。react-data-grid提供了行级上下文菜单。但是这个库的文档维护性很差，给开发带来了困难
有没有人可以建议我如何做到这一点？
浏览 1提问于2020-06-15得票数 1
我尝试使用在react-data-grid中呈现自定义行。但是如何为图像创建自定义行呢？我有两个列，分别名为image_large和image_small。自定义行渲染器的代码如下：
<div className="row" style={{minHeight: 300, margin: 20}}>
<div className="col-md-6">
<img onClick={() => this.button()}
src=
浏览 0提问于2018-07-10得票数 2
回答已采纳
react-data-grid对每个单元格都有默认的工具提示。它会自动添加title属性。我不想要那个工具提示，我怎么隐藏它？ 另外，我不想使用custom formatter。我想它会在头顶上。 例如Try to hover on any cell 在此处查看Kristin上不需要的工具提示 ?
浏览 17提问于2019-02-08得票数 1
如何设置使用react-data-grid创建的最终表的大小。
例如，如果我想要一个250*250像素大小的表格，该怎么做呢？
有没有什么道具可以做到这一点呢？或者需要使用纯CSS来完成。
Saurav提供的解决方案之后
浏览 4提问于2020-07-02得票数 0
我正在尝试使用react-data-grid在我的网站上创建一个表，并得到未定义长度的错误。我还有另外两个列和行文件，我将它们包含在状态中。
<ReactDataGrid
columns={this.state.columns}
rowGetter={i => this.state.rows[i]}
rowsCount={this.state.rows.length}
onGridRowsUpdated={this.onGridRowsUpdated}
enableCellSelect={true}
/>
浏览 5提问于2020-11-16得票数 1
3回答
我们正在使用react-data-grid (adazzle)，并且希望对表头进行一些样式调整。
我们希望调整标题，使其大约是表中行高度的两倍，如下所示：
我猜我们将通过HeaderRow组件来处理这个问题。但是，由于这个组件没有文档，所以我不知道如何进一步解决这个问题。
浏览 1提问于2017-05-22得票数 2
我正在尝试创建一个ReactDataGrid，当我使用rowGetter时，我得到了这个错误。然而，当我使用rows={myData}时，网格工作得很好，我真的不明白发生了什么。 下面是我的代码： import React, {Component, useState } from 'react';
import DataGrid from 'react-data-grid';
import 'react-data-grid/dist/react-data-grid.css';
import { Toolbar, Data, Filters }
浏览 17提问于2020-04-07得票数 2
1回答
我正在尝试在react.js中创建一个动态列，有没有人有想法？我已经完成了静态列，但我想让它们动态，看看我的代码，请给我建议。
import React from 'react';
import ReactDataGrid from 'react-data-grid';
class Example extends React.Component {
constructor(props, context) {
super(props, context);
this.createRows();
this._columns = [
浏览 0提问于2018-05-27得票数 0
我正在尝试为customRowRendered编写一个reactDataGrid，但它不是很好的整数。
import React, { Component } from "react"
import ReactDOM from "react-dom";
import PropTypes from 'prop-types';
import ReactDataGrid from 'react-data-grid'
const RowRenderer = ({ renderBaseRow, ...props }) => {
浏览 2提问于2020-07-27得票数 0
我是第一次接触react，并试图让React数据网格处理一些测试数据--为什么我会在rowGetter函数中得到this.state未定义的错误？我找不到一个在任何地方都有效的例子。
import React, { PropTypes, Component } from 'react';
import ReactDataGrid from 'react-data-grid';
class FilterGrid extends Component {
static propTypes = {
columns: PropTypes.array,
浏览 0提问于2017-07-13得票数 1
2回答
因此，我几乎可以肯定做错了什么，并且不理解这里的底层库，但是我如何才能将行项目从外部更新到React-Data-Grid呢？ 下面的例子，在5秒后，第一行的第一列被更新，但表中的数据没有更新。为什么？该如何改变呢？ let cols = [
{
key: 'sapAssetNumber',
name: 'SAP Asset number',
editable: false
},
{
key: 'assetDescription',
name: 'Description',
浏览 25提问于2019-05-10得票数 0
回答已采纳
实际上，我使用的是npm reactjs.Imported -data-grid，因为我在列中使用AutoCompleteEditor来选择列出的值。它以前工作得很好，现在在firefox等平台上也能工作。现在，我不确定可能是chrome更新了，AutoCompleteEditor列表没有显示在react-data-grid表中。你知道为什么它不显示吗？提前谢谢你！！
浏览 20提问于2019-04-30得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
