Styling cells

by FancyGrid Inc.

HTML

<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>

<div id="container" style="width: 700px; height: 800px;"></div>

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  grid = new FancyGrid({
    renderTo: 'container',
    data: data,
    selModel: 'row',
    trackOver: true,
    theme: 'extra-gray',
    defaults: {
      resizable: true,
      sortable: true,
      draggable: true,
      width: 95,
      align: 'center',
      cellAlign: 'center'
    },
    columns: [{
      type: 'order'
    }, {
      index: 'brand',
      title: 'Brand'
    }, {
      index: 'model',
      title: 'Model'
    }, {
      index: 'engine',
      title: 'Engine',
      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;
      }
    }, {
      index: 'transmission',
      title: 'Transmission'
    }, {
      index: 'hp',
      title: 'HP'
    }, {
      index: 'fuel',
      title: 'Fuel'
    }, {
      index: 'drive',
      title: 'Drive'
    }, {
      index: 'manufactured',
      title: 'Manufactured'
    }, {
      index: 'color',
      title: 'Shade'
    }, {
      index: 'price',
      title: 'Price',
      type: 'currency'
    }]
  });

});


var data = [{
    brand: 'KIA',
    model: 'Sorento',
    drive: '4WD',
    transmission: 'Auto',
    engine: '2.2',
    hp: 200,
    fuel: 'Diesel',
    price: 35000,
    manufactured: 'South Korea',
    color: 'Gray'
  },
  {
    brand: 'KIA',
    model: 'Sorento',
    drive: '4WD',
    transmission: 'Auto',
    engine: '2.4',
    hp: 188,
    fuel: 'Petrol',
    price: 33000,
    manufactured: 'South Korea',
    color: 'Gray'
  },
  {
    brand: 'KIA',
    model: 'Sportage',
    drive: '2WD',
    transmission: 'Manual',
    engine: '2.0',
    hp: 150,
    fuel:...