我有一个带有一些简单虚拟数据的基本ag-grid,但它只在我不导入随库提供的.css文件时显示,即使这样也显示不正确。
摘自我的package.json:
"ag-grid": "10.0.1",
"ag-grid-react": "10.0.0",
"react": "15.4.2"
来自我的React组件: 构造:
this.state = { columnDefs: [{headerName: 'Product', field: 'product'},{headerName: 'Country', field: 'country'}], rowData: [{product: 'IOL', country: 'US'}, {product: 'Suture', country: 'IN'}]}
来自render()的:
return (
<div id='grid'>
{/*<div id='grid' className='ag-fresh'>*/}
<div>
Here's the grid...
</div>
<AgGridReact
// listen for events with React callbacks
onGridReady={this.onGridReady.bind(this)}
// onRowSelected={this.onRowSelected.bind(this)}
// onCellClicked={this.onCellClicked.bind(this)}
// binding to properties within React State or Props
showToolPanel={this.state.showToolPanel}
quickFilterText={this.state.quickFilterText}
icons={this.state.icons}
// column definitions and row data are immutable, the grid
// will update when these lists change
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}
// or provide props the old way with no binding
rowSelection="multiple"
enableSorting="true"
enableFilter="true"
rowHeight="22"
/>
</div>)
如果我在不导入任何.css的情况下运行此代码,我会得到一个混乱的网格:
现在,如果我按照入门指南导入css:
import 'ag-grid-root/dist/styles/ag-grid.css' // see webpack config for alias of 'ag-grid-root'
import 'ag-grid-root/dist/styles/theme-fresh.css'
...然后没有网格的任何部分显示(只有网格前的div)。使用css导入,如果我已经为网格分配了一个主题并不重要,没有任何显示。
答案 0 :(得分:0)
我有类似的问题,只是分页而不显示数据行。设置固定的div高度可以使行显示,但是将domLayout: 'autoHeight'
添加到gridOptions意味着其始终正确显示正确的高度。