Handsontable Performance Test (10000x100)

by Aman Middha

HTML

<script src="http://docs.handsontable.com/bower_components/handsontable/dist/handsontable.full.js"></script>
<link rel="stylesheet" href="http://docs.handsontable.com/bower_components/handsontable/dist/handsontable.full.css">
<h2>Handsontable Performance Test (10000x100)</h2>
<p>
Head to <a href="https://handsontable.com" target="_blank">handsontable.com</a> to learn more about Handsontable.
</p><button name="load" id="load" class="intext-btn">Load</button>

<div id="example"></div>

CSS

body {   
  margin: 20px 30px;
  font-size: 13px;
  font-family: 'Open Sans', Helvetica, Arial;
}

a {
  color: #34A9DC;
  text-decoration: none;
}

p {
  margin: 5px 0 20px;
}

h2 {
  margin: 20px 0 0;
  font-size: 18px;
  font-weight: normal;
}

JavaScript

var data = function () {
  return Handsontable.helper.createSpreadsheetData(10000, 100);
};

var container = document.getElementById('example');

var hot = new Handsontable(container, {
  data:null,
  rowHeaders: true,
  colHeaders: true,
  // performance tip: set constant size
  colWidths: 80,
  rowHeights: 23,
  // performance tip: turn off calculations
  autoRowSize: false,
  autoColSize: false,
});

Handsontable.Dom.addEvent(load, 'click', function() {
alert("asdfd");
    ajax('http://stage.dis.customerdemourl.com/account/testpage.txt', 'GET', '', function(res) {
      var data = JSON.parse(res.response);

      hot.loadData(data.data);
      exampleConsole.innerText = 'Data loaded';
    });
  });