Handsontable example

HTML

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

CSS

.myBt {
  width: 99%;
  height: 100%;
  background: #345ee0;
  box-sizing: border-box;
  text-align: center;
  font: 16px sans-serif;
  color: #fff;
}

Babel + JSX

const container1 = document.getElementById('example1');
const hot1 = new Handsontable(container1, {
  data: [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ],
  colWidths: 100,
  colHeaders: true,
  cells: function() {
		console.log(arguments);
  }
});

function myBtns(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  td.innerHTML = '<button class="myBt bt-' + row + '" onclick="doIt()">' + value + '</button>';
	console.log(value);
}

function doIt() {
  alert('ABC')
}