Handsontable example

HTML

<button class="edit">
  Edit Row
</button>
<div id="example1" class="hot handsontable htColumnHeaders"></div>
<div class="win">
  <div class="data">
    A:
    <input type="text" class="a"> B:
    <input type="text" class="b"> C:
    <input type="text" class="c"> D:
    <input type="text" class="d">
  </div>
  <button class="save">Save</button>
</div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue --> <script src="https://cdn.jsdelivr.net/npm/handsontable@7.0.2/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@7.0.2/dist/handsontable.full.min.css"> <script src="https://docs.handsontable.com/pro/1.9.1/bower_components/numbro/dist/languages.js"></script><style> body {
  font: 0.8em sans-serif;
}

.win {
  visibility: hidden;
  width: 400px;
  height: 400px;
  background: #fff;
  z-index: 106;
  position: absolute;
  border: 1px solid green;
  padding: 10px;
  line-height: 3em;
  top: 0;
  left: 0
}

.win input {
  width: 93%;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  var
    container = document.getElementById('example1'),
    hot, row;

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

  hot.selectCell(0, 0);


  var a = document.querySelector('.a'),
    b = document.querySelector('.b'),
    c = document.querySelector('.c'),
    d = document.querySelector('.d');

  var save = document.querySelector('.save')

  var win = document.querySelector('.win');
  var edit = document.querySelector('.edit');
  edit.addEventListener('click', function() {

    if (win.style.visibility === 'visible') {
      win.style.visibility = 'hidden';
    } else {
      win.style.visibility = 'visible';
    };

    //get data from row
   row = hot.getSelectedLast()[0]; // ??
    a.value = null;
    b.value = null;
    c.value = null;
    d.value = null;
    
    a.placeholder = hot.getDataAtCell(row, 0);
    b.placeholder = hot.getDataAtCell(row, 1);
    c.placeholder = hot.getDataAtCell(row, 2);
    d.placeholder = hot.getDataAtCell(row, 3)

  });

  save.addEventListener('click', function() {
   row = hot.getSelectedLast()[0];
    hot.setDataAtCell(row, 0, a.value);
    hot.setDataAtCell(row, 1, b.value);
    hot.setDataAtCell(row, 2, c.value);
    hot.setDataAtCell(row, 3, d.value);
    
    win.style.visibility = 'hidden'
  });

console.log(hot.getSelected()[0]);

});