ag-grid react表不显示？
ag-grid react表不显示？
提问于 2016-11-28 08:34:57
react和ag-grid的新手。我正在尝试在我的react项目中实现一个简单的ag-grid示例。当我运行项目时，网格不显示。没有控制台警告，只是网格不显示。
import React 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-material.css';
var headers = [{headerName: 'Name', field: 'name', width: 150, filter: 'text'},
{headerName: 'Last', field: 'last', width: 150, filter: 'text'}]
var data = [{name: 'bob', last:'dude'},
{name: 'will', last:'willdude'}]
export default class Accounts extends React.Component {
constructor() {
super();
this.state = {
showGrid: true,
columnDefs: headers,
rowData: data,
};
}
onGridReady(params) {
this.api = params.api;
this.columnApi = params.columnApi;
}
render() {
var gridTemplate;
gridTemplate = (
<div className="ag-material">
<AgGridReact
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}
onGridReady={this.onGridReady.bind(this)}
showGrid={this.state.showGrid}
/>
</div>
);
return (
<div style={{width: '800px'}}>
<p>I see this</p>
{gridTemplate}
</div>
)
}
}
回答 3
Stack Overflow用户
发布于 2016-12-05 09:57:45
好的，知道了，我们需要父分区的高度。
例如：
<div className="ag-material" style={{height: '500px'}}>
<AgGridReact
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}
onGridReady={this.onGridReady.bind(this)}
showGrid={this.state.showGrid}
/>
</div>Stack Overflow用户
发布于 2020-07-09 17:16:28
给出高度和宽度总是更好的，否则and表格将通过调整它来适应最小的内容。
<div className="ag-material" style={{height: 500, width: 500}}>
<AgGridReact
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}
onGridReady={this.onGridReady.bind(this)}
showGrid={this.state.showGrid}
/>
</div>Stack Overflow用户
发布于 2020-06-23 22:52:37
当网格没有渲染时，我看到了类似的问题。添加网格样式为我解决了这个问题。
import '../../node_modules/ag-grid/dist/styles/ag-grid.css';import '../../node_modules/ag-grid/dist/styles/theme-material.css';页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40835566
复制相关文章
相似问题
腾讯云开发者
