标签: react-data-grid

我们正在使用react-data-grid（adazzle），并且想对表头进行一些样式调整。

我们想要调整标题，使其大约是表中行高的两倍，如下所示：

我猜我们会从 HeaderRow 组件来解决这个问题。然而，由于该组件的文档为零，我对如何进一步解决此问题一无所知。

我正在使用react-data-grid在页面中显示可编辑的表.我用于editable: true启用可编辑列.但我有一些不可编辑的行.我怎样才能在行级别中控制它？

请提出解决方案.PFB初始化数据网格.

<ReactDataGrid
    enableCellSelect={true}
    columns={this.state.columns}
    rowGetter={rowGetter}
    rowsCount={this.state.rows.length}
    rowHeight={35}
    minHeight={500}
    onGridRowsUpdated={this.handleGridRowsUpdated}/>

我正在尝试测试一个组件，该组件呈现 react-data-grid 组件的基本示例（http://adazzle.github.io/react-data-grid/examples.html#/basic）。

测试代码如下所示：

import React from 'react';
import renderer from 'react-test-renderer';
import ExampleGrid from './ExampleGrid';

it('renders correctly', () => {
    const tree = renderer.create(<ExampleGrid />);
    expect(tree).toMatchSnapshot();
}); 

当我运行测试时，我收到消息：

类型错误：无法读取未定义的属性“offsetWidth”

关于导致此问题的原因的任何想法？

编辑： ExampleGrid 的内容是：

const ReactDataGrid = require('react-data-grid');
const React = require('react');

class ExampleGrid extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.createRows();
        this._columns = [
            { key: 'id', name: 'ID' },
            { key: 'title', name: 'Title' },
            { key: 'count', name: 'Count' } ];

        this.state = null; …

有没有一种方法可以使过滤器默认在React Data Grid中打开（显示）？最好是允许我避免将toolbar={<Toolbar enableFilter />}道具传递给<ReactDataGrid />

通过阅读Adazzle部件文档它似乎不是有一个明显的道具在主上传递<ReactDataGrid />组件，而不必调用显示过滤器onToggleFilter()经由<Toolbar />组件。

我正在构建的最终网格组件将使用用户立即可见和可编辑的过滤器输入来呈现，而无需“单击清除”或以其他方式调用已记录的onClearFilters()功能。这也使该<Toolbar />组件（和嵌套<Filter Rows />按钮不再需要）。

我当前的组件是...

<ReactDataGrid
   onGridSort={this.handleGridSort}
   columns={this.state.columns}
   rowGetter={this.rowGetter}
   rowsCount={this.getSize()}
   toolbar={<Toolbar enableFilter />}
   onAddFilter={this.handleFilterChange}
   onClearFilters={this.onClearFilters}
/>

理想情况下，最终组件应类似于以下内容：

<ReactDataGrid
  onGridSort={this.handleGridSort}
  columns={this.state.columns}
  rowGetter={this.rowGetter}
  rowsCount={this.getSize()}}
  onAddFilter={this.handleFilterChange}
  filtersVisible={true}  // Renders with filters visible/active
/>

我试图这样做以在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={this.state.imagePath}
                     id='image'
                     style={{maxWidth: '100%'}}/>
            </div>
        </div>

我想在react-data-grid表上实现验证，其中只有我在列本身中定义的单元格才会被验证，并且只有在状态设置为true时才会发生验证。

所以我这里有以下代码

const [ validateMode, setValidateMode ] = useState(false);
const errorBackground = { backgroundColor: 'some error color in here' }


const DescriptionFormatter = props => {
    const { value, row } = props;
    let template;

    if (!validateMode){
        template = value;
    }

    if (validateMode){
        let validationStyling = Boolean(value.length) ? {} : errorBackground;
        template = <div style={{ ...validationStyling }}>value</div>
    }

    return template;
}

const tableCols = [
    {
        key: 'id',
        name: 'No'
    },
    {
        key: 'name',
        name: 'Name',
        editable: !disabled,
        editor: <AutoComplete …

如何在反应材料 UI 数据网格上呈现嵌套的 JSON 数据。在附加的沙箱中，我想在数据网格上显示来自 json 的用户的电话号码 -嵌套 JSON 数据网格

我正在寻找向现有表添加新行。有什么方法可以实现我已经阅读了reactdatagrid的api但没有找到它的运气。还有其他方法可以做到这一点吗？

我刚刚开始研究React-data-grid，我注意到您必须设置rowCount，这使我想知道是否可以动态添加更多行。我正在使用websockets获取数据，这些数据将作为行添加到表中。如果不支持，这可能是一个交易杀手。