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

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

javascriptcssreactjsag-gridag-grid-react


Solution 1:[1]

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/

Solution 2:[2]

You may use this property:

cellStyle: {textAlign: 'center'}

Solution 3:[3]

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

Solution 4:[4]

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

Solution 5:[5]

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

Solution 6:[6]

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

text-center * {
    justifyContent: center
}

Solution 7:[7]

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.

Solution 8:[8]

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

Solution 9:[9]

It should be: 

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

Solution 10:[10]

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

Solution 11:[11]

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

Solution 12:[12]

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

Solution 13:[13]

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

Related Questions