ag-grid - 无法显示 ag-grid

Question

我有一个基本的 ag-grid 和一些简单的虚拟数据，但它只在我不导入库提供的 .css 文件时显示，即使这样它也显示不正确。

摘 self 的 package.json:

"ag-grid": "10.0.1",
"ag-grid-react": "10.0.0",
"react": "15.4.2"

来 self 的 React 组件:构造函数:

this.state = { columnDefs: [{headerName: 'Product', field: 'product'},{headerName: 'Country', field: 'country'}], rowData: [{product: 'IOL', country: 'US'}, {product: 'Suture', country: 'IN'}]}

从渲染():

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 后，无论我是否为网格分配了主题，都没有任何显示。

Answer 1

我有一个类似的问题，数据行没有显示，只是分页。设置固定的 div 高度可以使行显示，但是将 domLayout: 'autoHeight' 添加到 gridOptions 意味着它始终是正确显示的正确高度。