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

Question

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 1

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;
}

Answer 2

For (independent) customization of each header, you can make a custom header component: https://www.ag-grid.com/javascript-grid-header-rendering/

Answer 3

A more complete solution I've been using for a while now, is to create a column definition helper like this:

export const columnCentered = {
  headerClass: 'text-center',
  cellStyle: {
    textAlign: 'center'
  }
}

then add the following to your style.scss

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

finally you can easily use it like this:

columnDefs: [
  { field: 'normalCol' },
  { field: 'centeredColA' ...columnCentered },
  { field: 'centeredColB' ...columnCentered }
]