Handsontable example

HTML

<div id="example1"></div>
<input type="button" value="edit" class="edit-form-btn"/>

CSS

</style><!-- Ugly Hack due to jsFiddle issue --> <script src="https://docs.handsontable.com/pro/1.15.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.15.0/bower_components/handsontable-pro/dist/handsontable.full.min.css">

JavaScript

countClick = 0;
editIsActive = false;

var
  example = document.getElementById('example1'),
  hot1;
var editIsActive, countClick;

hot1 = new Handsontable(example, {
  data: Handsontable.helper.createSpreadsheetData(10, 10),
  rowHeaders: true,
  colHeaders: true,
  readOnly: true,
  columnSorting: true,
  filters: true,
  dropdownMenu: true,
  afterSelection: function(row, col) {
    if (countClick === 0 && editIsActive === true) {
      currentRow = row;
      hot1.updateSettings({
        cells: function(row, col, prop) {
          var cellProperties = {};
          if (row == currentRow) {
            cellProperties.readOnly = false;
          }
          return cellProperties;
        }
      });
    }
    countClick++;
  },
});

$('.edit-form-btn').on('click', function (e) {
  countClick = 0;
  editIsActive = true;
});