En utilisant ag-grid, existe-t-il un moyen de scinder un long en-tête sur 2 lignes ...
Une rupture dans la columnDefs headerName: 'Long<br />Header'
Me fait en partie le chemin (en utilisant les outils de développement, je vois que le texte a le br), mais l'un des éléments environnants a une hauteur de 25px; <div class="ag-header" style="height: 25px;">
qui, je pense, fait que la deuxième ligne de l'en-tête ne soit pas affichée.
Je me demandais si les en-têtes de groupe étaient utilisés provisoirement pour scinder le texte, mais un terme plus long (lorsque j'ai besoin de grouper) ne serait pas une option ...
Essayez d'ajouter ce qui suit à votre CSS:
.ag-header-cell-label {
text-overflow: clip;
overflow: visible;
white-space: normal;
}
et ajoutez ceci à vos options de grille:
headerHeight: 48
Avec [email protected], seule la solution suivante a fonctionné:
.ag-header-cell-label .ag-header-cell-text {
white-space: normal !important;
}
C'est l'une des premières fois dans mon travail avec css que j'ai vraiment eu besoin d'utiliser !important
.
Pour moi, aucune des solutions ci-dessus n'a fonctionné. Ce qui a fonctionné pour moi a été de définir headerHeight (dans GridOptions) à la hauteur spécifiée, puis d'ajouter les éléments suivants:
.ag-header-cell-text {
overflow: visible;
text-overflow: unset;
white-space: normal;
}
Dans mon cas, je n'ai rien eu à ajouter à la classe wrapper .ag-header-cell
.
J'utilise les versions suivantes:
"ag-grid-angular": "18.1.0",
"ag-grid-enterprise": "18.1.1",
Pour moi, en utilisant la combinaison de [email protected]
et [email protected]
, ce qui suit a fonctionné:
::ng-deep .ag-header-cell-text {
text-overflow: clip !important;
overflow: visible !important;
white-space: normal !important;
}
:: ng-deep est un combinateur (directive) Angular CSS. Ceci est basé sur la réponse de Stian avec la différence que dans mon cas, au lieu de .ag-header-cell-label
, cela ne fonctionnait qu'avec .ag-header-cell-text
.
Dans l'objet Options de la grille, vous devez définir la hauteur de l'en-tête:
this.testGridOptions = <GridOptions>{
onGridReady: () => {
this.testGridOptions.api.setHeaderHeight(75);
this.testGridOptions.api.sizeColumnsToFit();
}
};