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.AutocompleteRenderer', 'Handsontable.renderers.AutocompleteRenderer'],
    ['Handsontable.BaseRenderer', 'Handsontable.renderers.BaseRenderer'],
    ['Handsontable.CheckboxRenderer', 'Handsontable.renderers.CheckboxRenderer'],
    ['Handsontable.HtmlRenderer', 'Handsontable.renderers.HtmlRenderer'],
    ['Handsontable.NumericRenderer', 'Handsontable.renderers.NumericRenderer'],
    ['Handsontable.PasswordRenderer', 'Handsontable.renderers.PasswordRenderer'],
    ['Handsontable.TextRenderer', 'Handsontable.renderers.TextRenderer']
  ];
  
  hot = new Handsontable(example,{
    data: myData,
    editor: false,
    colWidths: 370,
    colHeaders: ['Was', 'Is'],
    licenseKey: 'non-commercial-and-evaluation',
  });
  
  

});