How do I apply styling to sorted columns in Angular ui-grid?

Question

I have a ui-grid with some narrow columns and when I apply a sort to these columns, the little arrow that indicates the sort and its direction doesn't show. So I'd like to be able to style the column cells, or just the column header, according to the column sort status (asc, desc and none). Is this possible?

Here's an example screenshot showing three sorted columns (also note the menu icon is kind of broken, but that's another issue):

Answer 1

You can use the 'headerCellClass' option in your 'columnDefs'.

Documentation is here : http://ui-grid.info/docs/#/tutorial/115_headerCellClass

In your case it would be like :

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

Working Plunker is here : http://plnkr.co/edit/ifQlqkGAEdeELbMqozVE?p=preview