Handsontable example

HTML

<div id="example"></div>

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

JavaScript

const element = document.getElementById('example');
const hot = new Handsontable(element, {
  data: [
    [10, 11, 12, 13, 14, 15],
    [10, 11, 12, 13, 14],
    [10, 11, 12, 13],
    [10, 11, 12],
    [10, 11]
  ],
  rowHeaders: true,
  colHeaders: true,
  formulas: {engine: HyperFormula},
  beforeOnCellMouseDown(event, coords, TD, controller) {
  	const activeEditor = this.getActiveEditor();
    
    if (!activeEditor) {
    	return;
    }
    if (!activeEditor.isOpened()) {
    	return;
    }
    if (event.target === activeEditor.TEXTAREA) {
    	return;
    }
    
    const { TEXTAREA } = activeEditor;
    const { value } = TEXTAREA;
    
    controller.cells = true;
  	
    const spreadsheetAddress = `${Handsontable.helper.spreadsheetColumnLabel(coords.col)}${coords.row + 1}`;
    
    activeEditor.TEXTAREA.value += spreadsheetAddress;
  },
  afterOnCellMouseUp() {
  	const activeEditor = this.getActiveEditor();
    
    if (!activeEditor) {
    	return;
    }
    if (!activeEditor.isOpened()) {
    	return;
    }
    if (event.target === activeEditor.TEXTAREA) {
    	return;
    }
    
    activeEditor.focus();
  }
});