115_headerCellClass.ngdoc

@ngdoc overview
@name Tutorial: 115 HeaderCellClass
@description

A class name or function returning a class name can be assigned to each columnDef.

In this example, we will set the font color of header column 0 to blue, and conditionally
set the background and foreground color of the header if the sort direction is ASC

For better performance with the following example, you can choose to load the ui-grid.core.js file instead:
<pre>
  <script src="/release/ui-grid.core.min.js"></script>
</pre>

<example module="app">
  <file name="app.js">
    var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

    app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
      $scope.gridOptions = {
        enableSorting: true,
        columnDefs: [
          { field: 'name', headerCellClass: 'blue' },
          { field: 'company',
            headerCellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
              if (col.sort.direction === uiGridConstants.ASC) {
                return 'red';
              }
            }
          }
        ],
        onRegisterApi: function( gridApi ) {
          $scope.gridApi = gridApi;
          $scope.gridApi.core.on.sortChanged( $scope, function( grid, sort ) {
            $scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
          })
        }
      };

      $http.get('/data/100.json')
        .then(function(response) {
          $scope.gridOptions.data = response.data;
        });
    }]);
  </file>
  <file name="index.html">
    <div ng-controller="MainCtrl">
      <br>
      <br>
      <div id="grid1" ui-grid="gridOptions" class="grid"></div>
    </div>
  </file>
  <file name="main.css">
    .grid {
      width: 500px;
      height: 200px;
    }
    .red { color: red;  background-color: yellow !important; }
    .blue { color: blue;  }
  </file>
  <file name="scenario.js">
    var gridTestUtils = require('../../test/e2e/gridTestUtils.spec.js');

    describe( '115 header cell class', function() {
      xit('grid should have two visible columns', function () {
        gridTestUtils.expectHeaderColumnCount( 'grid1', 2 );
      });

      xit('cell classes', function () {
        // blue for header 0
        expect( gridTestUtils.headerCell( 'grid1', 0 ).getCssValue('color')).toEqual('rgba(0, 0, 255, 1)');

        // header 2 starts with no coloring, but colors when sort is ASC
        expect( gridTestUtils.headerCell( 'grid1', 1 ).getCssValue('color')).toEqual('rgba(44, 62, 80, 1)', 'normal foreground');

        gridTestUtils.clickHeaderCell( 'grid1', 1 );
        expect( gridTestUtils.headerCell( 'grid1', 1 ).getCssValue('color')).toEqual('rgba(255, 0, 0, 1)', 'red highlight');

      });
    });
  </file>
</example>