UI-GRID header - Change Color And Text

Question

I want to change the color and text of the angular ui-grid header.

I want the background of the header to be black and the text to be white.

I don't want gradient or shading. I just want it black.

What CSS do I need to add?

Solution 1

This is pretty simple. Just add a headerCellClass for each column with your css.

 $scope.gridOptions = {
    enableSorting: true,
    columnDefs: [
      { field: 'name', headerCellClass: 'white' },
      { field: 'company',headerCellClass:'white'}
    ],
    onRegisterApi: function( gridApi ) {
      $scope.gridApi = gridApi;
      $scope.gridApi.core.on.sortChanged( $scope, function( grid, sort ) {
        $scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
      })
    }
  };

here's a sample

http://plnkr.co/edit/DKi9nSMbI3PG1u8lcHDE?p=preview

Solution 2

I know this is already answered. But this css rule does the same job without the need of creating columDefs:

.ui-grid-top-panel {
    background: black;
    color: white;
}

Plunker

Solution 3

If you need to change the background color of all ui-grid header use the following in your CSS file.

.ui-grid-header-canvas{
    background-color: black;
}
.ui-grid-top-panel{
    color: white;
}

Otherwise, if you need to change the background color of specific ui-grid headers, then use headerCellClass attribute.

Comments

[President Camacho]

If I want to use color code like: #3A01DF how does that work? Simply replacing white with #3A01DF doesn't work.