reactjs - AG-Grid Column Headers stacked to left


Keywords:reactjs 


Question: 

I am using ag-grid react and when rendering table. I am getting column headers stacked to left.

The CSS provided are:

<div style={{ width: '100%', height: "100vh", marginTop: '5%'}}>
                <div           
                    style={{
                    boxSizing: "border-box",
                    height: "100vh",
                    width: "100%"
                }}
                className="ag-theme-fresh"
                >
                    <AgGridReact
                        id="myGrid"
                        columnDefs={this.columnDef}
                        defaultColDef={this.defaultColDef}
                        onGridReady={this.onGridReady.bind(this)}
                    />
                    
                </div>
</div>

1 Answer: 

So I figured it out for my Angular project. So what they forgot to mention in their simple Getting Started documentation is that you need to import the styles:

// .angular-cli.json
"styles": [
    "../node_modules/ag-grid/dist/styles/ag-grid.css",
    "../node_modules/ag-grid/dist/styles/ag-theme-fresh.css"
],

So I would suggest figuring out where to import the styles in your react app.

enter image description here

See my sample Angular StackBlitz