之前，我们使用的是jqGrid。 后来我们转到Backbone.js，开始使用Backgrid。
现在，我们正在评估移动 Backbone.Views到React 组件，我们无法找到所提到的任何网格插件/附加组件。
基本上，我们需要你想象的一切，选择，过滤，分页，编辑，排序，子网格......开箱即用:)我知道我们可以创建自己的表组件，添加排序和东西，但是＆＃ 39;对我们来说太过分了。我们更希望一些＆＃34;重用＆＃34; ：）
我在Google上遗漏了一些网格组件吗？
或
是否有一些（令人讨厌的）使用一些旧的DOM依赖，jquery，backbone.js与React的东西？
答案 0 :(得分：8)
您可以在React中使用任何普通的JavaScript库。即使它直接改变了DOM。一个例外是这个库应该只改变自己的DOM。 你可以＆＃34;禁用＆＃34;对组件做出反应。首次渲染后，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();
}
});
注意return false;中的shouldComponentUpdate。它向React表明它不应该更新DOM中的任何内容（我们手动完成）。
componentDidMount和shouldComponentUpdate的实施取决于网格API。但想法是你应该：
componentDidMount
更新shouldComponentUpdate
使用内部网格事件从props调用函数以在必要时更新数据
答案 1 :(得分：5)
开始使用：Griddle，也可以在NPM中使用。
npm install griddle-react --save
答案 2 :(得分：5)
ReactDataGrid是React的数据网格，具有很多提到的功能，即排序，过滤，选择，自定义格式化程序和编辑器，复制和粘贴，单元格向下拖动，冻结列。分页和子网格在路线图上。看看
答案 3 :(得分：3)
查看http://zippyui.github.io/react-datagrid/#/，它是一个不错的网格，内置了许多功能
答案 4 :(得分：1)
还有http://allenfang.github.io/react-bootstrap-table 完全建立在Bootstrap表上。
答案 5 :(得分：0)
最好的网格可能是ag-Grid，但是行分组和子网格功能仅在免费的企业版中可用。
因此，我切换到制表器：Tabulator React。我在当前的实际项目中使用它。它提供了很好的功能，例如行分组和子网格。它是快速且完全免费的。它得到了积极维护，并为将来的改进制定了路线图。试试看，也许您会喜欢。
但是如果您仍然喜欢jqGrid，您仍然可以使用它。安装npm软件包：npm install free-jqgrid
这是我的代码：
import $ from './../../../node_modules/jquery/dist/jquery';
import "./../../../node_modules/free-jqgrid/js/i18n/grid.locale-en.js"
import * as jqGrid from "./../../../node_modules/free-jqgrid/js/jquery.jqGrid.min.js"
//import "./../../../node_modules/free-jqgrid/dist/css/ui-lightness/jquery-ui-1.7.1.custom.css"
import "./../../../node_modules/free-jqgrid/dist/css/ui.jqgrid.css"
jQuery.jgrid.no_legacy_api = true;
export default class MyJqGrid extends Component {
constructor(props) {
super(props);
this.mydata = [
{id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
{id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
}
componentDidMount() {
this.$el = $(this.el);
this.$el.jqGrid({
data: this.mydata,
datatype: "local",
height: 'auto',
rowNum: 30,
rowList: [10,20,30],
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
{name:'name',index:'name', width:100, editable:true},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number", editable:true},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable:true},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
pager: "#pagerdiv",
viewrecords: true,
sortname: 'name',
grouping:true,
groupingView : {
groupField : ['name']
},
caption: "Grouping Array Data"
});
}
componentWillUnmount() {
this.$el.empty();
}
render() {
return (
<>
<table ref={el => this.el = el}></table>
<div id="pagerdiv"></div>
</>
);
}
}