Handsontable example

HTML

<link rel="stylesheet" href="https://docs.handsontable.com/pro/1.14.3/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<script src="https://docs.handsontable.com/pro/1.14.3/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<div>
  <div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div>
</div>

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 }
    ],
		afterRender: function(){
			console.log('I am rerendering the table')
		}
  });

  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;
  }
	
	setInterval(function(){
		hot.setCellMeta(0,0, 'readOnly', true)
	}, 800)

});