Cómo envolver el encabezado de columna en ag-grid usando angular

Solución:

Revise el siguiente ejemplo de stackblitz.

En la hoja de estilo global apliqué lo siguiente … podrías usar ::ng-deep en su componente css, este es el primer stackblitz que pude encontrar con ag-grid a la bifurcación y no es mío, por lo que no había ningún componente css para usar.

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

La siguiente pieza es usar la propiedad. headerHeight

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

Desafortunadamente, esta parte es inevitable … tampoco le permite hacer que la altura del encabezado sea dinámica según los requisitos de ajuste de palabras.

• La razón es que el área de contenido se define con top estilo dinámicamente cuando se renderiza la vista; ajustar la altura del cabezal mediante ::ng-deep no cambiará dinámicamente el top del área de contenido hacia abajo, ya que es calculado por el
  headerHeight propiedad … si no está definida, el valor predeterminado es 25px entonces el top para el área de contenido también 25px.
• Sin mencionar que el índice Z del área de contenido hace que se superponga al encabezado cuando cambia la altura con ::ng-deep.. entonces no sabes si ::ng-deep realmente funcionó … visualmente es decir … ya que el encabezado se extiende debajo del área de contenido.

Lamento decirlo, pero esto será lo más cerca posible … ajustando todos los elementos, moviendo hacia abajo el top etc basado en una altura dinámica del encabezado a través de la manipulación del DOM, me temo que se pondrá demasiado feo … y si necesita la altura dinámica del encabezado hasta el punto, esto es un impedimento para el espectáculo … puede ser mejor explorar otras opciones como reemplazo para ag-grid.

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

---

---

Utiliza Nuestro Buscador