Handsontable example

by mrrodd

HTML

<h2>Column sorting</h2>

<p>To enable this experimental feature, use setting <code>columnSorting: true</code></p>

<p>Click on a column header to sort.</p>

<p>Only the table view is sorted. The data source remains in the original order.</p>

<div id="example1" style="width: 400px; height: 300px; overflow: visible;" class="handsontable"></div>

<p>
  <button name="dump" data-dump="#example1" title="Prints current data source to Firebug/Chrome Dev Tools">
    Dump
    data to console
  </button>
</p>

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">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}

JavaScript

$(document).ready(function () {

  function randomString(length, chars) {
    var result = '';
    for (var i = length; i > 0; --i) result += chars.charAt(Math.round(Math.random() * (chars.length - 1)));
    return result;
  }
  
  function createBigData() {
    var arr = [];
    var str = 'abcdefghijklmnopqrstuvwxyz';
    var i;
  
    for (i = 0; i < 10000; i++) {
      arr.push([
        i,
        randomString(3 * (1 + Math.sin(i)), str),
        randomString(3 * (1 + Math.sin(i + 2)), str),
        randomString(3 * (1 + Math.sin(i + 4)), str),
        randomString(3 * (1 + Math.sin(i + 6)), str),
        randomString(3 * (1 + Math.sin(i + 8)), str),
        randomString(3 * (1 + Math.sin(i + 10)), str)
      ]);
    }
  
    return arr;
  }
  
  $("#example1").handsontable({
    data: createBigData(),
    rowHeaders: true,
    colHeaders: true,
    colWidths: [55, 80, 80, 80, 80, 80, 80],
    columnSorting: true,
    columns: [
      {
        type: 'numeric'
      },
      {},
      {},
      {},
      {},
      {},
      {}
    ],
    minSpareRows: 1,
    contextMenu: true
  });
  
  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();

});