web-dev-qa-db-fra.com

Comment puis-je centrer le texte dans les en-têtes d'un contrôle AG-grid?

Comment puis-je centrer le texte dans les en-têtes d'un contrôle AG-grid? J'ai essayé d'utiliser cellstyle et cellclass dans la définition de colonne, mais cela n'a pas fonctionné. Je vous remercie

javascriptcssreactjsag-gridag-grid-react
10
user7400346

J'utilise react et je viens d'ajouter l'extrait suivant au composant .css De mon composant Table

.ag-header-cell-label {
   justify-content: center;
}

Je remplace la classe de classe .css De ag-grid Que j'ai trouvée via l'inspection devtools, et j'ai découvert qu'elle utilise flexbox pour l'affichage).

Voir l'exemple (pas réagir mais même concept): https://embed.plnkr.co/O3NI4WgHxkFiJCyacn0r/

12
Alex Wachira

Vous pouvez utiliser cette propriété:

cellStyle: {textAlign: 'center'}
7
Maharramoff

Si vous souhaitez aligner votre texte à droite, à gauche ou au centre dans une grille ag. Ensuite, utilisez ceci: -

cellStyle: { textAlign: 'right' }
cellStyle: { textAlign: 'left' } 
cellStyle: { textAlign: 'center' }
1
akash mishra

Attribuez une classe à la cellule comme ci-dessous:

gridOptions = {
  ...
  columnDefs: [
    ...
        { headerName: "field1", field: "field1", cellClass: "grid-cell-centered"}
    ...
  ]
}

fichier css:

.grid-cell-centered {
  text-align: center;
}
1
ZooZ

Ça devrait être:

.ag-header-cell-label {
  text-align: center;
}
0
PHAM Cong Cuong

Pour la personnalisation (indépendante) de chaque en-tête, vous pouvez créer un composant d'en-tête personnalisé: https://www.ag-grid.com/javascript-grid-header-rendering/

0
Alex Pandrea