JSFiddle - React, Tailwind, and code Playground

HTML

<span>Default value for observe changes</span>


<div id="basic_example"></div>

<span id="output">Testing</span>

CSS

</style>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<link href="http://handsontable.com//styles/main.css" rel="stylesheet">
<link href="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.css" rel="stylesheet">
<script src="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.js"></script>

<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}
div#basic_example { 
   border: 5px solid #ccc;
    
}

JavaScript

$(document).ready(function () {

  var container = document.getElementById('basic_example');
  
  var data = function () {
   return Handsontable.helper.createSpreadsheetData(10, 10);
  };
  
  var hot = new Handsontable(container, {
    data: data(),
    colHeaders: true,
    rowHeaders: true,
    stretchH: 'all',
    columnSorting: true,
    contextMenu: true
  });
    
    if (container.clientHeight < 500) {
        container.height = container.clientHeight;
        hot.updateSettings({height: container.clientHeigh});
        hot.render();
    }
     
    setTimeout(function() {
        var output = document.getElementById('output');
        var value = hot.getSettings().observeChanges;
        output.innerHTML = value;
    }, 1000);
    
  
});