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 = [{
  'art': 'Oil Painting 4577',
  'price': '3450 USD',
  'available': true
}, {
  'art': 'Brass sculpture 0023',
  'price': '910 USD',
  'available': true
}, {
  'art': 'Watercolor Paiting 8874',
  'price': '35000 YEN',
  'available': false
}, {
  'art': 'Brass sculpture 0727',
  'price': '15300 YEN',
  'available': false
}, {
  'art': 'Cooper sculpture 0567',
  'price': '1250 EUR',
  'available': true
}, {
  'art': 'Watercolor Paiting 4599',
  'price': '6220 CAD',
  'available': false
}, {
  'art': 'Brass Necklace 7748',
  'price': '388 GBP',
  'available': true
}, {
  'art': 'Silver Necklace 7796',
  'price': '650 GBP',
  'available': true
}];

var
  container = document.getElementById('example1'),
  hot = new Handsontable(container, {
    data: data,
    licenseKey: 'non-commercial-and-evaluation',
    stretchH: 'all',
    colHeaders: ['Item ID', 'Price', 'Availability'],
    columnSorting: true,
    sortIndicator: true,
    colWidths: [345, 200, 200],
    width: 745,
    columns: [{
      data: 'art'
    }, {
      data: 'price',
      sortFunction: function(sortOrder) {
        return function(a, b) {
          var currencyRates = {
            'USD': 1,
            'EUR': 1.125,
            'GBP': 1.443,
            'YEN': 0.0089,
            'CAD': 0.787
          };
          var newA = a[1];
          var newB = b[1];

          for (var prop in currencyRates) {
            if (currencyRates.hasOwnProperty(prop)) {
              if (isNaN(newA) && newA.indexOf(' ' + prop) > -1) {
                newA = parseFloat(newA.replace(prop, '')) * currencyRates[prop];
              }

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

          if (newA < newB) {
            return sortOrder ? -1 : 1;
          }
          if (newA > newB) {
            return sortOrder ? 1 : -1;
          }
          return 0;
   ...