JSFiddle - React, Tailwind, and code Playground

by mpusarla

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.14.1/handsontable.full.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.14.1/handsontable.full.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/ui-lightness/jquery-ui.css">
     <input type="button" id='btn' value="Popup"></input>
    
<div id="example"><div id='popup'>Test</div></div>

CSS

body { font: normal normal normal 10px/1.5 Arial, Helvetica, sans-serif; }

.ui-dialog-osx {
    -moz-border-radius: 0 0 8px 8px;
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px; border-width: 0 8px 8px 8px;
}

JavaScript

$('#example').dialog(
 {
     autoOpen: false,
     open: function() {
         var container = document.getElementById('popup');
        var data = [
              ["", "Ford", "Volvo", "Toyota", "Honda"],
              ["2014", 10, 11, 12, 13],
              ["2015", 20, 11, 14, 13],
              ["2016", 30, 15, 12, 13]
            ];
         var hot = new Handsontable(container, {
            data: data,
            height: 396,
            colHeaders: true,
            rowHeaders: true,
            stretchH: 'all',
            columnSorting: true,
            contextMenu: true
  });
     }
 });

$('#btn').on('click', function() {
         $("#example").dialog('open');        
});