Handsontable example

by handsoncode

HTML

<div id="example4" class="hot handsontable htColumnHeaders"></div>

CSS

</style><script src="https://cdn.jsdelivr.net/npm/handsontable-pro@6.0.1/dist/handsontable.full.min.js"></script><link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable-pro@6.0.1/dist/handsontable.full.min.css">

JavaScript

var arrayOfObjects = [
  {
      brand: "1.66 km",
      model: "Model 3",
      maxSpeed: 141,
      range: 215,
      seats: 5,
      price: 32750,
      productionDate: "06/29/2007"
    },
    {
      brand: "1.44 miles",
      model: "Model S",
      maxSpeed: 139,
      range: 275,
      seats: 7,
      price: 71788,
      productionDate: "04/02/2012"
    },
    {
      brand: "2.4 miles",
      model: "iMiEV",
      maxSpeed: 81,
      range: 99,
      seats: 4,
      price: 31426.9,
      productionDate: "09/11/2009"
    },
    {
      brand: "3.44 miles",
      model: "Focus EV",
      maxSpeed: 85,
      range: 100,
      seats: 4,
      price: 12000,
      productionDate: "10/01/2011"
    },
    {
      brand: "2.59 km",
      model: "iMiEV Sport",
      maxSpeed: 84,
      range: 124,
      seats: 4,
      price: 15000,
      productionDate: "05/11/2007"
    },
    {
      brand: "2.85 km",
      model: "Roadster",
      maxSpeed: 125,
      range: 244,
      seats: 2,
      price: 113904.5,
      productionDate: "02/17/2008"
    },
    {
      brand: "3.35 km",
      model: "e-Golf",
      maxSpeed: 87,
      range: 118,
      seats: 5,
      price: 33012,
      productionDate: "10/05/2011"
    },
    {
      brand: "1.18 km",
      model: "E-Up!",
      maxSpeed: 85,
      range: 80,
      seats: 3,
      price: 32258.75,
      productionDate: "11/09/2009"
    }
  ];

  var exampleContainer4 = document.getElementById('example4');
  new Handsontable(exampleContainer4, {
    data: arrayOfObjects,
    colHeaders: true,
    columnSorting: true,
    columns: [{
      data: 'brand',
      columnSorting: {
        indicator: true,
        //headerAction: false,
        compareFunctionFactory: function compareFunctionFactory(abc) {
          console.log(abc);
          var objectEach = Handsontable.helper.objectEach;
          var unitsRatios = {
            'km': 1,
            'miles': 1.609
          };
          var parseUnit = function(value, unit,...