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?

Christman

reactdatagrid.com has selecting, filtering, editing, sorting, subgrids - out of the box, like you asked. – Fulgurite

Thanks. This question is now 2 years old, I can imagine there are a lot of awesome plugins available :) – Christman

React documentation discusses integration with other libraries, especially jquery and Backbone.js : reactjs.org/docs/integrating-with-other-libraries.html. For datagrid candidates, you can see in my answer below. – Zacharia

Answer 1

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

Boothman

How will you add the pagination with fetch? Any such example? – Isisiskenderun

Answer 2

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

Botzow

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

Tychonn

Answer 4

Check out http://zippyui.github.io/react-datagrid/#/, it's a nice grid, with a lot of functionality built-in

Masefield

Looks like it no longer exists. Just poof -- gone. – Mier

Answer 5

There is also http://allenfang.github.io/react-bootstrap-table Built completely on Bootstrap tables.

Five