how to wordwrap a header in ag-grid

Question

Using ag-grid, is there a way to split a long header across 2 rows...

A break in the columnDefs headerName: 'Long<br />Header' gets me part way there (using dev tools I can see the text has the br), however one of the surrounding elements has a height of 25px; <div class="ag-header" style="height: 25px;"> which I think causes the second line of the header to not be displayed.

I wondered about using group headers as an interim to get the text split, but longer term (when I need to group) that won't be an option...

Answer 1

Try to add the following to your CSS:

.ag-header-cell-label {
    text-overflow: clip;
    overflow: visible;
    white-space: normal;
}

and add this to your grid options:

headerHeight: 48

Answer 2

Using ag-grid@15.0.0, only the following solution worked:

.ag-header-cell-label .ag-header-cell-text {
  white-space: normal !important;
}

This is one of the first times in my work with css that I have ever really needed to use !important.

Answer 3

For me, using the combination of angular@5.5.1 and ag-grid@13.3.1, the following worked:

::ng-deep .ag-header-cell-text {            
    text-overflow: clip !important;
    overflow: visible !important;
    white-space: normal !important;
}

::ng-deep is an Angular CSS combinator (directive). This is based on Stian's answer with the difference that in my case, instead of .ag-header-cell-label, it worked only with .ag-header-cell-text.

In the grid options object you must set the header height:

this.testGridOptions = <GridOptions>{
            onGridReady: () => {
                this.testGridOptions.api.setHeaderHeight(75);
                this.testGridOptions.api.sizeColumnsToFit();
            }
        };

Answer 4

For me, none of the above solutions worked. What did work for me was to set the headerHeight (in GridOptions) to your specified height and then add the following:

.ag-header-cell-text {
   overflow: visible;
   text-overflow: unset;
   white-space: normal;
}

In my case, I did not need to add anything to .ag-header-cell wrapper class.

I am using the following versions:

"ag-grid-angular": "18.1.0",
"ag-grid-enterprise": "18.1.1",