Handsontable example

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable@11.0/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@11.0/dist/handsontable.full.min.css" /> 
<script src="https://handsontable.com/docs/8.3.2/components/numbro/dist/languages.min.js"></script>

<button class="edit">
  Edit Row
</button>
<div id="example1" class="hot handsontable htColumnHeaders"></div>
<div class="win">
  <div class="data">
    <p>Type your value</p>
    <input type="text" class="a">
  </div>
  <button class="save">Save</button>
</div>

CSS

body {
  font: 0.8em sans-serif;
}

.win {
  visibility: hidden;
  width: 300px;
  height: 150px;
  background: #fff;
  z-index: 999;
  position: absolute;
  border: 1px solid #aaa;
  padding: 20px;
  line-height: 3em;
  top: 3em;
  left: 3em;
  box-shadow: 0 0 999px 999px RGBA(0, 0, 0, 0.3);
}

.win input {
  width: 93%;
}

JavaScript

const a = document.querySelector('.a');
 const save = document.querySelector('.save')
 const win = document.querySelector('.win');
 const edit = document.querySelector('.edit');
 const container = document.getElementById('example1');
 let row, col, hot;


 hot = new Handsontable(container, {
   data: Handsontable.helper.createSpreadsheetData(10, 5),
   colHeaders: true,
   editor: false,
   outsideClickDeselects: false,
   afterOnCellMouseDown: function(){
   	setTimeout(function(){
    	showWindow()
    }, 500)
   }
 });

 function showWindow() {
   if (win.style.visibility === 'visible') {
     win.style.visibility = 'hidden';
   } else {
     win.style.visibility = 'visible';
   }
   row = hot.getSelectedLast()[0];
   col = hot.getSelectedLast()[1];
   a.value = null;
   a.placeholder = hot.getDataAtCell(row, 0);
 }

 save.addEventListener('click', function() {
   row = hot.getSelectedLast()[0];
   hot.setDataAtCell(row, col, a.value)
   win.style.visibility = 'hidden'
 });