Handsontable example

HTML

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

CSS

.handsontable TD {
  color: green;
  font-weight: bold;
}

.handsontable .red {
  color: red;
}

.handsontable .blue {
  color: blue;
}

JavaScript

var
  example = document.getElementById('example1'),
  hot = new Handsontable(example, {
    data: [
      ['ABC']
    ],
    rowHeaders: true,
    colHeaders: true,
    type: 'password'
  });

function mywRenderer(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  td.style.fontWeight = 'bold';
  td.style.color = 'green';
}

setInterval(function() {
  hot.setCellMeta(0, 0, 'className', 'red');
  hot.setCellMeta(0, 0, 'renderer', 'text');
  hot.render();
}, 3000)

setTimeout(function() {
  setInterval(function() {
    hot.setCellMeta(0, 0, 'className', 'blue');
    hot.setCellMeta(0, 0, 'renderer', 'password');
    hot.render();
  }, 3000)
}, 1500)