Handsontable example

by handsoncode

HTML

<div id="example"></div>
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">

CSS

.myBt {
  width: 99%;
  height: 100%;
  background: #27C2FF;
  box-sizing: border-box;
  text-align: center;
  border-width: 0;
}

Babel + JSX

function doAction() {
  alert('Action made')
}

function myBtns(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, [instance, td, row, col, prop, value, cellProperties]);
  td.innerHTML = `<button class="myBt bt-${row}" onclick="doAction()">${value}</button>`;
}

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ],
  licenseKey: 'non-commercial-and-evaluation',
  colWidths: 100,
  colHeaders: true,
  cells(row, col) {
    const cellPrp = {};

    if (col === 1) {
      cellPrp.renderer = myBtns;
      cellPrp.readOnly = true;
    }

    return cellPrp
  }
});