Ag-grid set column cell text to right for certain columns

Question

I am trying to set styling for a particular column header in my React Ag-grid app.

From reading the documentation I am using ag-theme-balham and I have created a new class in my css file:

.ag-theme-text-right {
    font-size: xx-large;
    color: red;
    text-align: right;
  }

I apply the class to a particular column using the headerClass.

{
   headerName: "Comic", field: "price", headerClass: 'ag-theme-text-right'
}

When I run the app, the font size and color styles are applied but the text is still left aligned.

From inspecting in my browser, the .ag-header-group-cell-label, .ag-header-cell-label overwrite the headerClass. Notably 'display: flex' is enforcing the text alignment. When I disable 'display: flex' the text-align in my class takes effect.

Is it possible to apply the styling by just passing a class in the headerClass? Or do I need to do something more advanced?

Answer 1

try below css in your code. the reason your custom style are getting overridden is because the ag-header-cell-label is more closer to the header text thus gets the preference due to css proximity rule. by defining the class like below this will only apply to those columns for which you have defined custom css class in col definition.

  .ag-theme-custom-text-right .ag-header-cell-label{
   background-color: teal;
   text-align: right;
   padding-right: 10px; // just to make sure that text doesn't go hit itself to next column border
   display: inline-grid;

}

column definition

   { field: 'country',
     headerClass : 'ag-theme-custom-text-right' },
     ....

here is a demo where i have added css to align the header text for country to the right.