根据文档中的示例:
<Import Project="..\..\Common.props">
创建新的反应应用程序(已在不同的计算机上多次尝试)
create-react-app whatever
如果我应用样式表(ag-grid.css&amp; 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;
答案 0 :(得分:8)
外部网格需要一个高度: - (
文档未显示此内容。不知道为什么网格没有最小默认高度,但没有。
答案 1 :(得分:1)
所以基本上你需要这样的东西,其中网格用一个高度为
的元素包裹
<div className="ag-fresh">
<div className="grid_height_fix">
<AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.data.gridDate} >
</AgGridReact>
</div>
</div>
.grid_height_fix {height:800px;}