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

javascript css reactjs ag-grid ag-grid-react

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.

javascript css reactjs ag-grid ag-grid-react

You may use this property:

cellStyle: {textAlign: 'center'}

javascript css reactjs ag-grid ag-grid-react

Assign a class to the cell as below:

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

css file:

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

CodeHunter