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

CSS

* {
  padding:0;
  margin:0;
  font: 14px 'Times New Roman';
  letter-spacing: 0.5px;
}

JavaScript

var arrayOfArrays = [
    ["Tesla", "Model 3", "BlueStar", "USA", "★★★★☆"],
    ["Tesla", "Model S", "WhiteStar", "USA", "★★★★★"],
    ["Mitsubishi", "iMiEV", "", "Japan", "★★☆☆☆"],
    ["Ford", "Focus EV", "", "USA", "★★☆☆☆"],
    ["Mitsubishi", "iMiEV Sport", "", "Japan", "★★☆☆☆"],
    ["Tesla", "Roadster", "DarkStar", "USA", "★★★★★"],
    ["Volkswagen", "e-Golf","", "Germany", "★★☆☆☆"],
    ["Volkswagen", "E-Up!", "", "Germany", "★★☆☆☆"],
    ["Ford", "C-Max Energi", "", "USA", "★☆☆☆☆"],
    ["BYD", "Denza", "", "China", "★★★☆☆"],
    ["BYD", "e5", "", "China", "★★★☆☆"],
    ["BYD", "e6", "", "China", "★★★★☆"]
  ];
  
  var exampleContainer1 = document.getElementById('example1');
  
  new Handsontable(exampleContainer1, {
    data: arrayOfArrays,
    colHeaders: ["Brand", "Model", "Code name", "Country of origin", "Rank"],
    columnSorting: true,
    licenseKey: 'non-commercial-and-evaluation',
    colWidths: [140, 140, 130, 140, 120],
    columns: function (visualColumn) {
      if (visualColumn === 4) {
        return {
          columnSorting: {
            compareFunctionFactory: function(sortOrder, columnMeta) {
 							return function comparator(rank, nextRank) {
                var fullStarsForRank = rank.split("★").length;
                var fullStarsForNextRank = nextRank.split("★").length;
                
                if (fullStarsForRank < fullStarsForNextRank) {
                  return sortOrder === 'asc' ? -1 : 1;

                } else if (fullStarsForRank > fullStarsForNextRank) {
                  return sortOrder === 'asc' ? 1 : -1;
                }
                
                return 0;
 							};
            }
          }
        }
      }
    
    	return {};
    }
  });
  setTimeout(function(){hot.render();},50)