AG-Grid Column Headers stacked to left

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>

The table looks like: Ag-grid column header stacked to left

Thanks for posting! Currently the same in ag-grid-angular on version ag-grid 16.0.1 with ag-grid-angular 16.0.0. I thought I was doing something wrong. — Andrew Lobban
I’m working to figure that issue out myself. Planning on creating a simple app with ag-grid following the documentation. — Andrew Lobban
I think the class ag-theme-fresh should be added as an attribute of your <AgGridReact> element. — Andrew Lobban

Andrew Lobban Andrew Lobban · Accepted Answer · 2018-03-01T16:03:18

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.

See my sample Angular StackBlitz

AG-Grid Column Headers stacked to left

1 Answers