Handsontable Cell Renderer Conditional Formatting Example

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script src="http://docs.handsontable.com/0.19.0/scripts/jquery.min.js"></script>
<script src="http://docs.handsontable.com/0.19.0/bower_components/handsontable/dist/handsontable.full.js"></script>
<link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/0.19.0/bower_components/handsontable/dist/handsontable.full.min.css">


  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <div id="example2" class="hot handsontable htColumnHeaders"></div>
  </body>

</html>

// Code goes here

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

  function getCarData() {
    return [{
      car: "Mercedes A 160",
      year: 2012,
      available: true,
      comesInBlack: 'yes'
    }, {
      car: "Citroen C4 Coupe",
      year: 2013,
      available: false,
      comesInBlack: 'yes'
    }, {
      car: "Audi A4 Avant",
      year: 2014,
      available: true,
      comesInBlack: 'no'
    }, {
      car: "Opel Astra",
      year: 2015,
      available: false,
      comesInBlack: 'yes'
    }, {
      car: "BMW 320i Coupe",
      year: 2016,
      available: false,
      comesInBlack: 'no'
    }];
  }

  var example2 = document.getElementById('example2');

  function customRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    if (col == 1) {
      if (value == 2013) {
        td.className = 'unmatched';
      }
    }
    return td;
  }


  var hot2 = new Handsontable(example2, {
    data: getCarData(),
    colHeaders: ["Car model", "Year of manufacture", "Comes in black"],
    columns: [{
      data: "car"
    }, {
      data: "year",
      type: 'numeric'
    }, {
      data: "comesInBlack",
      type: "checkbox",
      checkedTemplate: 'yes',
      uncheckedTemplate: 'no'
    }],
    cells: function(row, col, prop) {
      var cellProperties = {};

      cellProperties.renderer = customRenderer; // uses function directly

      return cellProperties;
    }
  });







});

/* Styles go here */
.unmatched {
  background-color: #F5ABAB !important;
  height: 25px !important;
}