标签: react-data-grid

在react-data-grid中,如何创建显示另一列值的列？

我有一个包含以下内容的对象数组:

{
    id: 3,
    latitude: 42.101231231,
    longitude: -81.123132
}

我的列定义是这样的:

    this.columns = [
            { key: 'id', name: 'ID' },
                //The coordinates key for this column doesn't exist
            { key: 'coordinates', name: 'Coordinates', formatter: coordinatesFormatter  }
        ];

格式化程序:

const coordinatesFormatter = React.createClass({
  render() {
    return (<div>{latitude}, {longitude}</div>);
  }
});

在格式化程序中,如何访问行上的纬度和经度属性以便连接它们？

据我所知,格式化程序只能访问其单元格的值this.props.value,而无法访问该行的整个对象.

我正在使用react-data-grid组件.它提供了一个包含编辑和更多选项的网格结构.当我们点击每个单元格时,我们可以编辑单元格的内容.在我的项目中,我遇到的情况就像日期列聚焦时我想绑定一个UI,用户可以在其中选择date.for,我使用了react-datepicker组件.我能够在date列选项中将react-datepicker组件作为格式化程序.我可以更改react datepicker组件中的日期,但这不是更新单元格值(当您单击控制台数据按钮时,您可以看到更改是否已更新).所有人帮我如何可以在react-datepicker组件中选择其他日期时更新单元格值.当其他单元格中的值发生更改时,它会自动发生.

import React from 'react';
import ReactDOM from 'react-dom';
import ReactDataGrid from 'react-data-grid';
import DatePicker from 'react-datepicker';
import moment from 'moment';


//helper to generate a random date
function randomDate(start, end) {
  return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString();
}

//helper to create a fixed number of rows
function createRows(numberOfRows){
  var _rows = [];
  for (var i = 1; i < numberOfRows; i++) {
    _rows.push({
      id: i,
      task: 'Task ' + i,
      startDate: randomDate(new …

我已将 React-Data-Grid 集成到我的一个项目中。在那里，我想根据加载的行设置网格的动态高度。我该怎么做？

我试图在某些颜色上渲染某些颜色的背景颜色,在我的react-data-grid(adazzle)中.

问题是我在我的细胞周围得到了这个白色填充物:

如何摆脱这种白色衬垫？

我只是按照本例中使用格式化程序的方式:

http://adazzle.github.io/react-data-grid/examples.html#/custom-formatters

我的ColumnFormatter看起来像这样:

const ColumnFormatter = React.createClass({
  propTypes: {
    value: React.PropTypes.number.isRequired
  },

  render() {
    return (
      <div style={{background: '#f2f9de'}}>
        {this.props.value}
      </div>);
  }
});

我设置了这样的列:

this._columns.push({
  key:  i,
  name: "blah " + i,
  sortable: true,
  resizable: true,
  formatter: ColumnFormatter
}) 

如何将来自Adazzle 数据网格的网格嵌入到基于Redux-Form的React组件中？

我有一个使用单元格编辑的数据网格。Adazzle 网格使用行的状态变量和一些访问器方法来呈现数据。它有一个用于更新行的处理程序。这是我用来将表单数据与网格中的更改同步的方法。问题是在更改handleGridRowsUpdated.

handleGridRowsUpdated({fromRow, toRow, updated}) {
let rows = this
  .state
  .rows
  .slice();

for (let i = fromRow; i <= toRow; i++) {

  //update the data-grid
  let rowToUpdate = rows[i];
  let updatedRow = {
    ...rowToUpdate,
    ...updated
  };
  rows[i] = updatedRow;

  //update the underlying redux-form values
  let entity = this.props.input.value[i]
  this.props.input.value[i] = {...entity, ...updated}
}

this.setState({rows});
}

另外，这里是我如何从 Redux-form 填充行。基于 Redux-forms 的组件使用另一个包装 react-data-grid 的组件。

constructor(props) {
 super(props)

 this.state = {
   rows: …

我的项目中有多个DataGrid表，但我无法弄清楚这个表出了什么问题。

我已经为我的问题创建了一个codesandbox 示例。如果有人可以提供帮助，我将非常感激。

这可能是一个愚蠢的错误

代码沙盒示例

以下是我的Reactdata网格代码

    this._columns = [
          {
            key: 'id',
            name: 'ID',
            width: 40
          },
          {
            key: 'task',
            name: 'Title',
            width:100
          },
          {
            key: 'priority',
            name: 'Priority',
            width:100
          },
          {
            key: 'issueType',
            name: 'Issue Type',
            width:100
          },
          {
            key: 'complete',
            name: '% Complete',
            width:100
          },
          {
            key: 'startDate',
            name: 'Start Date',
            width:100
          },
          {
            key: 'completeDate',
            name: 'Expected Complete',
            width:100
          }
        ];

          render() {
        return  (
          <ReactDataGrid
            columns={this._columns}
            rowGetter={this.rowGetter}
            rowsCount={this._rows.length}
            minHeight={500}
            minColumnWidth={120} 
          />);
      }

使用下面的React数据网格：https : //github.com/adazzle/react-data-grid

我想以百分比形式传递宽度，这是如何使用React数据网格实现的。任何帮助，将不胜感激。谢谢

我试图删除使用react-data-grid单击单元格时出现的蓝色边框。这可能吗，还是我必须创建拉取请求？

我正在尝试使用反应数据网格（与 Excel 相同）创建复制粘贴功能。复制粘贴工作正常，但我面临内联单元格编辑的问题。请参考这里的代码https://codesandbox.io/embed/sweet-wave-3qw4y?fontsize=14&hidenavigation=1&theme=dark

在此代码中，如果我编辑单元格（更改单元格值），并且在不按 Enter 或箭头键的情况下直接单击不同的单元格（正在编辑的单元格除外），则编辑的值将被传输到单击的单元格。

我在github上找到了一些东西，但无法找出解决方案： https: //github.com/adazzle/react-data-grid/issues/942，https : //github.com/adazzle/react-data-grid/ issues/293，https://github.com/adazzle/react-data-grid/issues/1460和https://github.com/adazzle/react-data-grid/issues/1474

请让我知道如何解决这个问题。

解决方法我在这里找到了解决方案https://www.npmjs.com/package/fixed-react-data-grid。他已经解决了这个问题并创建了另一个包，但我仍然不知道他是如何做到的。任何有关这方面的帮助都会非常有帮助。

这是我使用 react-data-grid 的第一个示例表，列不会彼此相邻呈现，而是相互重叠

下面是我正在尝试的非常基本的示例代码。该代码使用数据呈现表格，但将列和数据呈现在彼此之上，如下所示：

输出：

ID 标题 1 任务 2 任务

import React from 'react';
import DataGrid from 'react-data-grid';

export default class extends React.Component {
  constructor(props, context) {
    super(props, context);
    this._columns = [
      {
        key: 'id',
        name: 'ID',
        resizable: true,
        width: 40
      },
      {
        key: 'task',
        name: 'Title',
        resizable: true
      }
    ];
    this.createRows();
    this.state = null;
  }

  createRows = () => {
    const rows = [];
    for (let i = 1; i <= 2; i++) {
      rows.push({
        id: i,
        task: …