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

CSS

body {
  background: #FFF;
  margin: 0;
  padding: 0;
}
td, th {
  font: 0.8em 'Helvetica';
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  var
    example = document.getElementById('example1'),
    hot;
  var myData = [
  	['Handsontable.AutocompleteCell', 'Handsontable.cellTypes.autocomplete'],
    ['Handsontable.CheckboxCell', 'Handsontable.cellTypes.checkbox'],
    ['Handsontable.DateCell', 'Handsontable.cellTypes.date'],
    ['Handsontable.DropdownCell', 'Handsontable.cellTypes.dropdown'],
    ['Handsontable.HandsontableCell', 'Handsontable.cellTypes.handsontable'],
    ['Handsontable.NumericCell', 'Handsontable.cellTypes.numeric'],
    ['Handsontable.PasswordCell', 'Handsontable.cellTypes.password'],
    ['Handsontable.TextCell', 'Handsontable.cellTypes.text'],
   ['Handsontable.TimeCell', 'Handsontable.cellTypes.time'] 
  ];
  
  hot = new Handsontable(example,{
    data: myData,
    editor: false,
    colWidths: 373,
    licenseKey: 'non-commercial-and-evaluation',
    colHeaders: ['Was', 'Is']
  });
  
  

});