JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div id="hot" class="chot"></div>
</div>
CSS
</style><!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<script src="http://10.0.2.2/~psmolenski/hot/lib/jquery.min.js"></script>
<script src="http://10.0.2.2/~psmolenski/hot/dist/jquery.handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http://10.0.2.2/~psmolenski/hot/dist/jquery.handsontable.full.css">
<link rel="stylesheet" media="screen" href="http://10.0.2.2/~psmolenski/hot/demo/css/samples.css">
<style type="text/css">
.container {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 1px solid black;
background: #ee9;
}
.chot {
height: 100%;
overflow: scroll;
}
JavaScript
$(document).ready(function () {
function createBigData() {
var rows = []
, i
, j;
for (i = 0; i < 150; i++) {
var row = [];
for (j = 0; j < 3; j++) {
row.push(Handsontable.helper.spreadsheetColumnLabel(j) + i);
}
rows.push(row);
}
return rows;
}
$("#hot").handsontable({
data: createBigData(),
rowHeaders: true,
colHeaders: true,
minSpareRows: 1,
contextMenu: true
});
});