CODEWITHSUNDEEP
ag-gridag-grid-react
Byofuel
Byofuel

Reputation: 397

Can't get ag-grid to display

I have a basic ag-grid with some simple dummy data, but it only displays when I don't import the .css files provided with the library, and even then it displays incorrectly.

Excerpted from my package.json:

"ag-grid": "10.0.1",
"ag-grid-react": "10.0.0",
"react": "15.4.2"

From my React component: constructor:

this.state = { columnDefs: [{headerName: 'Product', field: 'product'},{headerName: 'Country', field: 'country'}], rowData: [{product: 'IOL', country: 'US'}, {product: 'Suture', country: 'IN'}]}

from render():

return (
        <div id='grid'>
            {/*<div id='grid' className='ag-fresh'>*/}
            <div>
                Here's the grid...
            </div>
            <AgGridReact

                // listen for events with React callbacks
                onGridReady={this.onGridReady.bind(this)}
                // onRowSelected={this.onRowSelected.bind(this)}
                // onCellClicked={this.onCellClicked.bind(this)}

                // binding to properties within React State or Props
                showToolPanel={this.state.showToolPanel}
                quickFilterText={this.state.quickFilterText}
                icons={this.state.icons}

                // column definitions and row data are immutable, the grid
                // will update when these lists change
                columnDefs={this.state.columnDefs}
                rowData={this.state.rowData}

                // or provide props the old way with no binding
                rowSelection="multiple"
                enableSorting="true"
                enableFilter="true"
                rowHeight="22"
            />
        </div>)

If I run this code without importing any .css I get a jumbled grid like: enter image description here

Now if I import the css per the getting started guide:

import 'ag-grid-root/dist/styles/ag-grid.css'  // see webpack config for alias of 'ag-grid-root'
import 'ag-grid-root/dist/styles/theme-fresh.css'

... then no part of the grid displays (only my div before the grid). With the css imported, it doesn't matter if I have assigned a theme to the grid or not, nothing shows.

Upvotes: 3

Views: 5048

Answers (1)

Jeff-555
Jeff-555

Reputation: 31

I had a similar problem with the rows of data not showing, just the pagination. Setting a fixed div height worked to make the rows display, but adding domLayout: 'autoHeight' to the gridOptions means its always the right height to display correctly.

Upvotes: 3

Related Questions