JSFiddle - React, Tailwind, and code Playground

by mpusarla

HTML

<div id="example1"></div>

CSS

#hot {overflow: hidden; width: 500px; height: 300px;}

</style><!-- Ugly Hack due to jsFiddle issue -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.22.0/handsontable.full.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.22.0/handsontable.full.min.css" type="text/css" rel="stylesheet">

JavaScript

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

  var
    container1 = document.getElementById('example1'),
    hot1;
  
  hot1 = new Handsontable(container1, {
    data: Handsontable.helper.createSpreadsheetData(5, 3),
    colWidths: 47,  
    colHeaders: true,
    height: 200,
    stretchH: 'all',
    contextMenu: true,
    manualColumnResize: true,
    manualColumnMove: true,
    height: 200,
    minSpareRows: 1,
    columnSorting: true,    
    afterChange: handleAfterChange
  });
  
  function handleAfterChange(changes, source) {
  	if (!changes) {
    	return;
    }
    
    var instance = this;
     for (var i=0; i < changes.length; i++) {
     		var rowIndex = changes[i][0];
        var columnIndex = changes[i][1];
        var oldValue = changes[i][2];
        var newValue = changes[i][3];        
     };
  }

});