ag-grid-react does not render properly - reactjs

Question

Following the sample from the docs:
https://www.ag-grid.com/best-react-data-grid/index.php
After creating new react app (have tried several times on different machines)
create-react-app whatever
If I apply the stylesheets (ag-grid.css & theme-fresh.css) all that is rendered is a gray line across the page. Any other combination renders a blank page. Removing ag-grid.css renders the grid but its jumbled all over the place.
Has anyone used this lately successfully with React? Does anyone recommend something different? (requirements: paging, sorting, filtering, selectable row(s))
thanks :-)
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

The outer grid required a height :-(
The documentation does not show this. Not sure why there is no min default height for the grid, but there is not.

Answer 2

So essentially you need something like this, where the grid is wrapped with an element which has a height:
<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;}

Answer 3

The new and better way to do this :
const GridExample = () => {
// I use 100% because I set the height of the higher element manually, you can set something like 500px for the height here instead, or calculate it based on the screen size
const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
const gridStyle = useMemo(() => ({ height: '100%', width: '100%' }), []);
return (
<div style={containerStyle}>
<div style={gridStyle} className="ag-theme-alpine">
<AgGridReact
...
></AgGridReact>
</div>
</div>
);
};
this way you have better controle over the dimensions.