JSFiddle - React, Tailwind, and code Playground

by mpusarla

HTML

<div id="example" class="handsontable"></div>

<div class="dialog" id="myform">
    <form>
      <div align="center">          
        <input type="button" value="Ok" id="btnOK">
      </div>
	</form>
 </div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>

<script src="http://handsontable.com/dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http://handsontable.com/dist/handsontable.full.css">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css">

<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}

.button{
  border:1px solid #333;
  background:#6479fd;
}
.dialog{
  border:5px solid #666;
  padding:10px;
  background:#3A3A3A;
  position:absolute;
  display:none;
}
.dialog label{
  display:inline-block;
  color:#cecece;
}
input[type=text]{
  border:1px solid #333;
  display:inline-block;
  margin:5px;
}
#btnOK{
  border:1px solid #000;
  background:#ff9999;
  margin:5px;
}

JavaScript

$(document).ready(function () {

  var
    data = [
      ['', 'Maserati', 'Mazda', 'Mercedes', 'Mini', 'Mitsubishi'],
      ['2009', 0, 2941, 4303, 354, 5814],
      ['2010', 3, 2905, 2867, 412, 5284],
      ['2011', 4, 2517, 4822, 552, 6127],
      ['2012', 2, 2422, 5399, 776, 4151]
    ],
    container = document.getElementById('example'),
    hot;
  
  hot = new Handsontable(container, {
    data: data,
    minSpareRows: 1,
    colHeaders: true,
    contextMenu: true,
      afterSelectionEnd: handleAfterSelection
  });   
    
});

function handleAfterSelection(startRow, startColumn, endRow, endColumn)
{
    var selectedCell ={};
    selectedCell.row = startRow;
    selectedCell.column = startColumn;
         
     var popup = $('#myform');
      $(popup).dialog();
}

$(function() {
    $("#btnOK").click(function() {        
        $("#myform").hide(400);
    });
});