title: ag-grid-react does not render properly
body: <p>Following the sample from the docs:
  <a href="https://www.ag-grid.com/best-react-data-grid/index.php" rel="noreferrer">https://www.ag-grid.com/best-react-data-grid/index.php</a></p>
  
  <p>After creating new react app (have tried several times on different machines)</p>
  
  <pre><code>create-react-app whatever
  </code></pre>
  
  <p>If I apply the stylesheets (ag-grid.css &amp; 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.</p>
  
  <p>Has anyone used this lately successfully with React?  Does anyone recommend something different?  (requirements: paging, sorting, filtering, selectable row(s)) </p>
  
  <p>thanks :-)</p>
  
  <pre><code>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 (
        &lt;div className="ag-fresh"&gt;
          &lt;AgGridReact
              columnDefs={this.state.columnDefs}
              rowData={this.state.rowData}
            rowSelection="multiple"
            enableColResize="true"
            enableSorting="true"
            enableFilter="true"
            groupHeaders="true"
            rowHeight="22"
            debug="true"
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>