ag-grid reagiert macht nicht richtig

Question

Nach der Probe aus der Dokumentation: https://www.ag-grid.com/best-react-data-grid/index.php

Nach neuer App reagieren zu schaffen (habe auf verschiedene Maschinen mehrmals versucht)

create-react-app whatever 

Wenn ich die Anwendung Stylesheets (ag-grid.css & theme-fresh.css) alles, was gerendert wird, ist eine graue Linie auf der Seite. Bei jeder anderen Kombination wird eine leere Seite angezeigt. Das Entfernen von ag-grid.css rendert das Gitter, aber es ist überall durcheinandergewürfelt.

Hat jemand das kürzlich erfolgreich mit React verwendet? Empfiehlt jemand etwas anderes? (Anforderungen: Paging, Sortierung, Filterung, auswählbare Zeile (n))

dank :-)

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

Das äußere Gitter eine Höhe erforderlich :-(

Die Dokumentation ist dies nicht zeigen. nicht sicher, warum es keine min Standardhöhe für das Netz ist, aber es ist nicht

Answer 2

So im wesentlichen Sie so etwas wie dieses benötigen, wo das Gitter mit einem Element gewickelt ist, die eine Höhe hat.

<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;}