[英]ag-grid react table not displaying?
New to react and ag-grid.新反应和 ag-grid。 I'm trying to implement a trivial example of ag-grid in my react project.我正在尝试在我的反应项目中实现一个简单的 ag-grid 示例。 When I run the project, the grid doesn't display.当我运行项目时,网格不显示。 No console warnings, just the grid doesn't display.没有控制台警告,只是不显示网格。
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>
)
}
}
Okay got it, we need height on the parent div.好的,我们需要父 div 的高度。
eg例如
<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>
its always better to give height and width otherwise ag-grid table will render by adjusting it to fit min content.给出高度和宽度总是更好,否则 ag-grid 表格将通过调整它以适应最小内容来呈现。
<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>
I was seeing a similar issue when the grid was not rendering.当网格未呈现时,我看到了类似的问题。 Adding the grid styles fixed the problem for me.添加网格样式为我解决了这个问题。
import '../../node_modules/ag-grid/dist/styles/ag-grid.css';
import '../../node_modules/ag-grid/dist/styles/theme-material.css';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.