Styling row cells over class names

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>

CSS

.red.fancy-grid-cell {
   background-color: rgba(228, 107, 103, 0.4) !important; /* RED */
}

.green.fancy-grid-cell {
   background-color: rgba(101, 174, 110, 0.4) !important; /* GREEN */
}

.yellow.fancy-grid-cell {
   background-color: rgba(255, 219, 88, 0.5) !important; /* YELLOW */
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  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;
  }


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

});


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:...