javascript - React.js and rich datagrid components OR at least hack [2015] - Stack Overflow

admin管理员组

文章数量:1187302

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?

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?

• javascript
• jquery
• backbone.js
• jqgrid
• reactjs

Share Improve this question Follow edited Feb 21, 2017 at 9:09 zarko.susnjar asked Jan 19, 2015 at 22:01 zarko.susnjarzarko.susnjar 2,05322 gold badges1717 silver badges3636 bronze badges 3

• 1 reactdatagrid.com has selecting, filtering, editing, sorting, subgrids - out of the box, like you asked. – flexicious.com Commented Feb 20, 2017 at 14:21
• Thanks. This question is now 2 years old, I can imagine there are a lot of awesome plugins available :) – zarko.susnjar Commented Feb 21, 2017 at 9:06
• 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. – Lex Soft Commented Jun 1, 2019 at 2:39

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 8

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

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

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

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

npm install griddle-react --save

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

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

本文标签： javascriptReactjs and rich datagrid components OR at least hack 2015Stack Overflow