How to add class to column of grid with angular-ui-grid?

Question

I'm working with UI-GRID and have to add the custom CSS to the header of the grid, so I'm trying to add class to columns.

$scope.columns = [
{
  name: 'status',
    displayName: 'STATUS',
    width: 200,
    pinnedLeft: true,
    **cellClass : "gridColumnStyle"**
},
{
  name: 'serial',
  displayName: 'SERIAL#',
  width: 200,
  cellClass : "gridColumnStyle"
}, 
{
  name: 'product_name',
  displayName: 'PRODUCT NAME',
  width: 200,
  cellClass : "gridColumnStyle"
}
];

But it is not working. Please tell me how to add the class which have some custom style.

Gary · Accepted Answer · 2016-04-26 18:59:33Z

2

Try headerCellClass instead of cellClass. Like this

  $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';
          }
        }
  }]};

Also here is an example: http://ui-grid.info/docs/#/tutorial/115_headerCellClass and in case that ever moves here's a plunker: http://plnkr.co/edit/lmkJvXrxmGfzC342GXrO?p=preview

answered Apr 26, 2016 at 18:59

Gary

3,3142 gold badges30 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add class to column of grid with angular-ui-grid?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related