ag-grid : How to set custom background color in column header?

Question

I'm using ag-grid with Angular 4. I want to be able to change the background color of individual column headers during runtime.

It seems that I have to use headerComponentFramework property in coldefs, but I have no idea how to use this. Anybody has an idea?

regards, Alex

Answer 1

If using Sass then setting the header-background-color theme parameter should work.

The example below assumes you are using the alpine theme.

@import "~ag-grid-community/src/styles/ag-grid.scss";
@import "~ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin";

.ag-theme-alpine {
    @include ag-theme-alpine((
        header-background-color: deeppink
    ));
}

https://www.ag-grid.com/javascript-grid-themes-customising/#setting-parameters-using-sass

Answer 2

If you have a predefined set of colors for the header, I would use the headerClass option:

defaultColDef: {
  headerClass: function(params) {
    // logic to return the correct class
    return 'header-one';
  }
}

Then in css use the background-color property:

.header_one {
  background-color: red;
}

See the following example where clicking on a cell changes the header color:

https://stackblitz.com/edit/ag-grid-header-color-dynamic?file=index.js