Handsontable example

by handsoncode

HTML

<div id="example"></div>
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">

JavaScript

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: [
    ['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', '★★★★']
  ],
  licenseKey: 'non-commercial-and-evaluation',
  columnSorting: true,
  columns: [
  	{
    	title: 'Brand<br><b>(non-sortable)</b>',
      columnSorting: {
      indicator: false,
      headerAction: false,
      compareFunctionFactory: function compareFunctionFactory() {
        return function comparator() {
          return 0; // Don't sort the first visual column.
        };
      }
    }
    },
    { title: 'Model' },
    { title: 'Code name' },
    { title: 'Country of origin' },
    { title: 'Rank' },
  ],
});