ag-grid反应表不显示?
Posted
技术标签:
【中文标题】ag-grid反应表不显示?【英文标题】:ag-grid react table not displaying? 【发布时间】:2017-04-11 15:49:54 【问题描述】:React 和 ag-grid 的新手。我正在尝试在我的反应项目中实现一个简单的 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>
)
【问题讨论】:
遇到同样的问题。有答案吗? 【参考方案1】:好的,我们需要父 div 的高度。
例如
<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>
【讨论】:
哇。浪费了 30 分钟寻找这个。【参考方案2】:提供高度和宽度总是更好,否则 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>
【讨论】:
【参考方案3】:当网格未呈现时,我看到了类似的问题。添加网格样式为我解决了这个问题。
import '../../node_modules/ag-grid/dist/styles/ag-grid.css';
import '../../node_modules/ag-grid/dist/styles/theme-material.css';
【讨论】:
以上是关于ag-grid反应表不显示?的主要内容,如果未能解决你的问题,请参考以下文章