Cells styling

FancyGrid has universal render method in columns.
Over render method, it is possible to do styling cells with proving css styles, set cells classnames, change text of cell, render custom element.

CSS styles

Styling cells over css styles. Example:

render: function(o){
  if(o.value < 2){
    //red
    o.style['background-color'] = 'rgba(228, 107, 103, 0.4)';
  }
  else if(o.value >= 2 && o.value < 3){
    //yellow
    o.style['background-color'] = 'rgba(255, 219, 88, 0.5)';
  }
  else if(o.value >= 3){
    //green
    o.style['background-color'] = 'rgba(101, 174, 110, 0.4)';
  }

  return o;
}

Sample on JSFiddle

Styling over class names

Styling cells over css classnames.

render: function(o){
  if(o.value < 2){
    o.cls = 'red';
  }
  else if(o.value >= 2 && o.value < 3){
    o.cls = 'yellow';
  }
  else if(o.value >= 3){
    o.cls = 'green';
  }

  return o;
}

Sample on JSFiddle

let renderFn = function(o) {
  if (o.rowIndex === 2) {
    o.cls = 'red';
  } else if (o.rowIndex === 4 || o.value === 7) {
    o.cls = 'yellow';
  } else if (o.rowIndex === 8 || o.rowIndex === 1) {
    o.cls = 'green';
  }

  return o;
}
...
}, {
  index: 'brand',
  title: 'Brand',
  render: renderFn
}, {
  index: 'model',
  title: 'Model',
  render: renderFn
}, {
  index: 'engine',
  title: 'Engine',
  render: renderFn

Sample on JSFiddle