Handsontable example

by handsoncode

HTML

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

CSS

body {
  margin: 0;
  padding: 0;
  background: #fff;
}

.handsontable .red {
  color: red;
}

.handsontable .black {
  color: black;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  var example = document.getElementById('example1');
  var myData = [
    ['Ann', 'Smith'],
    ['Brad', 'James'],
    ['Mike', 'Tail']
  ];
 
  var hot = new Handsontable(example, {
    data: myData,
    colWidths: 345,
    licenseKey: 'non-commercial-and-evaluation',
    rowHeaders: true,
    colHeaders: ['Name', 'Surname'],
  });

  window.hot = hot;

  function setCellsMeta(row1, column1, row2, column2, property, value) {
    var row = Math.min(row1, row2);
    var rowMax = Math.max(row1, row2);
    var column = Math.min(column1, column2);
    var columnMax = Math.max(column1, column2);

    for (var r = row; r <= rowMax; r++) {
      for (var c = column; c <= columnMax; c++) {
        this.setCellMeta(r, c, property, value);
      }
    }
  }

  document.addEventListener("keydown", function(event) {
    var ctrl = event.ctrlKey;
    var key = event.key;

    if (ctrl) {
      if (key === 'm') {
        // red font color
        setCellsMeta.apply(hot, hot.getSelected().concat('renderer', myRenderer));
      }
      if (key === 'q') {
        // black font color
        hot.updateSettings({
          renderer: myRenderer
        })
      }
      hot.render();
    }
  });


  function myRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.innerHTML = '<a href="https://www.google.pl/search?q=' + td.innerHTML + '" target="_blank">' + td.innerHTML + '</a>';
  }
});