How to wrap column header in ag-grid using angular

Question

I have some columns which has four words i.e Pre Trading Follow Up, Post Trading Follow Up and some of them having three words. I tried the below css to wrap the text to multiple lines.

::ng-deep .ag-theme-material .ag-header-cell-label .ag-header-cell-text{
  white-space: normal;
  overflow-wrap: break-word;
}

HTML

<ag-grid-angular class="ag-theme-material" [rowData]="rowData" [columnDefs]="columnDefs" [overlayLoadingTemplate]="overlayLoadingTemplate" [domLayout]="domLayout" [enableSorting]="true" (gridReady)="onGridReady($event)" (gridOptions)="gridOptions" >
  </ag-grid-angular>

but the column header remains the same. I wanted to wrap the column header text to multiple lines. Is there anyway to do this?

Note: I can able to wrap the content using cellStyle: {'white-space': 'normal'}

{headerName: 'headername', field: 'headerfield', autoHeight:true, width: 100, cellStyle: {'white-space': 'normal'}},

But I wanted to wrap the header.

Synapse

Answer 1

Please review the following stackblitz example.

https://stackblitz.com/edit/angular-ag-grid-angular-xmbm3p?embed=1&file=styles.css

In the global style sheet I applied the following... you could use ::ng-deep in your component css, this is the first stackblitz I could find with ag-grid to fork and is not mine so there was no component css to use.

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

The next piece is to use property headerHeight

this.gridOptions = <GridOptions>{
          headerHeight:75,

This part unfortunately is unavoidable... it also doesn't allow for you to make the header height dynamic based on the word wrap requirements.

• The reason why is that the content area is defined with top style dynamically when the view is rendered; adjusting the header height via ::ng-deep will not dynamically shift the top of the content area down as it is calculated by the headerHeight property... if undefined the default is 25px so the top for content area is also 25px.
• Not to mention that the z-index of the content area causes it to overlap the header when you change the height with ::ng-deep.. so you don't know if ::ng-deep truly worked... visually that is... as the header extends under the content area.

Sorry to say but this will be as close as you can get... adjusting all elements, shifting down the top etc based on a dynamic header height via DOM manipulation I fear will just get too ugly... and if you need the header height dynamic to the point this is a show stopper... it may be best to explore other options as a replacement to ag-grid.

https://www.ag-grid.com/javascript-grid-column-header/#headerHeight

Mcarthur

Answer 2

To achieve expected result , use below option of using line break tag - br in column definitions for that specific column headerName

{headerName: 'Pre<br>Trading<br> Follow<br> Up', field: 'headerfield', autoHeight:true, width: 100, cellStyle: {'white-space': 'normal'}}

Creuse

HTML inside of headerName doesn't work with the latest versions of ag-grid – Flattie

Answer 3

Angular has encapsulation.

But ag-grid doesn't care encapsulation. so we need to set .ag-header-cell-label and .ag-header-cell-text globally.

We set ViewEncapsulation.None at Component property and write css or scss, this can set css globally.

Global css is applied all ag-grid component. If you want to set .ag-header-cell-label and .ag-header-cell-text only one ag-grid component, set headerClass at gridOptions

this.gridOptions = {
  defaultColDef: {
    headerClass: 'myfunc-default-header'
  },
  headerHeight:75
};

And write scss file like this.

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

this can only apply .ag-header-cell-label and .ag-header-cell-text inside the my-func-deafult-header.
So we can apply only one ag-grid component.

Fight