Handsontable example

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/handsontable/[email protected]/dist/handsontable.full.css">
<script src="https://cdn.jsdelivr.net/gh/handsontable/[email protected]/dist/handsontable.full.js"></script>
<div id="example1" class="hot ht__manualColumnMove ht__manualRowMove handsontable htRowHeaders htColumnHeaders" style="height: 320px; overflow: hidden; width: 100%;" data-originalstyle="height: 320px; overflow: hidden; width: 100%;"></div>

JavaScript

var example1 = document.getElementById('example1');
  var hot = new Handsontable(example1, {
    data: Handsontable.helper.createSpreadsheetData(200, 20),
    rowHeaders: true,
    colHeaders: true,
    width: '100%',
    height: 320,
    colWidths: 100,
    manualColumnMove: true,
    manualRowMove: true,
    beforeRowMove: function(array_of_rows, target_index){
    	console.log('beforeRowMove', array_of_rows, target_index)
    },
    afterRowMove: function(array_of_rows, target_index){
    console.log('afterRowMove', array_of_rows, target_index)
    },
  });