CODEWITHSUNDEEP
angularjssortingstylingangular-ui-grid
Charles Roper
Charles Roper

Reputation: 20625

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

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):

Three columns sorted

Upvotes: 1

Views: 1349

Answers (1)

odupont
odupont

Reputation: 1976

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

Upvotes: 2

Related Questions