2016-11-28 25 views
0

反応してag-gridするのが新しいです。私は、私の反応プロジェクトで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> 
    ) 
    } 
} 

This is what I see when I run this

+0

同じ問題があります。答えは? – Ryo

答えて

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> 
関連する問題