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.

Example: Styling cells in column

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

Example: Styling cells in row

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

`