Handsontable example

by Santosh Giridhara

HTML

<pre id="positions">offsetRow: 11
mn: 0</pre>

<div id="example1" style="width: 400px; height: 300px; overflow: scroll" class="handsontable"></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?20140331">

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

JavaScript

$(document).ready(function () {

  function createSpreadsheetData(rowCount, colCount) {
    rowCount = typeof rowCount === 'number' ? rowCount : 100;
    colCount = typeof colCount === 'number' ? colCount : 4;
  
    var rows = []
      , i
      , j;
  
    for (i = 0; i < rowCount; i++) {
      var row = [];
      for (j = 0; j < colCount; j++) {
        row.push(Handsontable.helper.spreadsheetColumnLabel(j) + i);
      }
      rows.push(row);
    }
    return rows;
  }
  
  /*
   Container looks like this:
  
   <div id="example1" style="width: 400px; height: 300px; overflow: scroll"></div>
   */
  
  var myData = createSpreadsheetData(5, 10);
  
  $("#example1").handsontable({
    data: myData,
    colWidths: [65, 47, 47, 47, 47, 47, 47, 47, 47, 47],
    rowHeaders: true,
    colHeaders: true,
    fixedRowsTop: 90,
    fixedColumnsLeft: 0,
    contextMenu: false
  });
  
  var ht = $("#example1").data('handsontable');
  
  setInterval(function () {
    var str = '';
    str += 'offsetRow: ' + ht.view.wt.getSetting('offsetRow') + '\n';
    str += 'offsetColumn: ' + ht.view.wt.getSetting('offsetColumn');
    $('#positions').html(str);
  }, 100);
  
  function bindDumpButton() {
      $('body').on('click', 'button[name=dump]', function () {
        var dump = $(this).data('dump');
        var $container = $(dump);
        console.log('data of ' + dump, $container.handsontable('getData'));
      });
    }
  bindDumpButton();

});