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" class="handsontable"></div>

CSS

body {
  background: white;
  margin: 0;
  padding: 0;
  font-size: 0.9em
}

JavaScript

var hot;
document.addEventListener("DOMContentLoaded", function() {

  var data = [{
    state: 'New York',
    city: 'New York',
    area: '468.9'
  }, {
    state: 'Florida',
    city: 'Miami',
    area: '55.27'
  }, {
    state: 'California',
    city: 'Los Angeles',
    area: '503'
  }, {
    state: 'Texas',
    city: 'Houston',
    area: '627.8'
  }, {
    state: 'Texas',
    city: 'Austin',
    area: '271.8'
  }, {
    state: 'California',
    city: 'San Francisco',
    area: '231.89'
  }, {
    state: 'Michigan',
    city: 'Detroit',
    area: '142.87'
  }, {
    state: 'Colorado',
    city: 'Denver',
    area: '155'
  }];

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

  hot = new Handsontable(container, {
    data: data,
    licenseKey: 'non-commercial-and-evaluation',
    colHeaders: ['State', 'City', 'Area'],
    columnSorting: true,
    sortIndicator: true,
    width: 745,
    colWidths: [370, 375],
    hiddenColumns: {
      columns: [2]
    },
    columns: [{
      data: 'state'
    }, {
      data: 'city',
      sortFunction: function(sortOrder) {
        return function(a, b) {
          var rowA = a[0];
          var rowB = b[0];
          var areaA = parseFloat(window.hot.getDataAtCell(rowA, 2));
          var areaB = parseFloat(window.hot.getDataAtCell(rowB, 2));

          if (areaA < areaB) {
            return sortOrder ? -1 : 1;
          }
          if (areaA > areaB) {
            return sortOrder ? 1 : -1;
          }
          return 0;
        }
      }
    }, {
      data: 'area',
    }]
  });
});