JSFiddle - React, Tailwind, and code Playground

by Hassan Rehman

HTML

<div id="handson" class='handsontable' style="width:600px; height:300px;overflow:auto"></div>

CSS

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

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

<style type="text/css">
.handsontable col.rowHeader {
    width: 180px;
}
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}

JavaScript

$(document).ready(function () {

    // Populate our dummy data
    ncols = 20;
    nrows = ncols;
    var cols = [];
    var rows = [];
    var data = [];
    colhdr = "A Long Column Header String......";
    rowhdr = "A Long Row Header String.........";
    for (var i = 0; i < ncols; ++i) {
        cols.push(colhdr.slice(0, 1 + Math.round(Math.random() * 30)));
        rows.push(rowhdr.slice(0, 1 + Math.round(Math.random() * 30)));
        var dataRow = [];
        for (var j = 0; j < nrows; ++j) {
            dataRow.push(Math.round(Math.random() * 100));
        }
        data.push(dataRow);
    }

    // Create handson table
    $("#handson").handsontable({
        data: data,
        colHeaders: cols,
        rowHeaders: rows
    });
});