Handsontable example

by handsoncode

HTML

<script src="https://docs.handsontable.com/pro/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://docs.handsontable.com/pro/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<div id="example1" class="handsontable"></div>

CSS

body {
  background: white;
  margin: 0;
  padding: 0;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  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;

  hot = new Handsontable(container, {
    data: data,
    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 >...