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

Question

Before, we were using jqGrid. Later we moved to Backbone.js, started working with Backgrid.

Now, we are evaluating moving Backbone.Views to React components and we can't find any grid plugin / add-on fat and rich as those mentioned.

Basically, we need everything you might imagine, selecting, filtering, paging, editing, sorting, subgrids...Out of the box :) I know we can make our own table component, adding sorting and stuff, but that's way too much work for us. We were more hoping for some "reuse" :)

Is there some grid component I missed on Google?

or

Is there some (nasty) way of using some of the old DOM dependant, jquery, backbone.js stuff with React?

Answer 1

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

Answer 2

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

Answer 3

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

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

npm install griddle-react --save