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

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/

You may use this property:

cellStyle: {textAlign: 'center'}

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

If you want to align your text right, left or center in ag-grid. Then use this:-

cellStyle: { textAlign: 'right' }
cellStyle: { textAlign: 'left' } 
cellStyle: { textAlign: 'center' }

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',
    // Add the following if you are using .ag-header-cell-menu-button 
    // and column borders are set to none.
    // marginLeft: '-16px'
  }
}

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

To use a custom class, add headerClass: "text-center" to the column definition and css as follows:

text-center * {
    justifyContent: center
}

I'm using Angular 8 and AG-Grid is nested deep in some other component.

I had to do this in order to make it work.

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

And, this strictly needs to be under styles.scss file and not in the component scss file. Or else, it will not work.

Hope this helps someone.

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

It should be:

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

My CSS:

/*HEADER STYLE*/
        .ag-theme-alpine .ag-header-cell {
            padding-left: 10px;
            padding-right: 10px;
        }
        
        .ag-right-header .ag-header-cell-label {
             flex-direction: row-reverse;
        }
    
        .ag-center-header .ag-header-cell-label {
            justify-content: center;
        }

        .ag-left-header .ag-header-cell-label {
            flex-direction: row;
        }

        .ag-center-cell {
            text-align: center;
        }

        .ag-right-cell {
            text-align: right;
        }

        .ag-left-cell {
            text-align: left;
        }

And use inside columnDefs:

{
                headerName: 'header_name',
                field: 'header_field',
                headerClass: "ag-center-header",
                cellClass: "ag-center-cell"
            }

I'm using angular and I just want to center text in the grouped header so use this code to style.css

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

you can do this by overriding the css like:-

    ::ng-deep .ag-header-group-cell-label {
      justify-content: center !important;
    }
    
    ::ng-deep .ag-header-cell-label {
      justify-content: center !important;
    }

Thanks

columndef has a property. headerClass: '', you can add css to header