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">

CSS

.handsontable .blue .htAutocompleteArrow::after {
 content: '✋';
 width: 20px;
 position: absolute;
 margin: 0 0 0 -10px;
}
.handsontable .blue .htAutocompleteArrow {
 color: #fff
}
.handsontable .blue .htAutocompleteArrow:hover {
 color: #fff
}

Babel + JSX

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: [
    ['Tesla', 2017, 'black', 'black'],
    ['Nissan', 2018, 'blue', 'blue'],
    ['Chrysler', 2019, 'yellow', 'black'],
    ['Volvo', 2020, 'white', 'gray']
  ],
  licenseKey: 'non-commercial-and-evaluation',
  colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
  columns: [
  	{},
    { type: 'numeric' },
    {
      type: 'dropdown',
      source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],
      className: 'blue',
    },
    {
      type: 'dropdown',
      source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],
    }
  ],
});