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

回答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/

回答2:

You may use this property:

cellStyle: {textAlign: 'center'}

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

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

回答5:

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

回答6:

It should be:

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

来源：https://stackoverflow.com/questions/46490177/how-can-i-center-the-text-in-the-headers-for-an-ag-grid-control