angularjs ng-grid: how to change header style

Question

How can I restyle the header of ng-grid? In particular how can I change the background-color and the text color of the header row?

Physical

May I ask why the -1? – Physical

Answer 1

You can override the background-color property on the .ngHeaderCell class declared in the ng-grid.css to use the background color you want on the header cells.

If you don't want to modify the original ng-grid css, you can create your own css and load it after ng-grid's css in which you can later overide the same .ngHeaderCell class with:

.ngHeaderCell {
    background-color: [your background color] !important;
    bottom: 0;
    color: [your foreground color] !important;
    position: absolute;
    top: 0;
}

Cookhouse

Thank you! My bad, I could not figure out which was the css class to modify. And I was trying to play around with headerCellTemplate. This worked perfectly. – Physical

You're welcome. Firebug and its equivalents always come in handy in these cases. You can inspect an element you want to check and there is a panel in which Firebug shows you which CSS rules are applied to that element and where those rules come from. – Cookhouse

I ended up overriding the background-color on the .ngTopPanel class – Physical

Answer 2

I haven't looked into ng-grid before, but looks like a css file is provided for styling? I would advise either changing the actual css file, or over-writing these changes by declaring your own below where the grid.css is declared. Check link if that is what you are talking about.

https://github.com/angular-ui/ng-grid/blob/master/ng-grid.css

For instance, one of the css attributes in the above file is below, just do a ctrl-f and find the attributes you are looking to change.

.ngHeaderCell {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: inherit;
 }

Faxun