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 data = [{
  name: 'LeBron James',
  born: '1984',
  weight: '113 kg',
  height: "6'8''"
}, {
  name: 'Russell Westbrook',
  born: '1988',
  weight: '200 lbs',
  height: '191 cm'
}, {
  name: 'Shaquille O’Neal',
  born: '1972',
  weight: '147 kg',
  height: '216 cm'
}, {
  name: 'Tony Parker',
  born: '1982',
  weight: '84 kg',
  height: "6'2''"
}, {
  name: 'Blake Griffin',
  born: '1989',
  weight: '114 kg',
  height: "6'10''"
}, {
  name: 'Stephen Curry',
  born: '1988',
  weight: '190 lbs',
  height: '191 cm'
}, {
  name: 'Chris Paul',
  born: '1985',
  weight: '175 lbs',
  height: '183 cm'
}, {
  name: 'Kevin Garnett',
  born: '1976',
  weight: '240 lbs',
  height: "6'11''"
}];

var
  container = document.getElementById('example1'),
  hot = new Handsontable(container, {
  data: data,
  licenseKey: 'non-commercial-and-evaluation',
  width: 745,
  colWidths: [300, 145, 150, 150],
  colHeaders: ['Player', 'Born', 'Weight', 'Height'],
  columnSorting: true,
  sortIndicator: true,
  columns: [{
    data: 'name'
  }, {
    data: 'born'
  }, {
    data: 'weight',
    sortFunction: function(sortOrder) {
      return function(a, b) {
        var unitsRatios = {
          'kg': 2.20,
          'lbs': 1
        };
        var newA = a[1];
        var newB = b[1];
        // Let's use HOT's object iteration helper:
        var objectEach = Handsontable.helper.objectEach;

        objectEach(unitsRatios, function(val, prop) {
          if (isNaN(newA) && newA.indexOf(' ' + prop) > -1) {
            newA = parseFloat(newA.replace(prop, '')) * val;
          }

          if (isNaN(newB) && newB.indexOf(' ' + prop) > -1) {
            newB = parseFloat(newB.replace(prop, '')) * val;
          }
        });


        if (newA < newB) {
          return sortOrder ? -1 : 1;
        }
        if (newA > newB) {
          return sortOrder ? 1 : -1;
        }
        return 0;
      }
    }
  }, {
    data: 'height',
    sortFunction: function(sortOrder) {
      return...