React.js 和丰富的数据网格组件或至少破解 [2015]

Question

之前，我们使用 jqGrid。后来我们搬到 Backbone.js，开始使用 Backgrid。

现在，我们正在评估将 Backbone.Views 移动到 React 组件，我们找不到任何提到的丰富的网格插件/附加组件。

基本上，我们需要您可能想象的一切，选择、过滤、分页、编辑、排序、子网格...开箱即用 :) 我知道我们可以制作自己的 table 组件，添加排序和东西，但这对我们来说太过分了。我们更希望有一些 "reuse" :)

我在 Google 上遗漏了一些网格组件吗？

或

是否有一些（令人讨厌的）方式使用一些旧的 DOM 依赖，jquery，backbone.js 东西与 React？

Answer 1

您可以在 React 中使用任何普通的 javascript 库。即使它直接更改了 DOM。一个例外是这个库应该只改变它自己的 DOM。您可以 "disable" React 组件。首次渲染后，React 将无法使用此组件。

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();
    }
});

在 shouldComponentUpdate 中注释 return false;。它向 React 表明它不应该更新 DOM 中的任何内容（我们手动进行）。

componentDidMount 和 shouldComponentUpdate 的实现取决于网格 API。但想法是你应该：

在componentDidMount
更新 shouldComponentUpdate
使用内部网格事件从 props 调用函数以在必要时更新数据

Answer 2

开始使用：Griddle 并且在 NPM 中也可用。

自定义格式
无限滚动
自定义样式

npm install griddle-react --save

Answer 3

查看 http://zippyui.github.io/react-datagrid/#/，这是一个不错的网格，内置了很多功能

Answer 4

ReactDataGrid 是 React 的数据网格，具有许多提到的功能，即排序、过滤、选择、自定义格式化程序和编辑器、复制和粘贴、向下拖动单元格、冻结列。分页和子网格在路线图上。看看

Answer 5

还有http://allenfang.github.io/react-bootstrap-table 完全建立在 Bootstrap 个表上。

React.js 和丰富的数据网格组件或至少破解 [2015]

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

javascript

jquery

backbone.js

jqgrid

reactjs