Adding a class to the first column of each row with rowTemplate? - angular-ui-grid

Question

As the title says, I am trying to add a class to the first column of each row (where the select box is). I am using a rowTemplate in my gridOptions.
This is the code:
let rowTemplate = () => {
return $timeout(function() {
$scope.waiting = 'Done!';
$interval.cancel(sec);
$scope.wait = '';
return '<div ng-if="grid.appScope.rowFormatter( row ) == \'lowImportance\' " ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell green-importance" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div>' +
'<div ng-if="grid.appScope.rowFormatter( row ) == \'medImportance\' " ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell yellow-importance" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div>' +
'<div ng-if="grid.appScope.rowFormatter( row ) == \'highImportance\' " ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell red-importance" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div>' ;
}, 100);
}
The issue is, obviously, the code runs on each iteration of a cell. The reason I have not created a column an simply colored it (which is what I want to do), is because I need the color to be on the left side of the selection box (or circle). See attached image...
^ only want on col[0]
Here is the css I am using to achieve what I have done.
.green-importance {
position: relative;
}
.green-importance::before {
position:absolute;
z-index:11;
top:0;
left:0;
width:10px;
height:100%;
content:"";
background-color:red;
}

Answer 1

Instead of using a custom row template, you can use cell class of ui-grid. Here you have a plunker: http://plnkr.co/edit/cVs1NRANRGN5MiYX3XCo?p=preview
vm.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'name', cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
return 'green-importance';
}
},
{ field: 'company'
}
]
};