How to wrap column header in ag-grid using angular
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 thetop
of the content area down as it is calculated by theheaderHeight
property... if undefined the default is25px
so thetop
for content area is also25px
. - 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