React-data-grid: Looking for a barebones example to get started

[MikeyWetzel]

I'm sorry for being a dolt, but can someone help me with the utter barebones of getting started with react-data-grid? Say, what is the simplest index.html and index.js I can have to get a simple grid showing?

I'm new to react, and the examples....as simple as they are...still assume the end user knows how to get all the various pieces working. There's some magic in the fiddle that's missing, and I don't know what that is.

I created an empty react app and am trying to simply add the grid to it. This is what I did:
(1) npm install -g create-react-app
(2) create-react-app test-app
(3) cd test-app
(4) npm install --save react-data-grid
(5) npm start

I can now edit index.js, but I can not figure out how to copy even the simplest react-data-grid example into it and get it to work. I get a complaint about not knowing what react-data-grid/addons is. I get a complaint about components/exampleWrapper.

My tail is tucked and my hands are up. Please go nice on me....what makes sense to you experienced folks is not intuitive for someone starting out. Thanks!

[MikeyWetzel]

I kept banging on it (a bit of trial and errror, I do admit) and got a simple example working:

For anyone else, here's the index.js:

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

const Example = React.createClass({
    getInitialState() {
        this.createRows();
        this._columns = [
            { key: 'id', name: 'ID' },
            { key: 'title', name: 'Title' },
            { key: 'count', name: 'Count' }];

        return null;
    },

    createRows() {
        let rows = [];
        for (let i = 1; i < 1000; i++) {
            rows.push({
                id: i,
                title: 'Title ' + i,
                count: i * 1000
            });
        }

        this._rows = rows;
    },

    rowGetter(i) {
        return this._rows[i];
    },

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

ReactDOM.render(
    <Example />,
    document.getElementById('container')
);

[silverAndroid]

I would recommend changing Example to an ES6 class as that way is currently deprecated and will be removed in version 16 of React.

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

[mmchougule]

I was having trouble adding react data grid into my container, so I have copied this code into a new component. I am still having the same issue as before.

"this._rows is undefined."

This is because the render method
columns={this._columns}
rowGetter={this.rowGetter}
rowsCount={this._rows.length}
minHeight={500} />);

"this" object of the function "rowGetter(i)" is ReactDataGrid. How do I access the global "this" for this component?

[mmchougule]

I ended up creating a global variable called "self" before the component definition and in the constructor, I assigned self = this. It works now.
But is there a better way of doing this?

[silverAndroid]

You can do this.rowGetter.bind(this)

[mmchougule]

That worked! Thank you so much @silverAndroid

[monkeysuffrage]

where does this.rowGetter.bind(this) go? I put it in the constructor and I'm still getting that error.

[mmchougule]

@monkeysuffrage it should be like this:

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

It will bind the current scope "this" to the rowGetter function and you can access the state, props, etc.

[monkeysuffrage]

Awesome. This example should be on the front page.

On Mon, Nov 6, 2017 at 10:12 PM, Mayur Chougule [e-mail]
wrote:

@monkeysuffrage https://github.com/monkeysuffrage it should be like
this:

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

It will bind the current scope "this" to the rowGetter function and you
can access the state, props, etc.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/adazzle/react-data-grid/issues/760#issuecomment-342159746,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA1afGPGk5g-oeZdVBrhDShRFljs7OkWks5szxO-gaJpZM4NFeDT
.