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

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/

Answer 2

您可以使用此属性：

cellStyle: {textAlign: 'center'}

Answer 3

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

Answer 4

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 5

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.

Answer 6

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

text-center * {
    justifyContent: center
}

Answer 7

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

Answer 8

对于每个标题的（独立）自定义，您可以制作自定义标题组件： https : //www.ag-grid.com/javascript-grid-header-rendering/

Answer 9

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

Answer 10

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

Answer 11

It should be:

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

Answer 12

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

Answer 13

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

Answer 14

:host ::ng-deep .my-center-header-class .ag-header-cell-text {
    width: 100%;
    text-align: center;
}

Set headerClass as 'my-center-header-class' in colDef