如何在 Ag-Grid 中仅指定一个 header 的样式？

Question

I would like to specify the Header style of just one column on my grid. I know how to configure the Header style for all columns of a specific grid. For that it's necessary to add on "styles:scss" file the following:

Example:

#IdOfGrid .ag-header-cell-label {
justify-content: left;} 

How can I apply this style for just one column header?

Thank you!

Answer 1

As per https://www.ag-grid.com/javascript-grid-column-properties/

You can add headerClass property to your column properties and add css for that class it applies only for that column header

Answer 2

Have a CSS class in headerClass property inside columnDefs like this:

columnDefs = [
{
  headerName: "Table Name",
  headerClass: "table-header",
  field: "tableName"
},
 .
 .
 .
]

In css, use ::ng-deep along with another component/class names if your ag-grid-angular component is wrapped inside different elements. In my case, I got the style like this:

::ng-deep .main-wrapper app-custom-grid ag-grid-angular .table-header {
  background-color: blue;
}

Answer 3

To set column basic style, just give:

headerName: 'Title Here',
field:'title',
styleCss: { background: '#eee'; 'font-size': '15px' }

If you want to give style on some condition, then you need a external func, and call it inside column definition, as follows:

constructor(){
  this.gridOptions = {

    getRowStyle: (params: any) => {
      if (params.data){
        if(params.data.flag) {
          return { background: '#eee', 'font-weight': 750 };
        }
      }
    }
  }// end of gridoptions
}// end of constructor

For more detail, look deeply on my another answer: https://stackoverflow.com/a/61236065/7118138