How can I center the text in the headers for an AG-grid control?

user7400346 picture user7400346 · Sep 29, 2017 · Viewed 23.7k times · Source

How can I center the text in the headers for an AG-grid control? I have tried using cellstyle and cellclass in the column definition but that did not work. Thank you

Answer

Alex Wachira picture Alex Wachira · Sep 29, 2017

I'm using react and I just added the following snippet to my Table component's .css

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

I'm overriding the .css class class from ag-grid which I found via devtools inspection, and discovered it's using flexbox for display.

See example (not react but same concept): https://embed.plnkr.co/O3NI4WgHxkFiJCyacn0r/