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">

Babel + JSX

const example = document.getElementById('example');
const hot = new Handsontable(example, {
  data: Handsontable.helper.createSpreadsheetData(4, 4),
  licenseKey: 'non-commercial-and-evaluation',
  colWidths: 100,
  rowHeaders: true,
  colHeaders: true,
  afterDocumentKeyDown(e) {
    console.log(this.getActiveEditor()._opened);
  },
});

hot.selectCell(0, 0);

function waitForIt() {
  const id = setInterval(frame, 800);
  const state = hot.getActiveEditor();

  function frame() {
    if (!state) {
      clearInterval(id);

    } else if (state._opened === true) {
      console.log('I wait cause cell is being edited', state);

    } else if (state._opened === false) {
      console.log('I am closed', state);
      hot.setDataAtCell(3, 3, '**TEST**');
      clearInterval(id);
    }
  }
}

setTimeout(function() {
  waitForIt();
}, 2000);