Cells styling

Preface

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;
}

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;
}

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