CODEWITHSUNDEEP
reactjsreact-data-grid
philippe
philippe

Reputation: 21

React Data Grid fails at src/DataGrid.tsx:268 throwing a : TypeError: rows is undefined

I am using the example code provided on the React Data Grid website at https://adazzle.github.io/react-data-grid/docs/examples/simple-grid without any changes :

import React from "react";
import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";
import "./styles.css";

const columns = [
 { key: "id", name: "ID", editable: true },
 { key: "title", name: "Title", editable: true },
 { key: "complete", name: "Complete", editable: true }
];

const rows = [
 { id: 0, title: "Task 1", complete: 20 },
 { id: 1, title: "Task 2", complete: 40 },
 { id: 2, title: "Task 3", complete: 60 }
];

class Example extends React.Component {
 state = { rows };

onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
this.setState(state => {
  const rows = state.rows.slice();
  for (let i = fromRow; i <= toRow; i++) {
    rows[i] = { ...rows[i], ...updated };
  }
  return { rows };
 });
 };
render() {
 return (
  <ReactDataGrid
    columns={columns}
    rowGetter={i => this.state.rows[i]}
    rowsCount={3}
    onGridRowsUpdated={this.onGridRowsUpdated}
    enableCellSelect={true}
  />
);
}
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);

but got a type error back from React Data Grid. What I am doing wrongly ?

Upvotes: 2

Views: 1485

Answers (1)

user13296231
user13296231

Reputation: 41

I ran into the same error (TypeError: rows is undefined) trying to use react-data-grid for the first time. The problem is that version 7.0.0-canary.14 was published on npmjs.com recently and all the documentation and examples on the react-data-grid website are for version 6.

According to the changelog (https://github.com/adazzle/react-data-grid/blob/HEAD/CHANGELOG.md) version 7 has a very different interface which doesn't appear to be documented anywhere at the moment. It also appears to be a canary version and is probably not ready for production use. Frankly, being in the process of evaluating this component, the way this breaking change was published makes me reconsider using this for anything serious.

In the meantime, if you want to use the examples or current documentation you can install an earlier version with

npm install react-data-grid@^6.0.0

or

yarn add react-data-grid@^6.0.0

Update: There are some examples of the version 7 api usage in the .tsx (not .js) files at https://github.com/adazzle/react-data-grid/tree/canary/stories/demos .

Upvotes: 4

Related Questions