Adding CSS to each cell for a column in Slick grid

Question

Based on cell value, I want to apply a CSS class to that cell in slick grid.

I am using following code on the column

{
  id: 'deptType',
  name: 'Department Type',
  field: 'dept_type',
  sortable: true,
  formatter: function ( row, cell, value, columnDef, dataContext ) {
                  if(value === 'red'){
                      return '<div style="width:100%; padding:0; margin:0" class ="red">' + value + '</div>';
                  }
                  return '<div style="width:100%; padding:0; margin:0" class ="green">' + value + '</div>';
             }
}

Though this code is working. I wonder if there is a better approach to fix this?

Answer 1

Your code seems fine to me, you can more centralize styling and potentially improve CSS rendering speed using the following code, where you do not use HTML property style but class instead.

.red, .green {
width:100%;
padding:0;
margin:0;
}
.red {
color: red;
}
.green {
color: green;
}

{
  id: 'deptType',
  name: 'Department Type',
  field: 'dept_type',
  sortable: true,
  formatter: function ( row, cell, value, columnDef, dataContext ) {
                  if(value === 'red'){
                      return '<div class ="red">' + value + '</div>';
                  }
                  return '<div class ="green">' + value + '</div>';
             }
}