Handsontable example

HTML

<div>
  <div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div>
</div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue --> <script src="https://docs.handsontable.com/pro/1.14.3/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.14.3/bower_components/handsontable-pro/dist/handsontable.full.min.css">

JavaScript

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

  const dataObj = [
    ["On", 2, 3],
    ["On", 5, 6],
    ["Off", 8, 9]
  ];

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

  var hot = new Handsontable(example1, {
    data: dataObj,
    colHeaders: true,
    rowHeaders: true,
    colWidths: 100,
    columns: [
    	{ type: "dropdown", source: ["On", "Off"] },
      { type: "numeric", renderer: conditionalRenderer },
      { type: "numeric", renderer: conditionalRenderer }
    ]
  });

  function conditionalRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    
    if (instance.getDataAtCell(row, 0) == "Off") {
      td.innerHTML = "";
      td.style = "background: lightgray;"
    }
    return td;
  }

});