Handsontable example

by dgdavidson

HTML

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

JavaScript

Handsontable.renderers.registerRenderer('firstAction', firstAction);
function firstAction(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
  if (col == 2) {
    td.innerHTML = '<span onclick="click1(' + row + ')" >First</span>';
  }
}

Handsontable.renderers.registerRenderer('secondAction', secondAction);
function secondAction(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
  if (col == 2) {
    td.innerHTML = '<span onclick="click2(' + row + ')" >Second</span>';
  }
}


Handsontable.renderers.registerRenderer('thirdAction', thirdAction);
function thirdAction(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
  if (col == 2) {
    td.innerHTML = '<span onclick="click3(' + row + ')" >Third</span>';
  }
}
var
  example = document.querySelector('.example1'),
  example2 = document.querySelector('.example2'),
  example3 = document.querySelector('.example3'),
  hot = new Handsontable(example, {
    data: Handsontable.helper.createSpreadsheetData(5, 5),
    colHeaders: true,
    renderer: 'firstAction'
  });

hot2 = new Handsontable(example2, {
  data: Handsontable.helper.createSpreadsheetData(3, 7),
  colHeaders: true,
  renderer: 'secondAction'
});

hot3 = new Handsontable(example3, {
  data: Handsontable.helper.createSpreadsheetData(3, 7),
  colHeaders: true,
  renderer: 'thirdAction'
});