遵循文档中的示例:https://www.ag-grid.com/best-react-data-grid/index.php
创建新的react应用程序后(已在不同的机器上尝试了几次)
create-react-app whatever
如果我应用样式表(ag-grid.css和theme-fresh.css),那么呈现的只是一条灰线,其他任何组合都呈现一个空白页面,删除ag-grid.css会呈现网格,但是网格会变得乱七八糟。
最近有人在React中成功使用过这个吗?有人推荐其他的吗?(要求:分页、排序、筛选、可选行)
谢谢:-)
import React, { Component } from 'react';
import {AgGridReact} from 'ag-grid-react';
import '../node_modules/ag-grid/dist/styles/ag-grid.css';
import '../node_modules/ag-grid/dist/styles/theme-fresh.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
columnDefs: [
{headerName: 'First Name', field: 'name' },
{headerName: 'Last Name', field: 'lname' }
],
rowData: [
{ name: 'Dave', lname: 'Smith' },
{ name: 'Tommy', lname: 'Smith' },
{ name: 'Lea', lname: 'Jones' }
]
}
}
render() {
return (
<div className="ag-fresh">
<AgGridReact
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}
rowSelection="multiple"
enableColResize="true"
enableSorting="true"
enableFilter="true"
groupHeaders="true"
rowHeight="22"
debug="true"
/>
</div>
);
}
}
export default App;
3条答案
按热度按时间anhgbhbe1#
外部网格需要高度:-(
文档没有显示这一点。不确定为什么网格没有最小默认高度,但是没有。
eimct9ow2#
所以基本上你需要这样的东西,网格被一个有高度的元素包裹着:
qv7cva1a3#
新的更好的方法来做到这一点:
这样你可以更好地控制尺寸。