Intestazione UI-GRID - Cambia colore e testo

Question

Desidero modificare il colore e il testo dell'intestazione della griglia ui angolare.

Desidero che lo sfondo dell'intestazione sia nero e che il testo sia bianco.

Non voglio sfumature o ombreggiature. Lo voglio solo nero.

Quale CSS devo aggiungere?

Answer 1

Questo è piuttosto semplice. Basta aggiungere un headerCellClass per ogni colonna con il tuo 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); 
     }) 
    } 
    }; 

Ecco un esempio

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

Answer 2

So che questo è già una risposta. Ma questa regola CSS fa lo stesso lavoro, senza la necessità di creare columDefs:

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

Plunker

Answer 3

Se avete bisogno di cambiare il colore di tutto ui-grid header sfondo utilizzare il seguente nel file CSS.

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

In caso contrario, se è necessario modificare il colore di sfondo specifica ui-grid headers, quindi utilizzare l'attributo headerCellClass.