web-dev-qa-db-fra.com

comment charger un en-tête dans ag-grid

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 ...

ag-grid
14
pete r

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
17
Stian Sandve

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.

2
Andrew Eisenberg

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",
1
JordanBarber

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();
            }
        };
0
Alex Pandrea