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反应表不显示?的主要内容,如果未能解决你的问题,请参考以下文章

Angular Grid(ag-grid)显示/隐藏不起作用

ag-grid 以编程方式选择行不突出显示

AG-Grid - 显示排序图标而不重新加载数据

反应 ag-grid 行自动高度不起作用

角材料表不显示任何数据

数据透视表不显示小计