Handsontable example

HTML

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

JavaScript

document.addEventListener("DOMContentLoaded", () => {  
  const data = [
		[10, 11, 12, 13, 14, 15],
		[10, 11, 12, 13, 14],
		[10, 11, 12, 13],
		[10, 11, 12],
		[10, 11]
	];
  const element = document.getElementById('example')
  const settings = {
    data: data,
    rowHeaders: true,
    colHeaders: true,
    formulas: {engine: HyperFormula}
  }
  const hot = new Handsontable(element, settings)
  
  let selectedCell = null
  
  const afterSelection = (row, column, row2, column2, preventScrolling, selectionLayerLevel) => {
    selectedCell = "A2" // dummy, should be calculated from row and column
  }

  const beforeChange = (changes, source) => {
    const [rowIndex, columnIndex, previousValue, nextValue] = changes[0]
    if (nextValue[0] === "=" && nextValue[nextValue.length - 1] === "+") {
      hot.setDataAtCell(rowIndex, columnIndex, nextValue + selectedCell)
      hot.selectCell(rowIndex, columnIndex)

			//window.setTimeout(() => {
        const activeEditor = hot.getActiveEditor()
        if (activeEditor) {
          // activeEditor.beginEditing(nextValue + selectedCell)
          activeEditor.beginEditing()
          activeEditor.enableFullEditMode()
        }
      //}, 0)
    }

		selectedCell = null
  }
  
  hot.updateSettings({afterSelection, beforeChange})
});