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

Answer 3

Here is a plunker that demonstrates a header component like what you want. I took it from the examples on the docs for ag-grid. Take a look mostly at header.component.html, that's where the magic is at.

I think the only confusing part would be when you create the HeaderComponent:

export class HeaderComponent implements IHeaderAngularComp {
    public color: string = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
    public params: MyParams;
    private elementRef: ElementRef;

    ...

    //You will need to get the params from agInit so that you can access
    //the value for each column

    agInit(params: MyParams): void {
        this.params = params;
    }
}

Please check on their docs for more explanation, they get better every day