Handsontable example

HTML

<div id="table" style="width: 200px; height: 100px; overflow:hidden;"></div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="http://docs.handsontable.com/latest/bower_components/handsontable/dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http://docs.handsontable.com/latest/bower_components/handsontable/dist/handsontable.full.css">

<style type="text/css">
* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 0.98em;
}

JavaScript

/**
 * This Handsontable plugin implements deferred data loading, useful for
 * large tables ("infinite scrolling").
 *
 *
 *  Example usage
 *  -------------
 *  In this example data is fetched from a Django + Tastypie Api
 *
 *  var hot = new Handsontable(document.getElementById('table'), {
 *      dataSource: function(page, cb) {
 *          $.get("/api/v1/tablename", {page: page}).sucess(function(result) {
 *              cb(result.objects, result.meta.total_count);
 *          });
 *      },
 *      pageSize: 400,
 *      rowsBuffered: 400
 *  });
 *
 *
 *  Options explained
 *  -----------------
 *
 *  - dataSource (mandatory):
 *        Data loading function. It replaces the *data*
 *        option / the loadData() function.
 *        It's arguments are:
 *          1. a page number (1-based)
 *          2. A callback function. This function accepts two arguments:
 *             1. the data array
 *             2. the total row count. After the first page is loaded,
 *                the data array of the given size is created.
 *                Changes to the total count are currently not taken into
 *                account
 *
 *  - data (optional):
 *        If specified, the given array will be filled with data as the table
 *        is scrolled. However, all data it contained before will be removed.
 *
 *  - pageSize (optional):
 *        Number of rows to load in one batch.
 *        Default: 100
 *
 *  - rowsBuffered (optional):
 *        Number of rows above and below the visible range to be automatically
 *        preloaded
 *        Default: 100
 *
 *  - loadDelay (optional):
 *        Delay in ms before starting a page load. This is
 *        done to prevent every page from being loaded
 *        during fast scrolling.
 *        Maybe it could be made more intelligent by determining
 *        the scrolling speed?
 *        Default: 100
 *
 *  - loadingMsg (optional):
 *        DOM selector that should act as replacement for the default
...