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?

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;
}

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;
 }