JSFiddle - React, Tailwind, and code Playground

by Andrei Gheorghiu

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/5.0.0/handsontable.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/5.0.0/handsontable.min.js"></script>
<div id="example"></div>

JavaScript

new Handsontable(
  document.getElementById('example'), {
    rowHeaders: true,
    colHeaders: true,
    minRows: 10,
    minCols: 10,
    stretchH: 'none',
    afterOnCellMouseDown: function(event, coords, th) {
      if (coords.row === -1 || coords.col === -1) {
        let instance = this,
          isColHeader = coords.row === -1,
          input = document.createElement('input'),
          rect = th.getBoundingClientRect(),
          addListeners = (events, headers, index) => {
            events.split(' ').forEach(e => {
              input.addEventListener(e, () => {
                headers[index] = input.value;
                instance.updateSettings(isColHeader ? {
                  colHeaders: headers
                } : {
                  rowHeaders: headers
                });
                setTimeout(() => {
                  if (input.parentNode) input.parentNode.removeChild(input)
                });
              })
            })
          },
          appendInput = () => {
            input.setAttribute('type', 'text');
            input.style.cssText = '' +
              'position:absolute;' +
              'left:' + rect.left + 'px;' +
              'top:' + rect.top + 'px;' +
              'width:' + (rect.width - 4) + 'px;' +
              'height:' + (rect.height - 4) + 'px;' +
              'z-index:1000;' + 
              'text-align:center';
            document.body.appendChild(input);
          };
        input.value = th.querySelector(
          isColHeader ? '.colHeader' : '.rowHeader'
        ).innerText;
        appendInput();
        setTimeout(() => {
            input.select(); 
            addListeners('change blur', instance[
            isColHeader ? 'getColHeader' : 'getRowHeader'
          ](), coords[isColHeader ? 'col' : 'row']);
        });
      }
    }
  }
)