AG-グリッド-反応は、ドキュメントからのサンプルに続いて、適切

Question

をレンダリングしていない：私は適用された場合は、新規に作成した後 https://www.ag-grid.com/best-react-data-grid/index.php

アプリ（異なるマシン上で何度か試してみました）

create-react-app whatever 

を反応させますスタイルシート（ag-grid.css & theme-fresh.css）はレンダリングされるすべてがページの灰色の線です。他の組み合わせでは、空白のページがレンダリングされます。 ag-grid.cssを削除すると、グリッドがレンダリングされますが、グリッドが混乱してしまいます。

最近Reactでこれを使用した人はいますか？誰かが何か違うことをお勧めしますか（要件：ページング、ソート、フィルタリング、選択行（複数可））

import React, { Component } 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-fresh.css'; 

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     columnDefs: [ 
     {headerName: 'First Name', field: 'name' }, 
     {headerName: 'Last Name', field: 'lname' } 
     ], 
     rowData: [ 
     { name: 'Dave', lname: 'Smith' }, 
     { name: 'Tommy', lname: 'Smith' }, 
     { name: 'Lea', lname: 'Jones' } 
     ] 
    } 
    } 
    render() { 
    return (
     <div className="ag-fresh"> 
     <AgGridReact 
      columnDefs={this.state.columnDefs} 
      rowData={this.state.rowData} 
      rowSelection="multiple" 
      enableColResize="true" 
      enableSorting="true" 
      enableFilter="true" 
      groupHeaders="true" 
      rowHeight="22" 
      debug="true" 
     /> 
     </div> 
    ); 
    } 
} 

export default App; 

Answer 1

:-)

おかげ外側グリッドは、ドキュメントがこれを示していない

:-(高さを必要としました。グリッドには分のデフォルトの高さがありませんが、そこではない理由がわからない

Answer 2

だから、基本的にあなたがグリッドは、高さを持つ要素でラップされ、このようなもの、必要があります。

を

<div className="ag-fresh"> 
 
    <div className="grid_height_fix"> 
 
    <AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.data.gridDate} > 
 
    </AgGridReact> 
 
    </div> 
 
</div>

.grid_height_fix {height:800px;}