Handsontable example

by handsoncode

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<div id="example1"></div>
<h2>
  <span>Last data load time:</span>
  <span id="loadTime"></span>
</h2>
<h2>
  <span>Active data requests:</span>
  <span id="dataRequests"></span>
</h2>

CSS

* {
  padding:0;
  margin:0;
  font-size: 14px;
  letter-spacing: 0.5px;
  font-family: 'Times New Roman'
}

JavaScript

var exampleContainer1 = document.getElementById('example1');
    var dataUrl = 'https://my-json-server.typicode.com/wszymanski/blog-post-demo/electric_cars';
    var lastLoadDataCallback;
    var dataRequests = 0;

    var loadData = function(url, callback) {
      var startTime = new Date().getTime();
      var httpRequest = new XMLHttpRequest();

      lastLoadDataCallback = callback;
      dataRequests += 1;
      document.querySelector('#dataRequests').textContent = dataRequests;

      httpRequest.open('GET', url);
      httpRequest.send();
      httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === 4) {
          var endTime = new Date().getTime();
          dataRequests -= 1;

          document.querySelector('#loadTime').textContent = endTime - startTime + "ms";
          document.querySelector('#dataRequests').textContent = dataRequests;

          if (httpRequest.status === 200) {
            var newData = JSON.parse(httpRequest.responseText);

            // Performing last load data callback
            if (lastLoadDataCallback === callback) {
              callback(newData);
            }

          } else {
            console.log('Looks like there was a problem. Status Code: ' + httpRequest.status);
          }
        }
      };
    }

    var hot = new Handsontable(exampleContainer1, {
      colWidths:[100,105,125,80,55,100,110],
      data: [],
      licenseKey: 'non-commercial-and-evaluation',
      columns: [{
        data: 'brand' // 1st column is simple text, no special options here
      }, {
        data: 'model'// 2nd column is simple text, no special options here
      }, {
        data: 'maxSpeed',
        type: 'numeric'
      }, {
        data: 'range',
        type: 'numeric'
      }, {
        data: 'seats',
        type: 'numeric'
      }, {
        data: 'price',
        type: 'numeric',
        numericFormat: {
          pattern: '$ 0,0.00',
          culture: 'en-US'
        }
      }, {
       ...