React.js and rich datagrid components OR at least hack [2015]

Start Use: Griddle and its available in NPM as well.

1. Custom Formatting
2. Infinite Scrolling
3. Custom Styling

npm install griddle-react --save

ReactDataGrid is a datagrid for React and has a lot of that functionality mentioned, namely sorting, filtering, selecting, custom formatters and editors, copy and paste, cell drag down, frozen columns. Pagination and subgrids are on the road map. Check it out

You can use any plain javascript library with React. Even if it changes the DOM directly. One exception is that this library should change only its own piece of DOM. You can "disable" React for component. React will not work with this component after first render.

React.createClass({
    componentDidMount: function() {
        myNativeJsGrid.init({
            domElem: this.getDOMNode(),
            data: props,
            onRowRemove: function(row){
                this.props.onRowRemove(row);
            }.bind(this)
        });
    },
    shouldComponentUpdate: function(props) {
        myNativeJsGrid.update({
            domElem: this.getDOMNode(),
            data: props
        });
        return false;
    },
    render: function() {
        return React.DOM.div();
    }
});

Note return false; in shouldComponentUpdate. It indicates to React that it shouldn't update anything in the DOM (we do it manually).

Implementation of componentDidMount and shouldComponentUpdate depends on grid API. But idea is that you should:

• init grid in componentDidMount

• update grid in shouldComponentUpdate

• use internal grid events to call functions from props to update data if necessary