JSFiddle - React, Tailwind, and code Playground

by mpusarla

HTML

<span>Column Resizing</span>
<div id="basic_example"></div>

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.min.css" rel="stylesheet">
<script src="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.js" type="text/javascript"></script>

<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}
#basic_example {
    border-style: solid;
    border-width: 5px;
    border-color: black;
    width: 310px;
    
}
}

JavaScript

$(document).ready(function () {

  var container = document.getElementById('basic_example');
  
  var data = function () {
   return Handsontable.helper.createSpreadsheetData(5, 3);
  };
  
 
  var hot = new Handsontable(container, {
    data: data(),     
    colHeaders: true, 
      colWidths: [100,100,100],
     manualColumnResize: true,
      minSpareRows: 1
  });    
    
});