Update 01/2016: We now have a PURE REACT DataGrid component (built completely in react) http://www.reactdatagrid.com/

So of late, a lot of you have been asking for integration with the excellent React Framework. As most of you are aware, we already integrate with AngularJS as we talked about in this blog post : http://blog.htmltreegrid.com/post/Angular-JS-Support.aspx

Well, React is now gaining momentum, and some would argue is on track to bypass angular in terms of popularity. We spent some time trying to understand and look at how best to integrate with react, and there are basicaly 2 options:

1) Just drop a div in a react component, and in componentDidMount, call the constructor of the FlexDataGrid. Here is the crux of this code:

var FlexDataGridBasic = React.createClass({
    componentWillMount: function() {
        this.grid = new flexiciousNmsp.FlexDataGrid();
    },
    componentDidMount: function() {
        this.grid.setDomElement(this.refs.gridContainer);
    },
    componentDidUnMount: function() {
        this.grid.kill();
    },
    render: function() {
        return (
                <div ref="gridContainer" className="flexiciousGrid" style={this.props.divStyle}></div>
        );
    }
});
And then in your main app

var MyScreen = React.createClass({
    onCreationComplete : function(evt){
        var grid = evt.currentTarget;
        console.log('This message is sent from a callback')
    },
    onItemClick : function(evt){
        var grid = evt.currentTarget;
        alert('You clicked' + grid.getSelectedIndex());
    },
    render: function() {
        var divStyle={width:'100%',height:'100%'};

        return (
   
                <FlexDataGridBasic ref="secondGrid" divStyle={divStyle}>
                </FlexDataGridBasic>

        );
    },
    componentDidMount : function() {
   
        this.refs.secondGrid.grid.delegate=this;
        this.refs.secondGrid.grid.buildFromXml('<grid forcePagerRow="true" enableFilters="true" 
 creationComplete="onCreationComplete" itemClick="onItemClick" enableEagerDraw="true" ><columns>' +
'<column headerText="Col1" dataField="col1"/><column headerText="Col2" dataField="col2"/></columns></grid>');

    }
});
ReactDOM.render(
        <MyScreen/>,
        document.getElementById('content')
);

The advantage of this approach is that you can reuse all your XML configuration as is 
- and the delegate is your screen for all the callbacks. 

Now, the other approach is more React centric. Here, we define the markup of the grid as "React Markup"

<FlexDataGrid ref="firstGrid" forcePagerRow="true" enableFilters="true" creationComplete={this.onCreationComplete} 
     itemClick={this.onItemClick} enableEagerDraw="true" divStyle={divStyle}>

    <FlexDataGridColumnLevel>
        <FlexDataGridColumn headerText="Col1" dataField="col1"/>
        <FlexDataGridColumn headerText="Col2" dataField="col2"/>
    </FlexDataGridColumnLevel>
</FlexDataGrid>

What this does is that it makes the entire markup bindable. It has the added advantage of being more "Reacty". 

Which one you choose is upto you - As always, this is a fairly newly added feature, and 

we are looking for feedback on it, so please help us and submit your feedback!

One more thing - you will need the latest build to make this work, so please request one!

Below is the file that demonsrates both these approaches:

react.html (13.85 kb)