Handsontable example

HTML

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

JavaScript

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

  var
    example = document.getElementById('example1'),
    hot;

  hot = new Handsontable(example, {
    data: Handsontable.helper.createSpreadsheetData(50000, 35),
    width: 584,
    height: 320,
    rowHeaders: true,
    colHeaders: true,
    renderer: firstColumnRenderer
  });

  function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    if (col === 0) {
      td.style.fontWeight = 'bold';
      td.style.color = 'white';
      td.style.background = '#D81B60';
      td.innerHTML = "░ " + td.innerHTML
    }
  }

  function firstColumnRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    if (col === 1 || col === 2 || col === 3 || col === 4){
      if (row % 2 == 0) {
        var div = document.createElement('DIV');
        var a = document.createElement('a');
        var linkText = document.createTextNode("View Results");
        a.appendChild(linkText);
        a.title = "Click to see Results";
        a.href = "#";
        div.appendChild(a);
        $(td).empty().append(div).append(a);
        $(a).on('click', function(e) {
          checkResults(row, col);
        }); 
      } else {
        td.innerHTML = '';
      }
    }
  }

});