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;
  padding: 0;
  margin: 0;
  font: 0.9em sans-serif;
}

Babel + JSX

const mydata = [
  ['Anna', 'Johansson', '555-555-558', 78],
  ['Micheal', 'Anton', '555-555-559', 54],
  ['Irvina', 'Adams', '555-555-560', 41],
  ['Joan', 'Weeh', '555-555 -561', 55],
  ['Michelle', 'Vens', '555-555-562', 69],
  ['John', 'Mikels', '555-555-563', 58]
];

const example1 = document.getElementById('example1');
const settings1 = {
  data: mydata,
  colWidths: [200, 200, 200, 117],
  licenseKey: 'non-commercial-and-evaluation',
  colHeaders: ['Name', 'Surname', 'Telephone', 'Age'],
  columns: [
  	{}, 
    {},
    {
    	validator: function(value, callback) {
      	if (/^(\d|\-)*$/.test(value)) { 
        	callback(true);
      	} else {
        	callback(false);
      	}
    	}
  	},
    {}
  ]
};

const hot = new Handsontable(example1, settings1);

hot.validateCells();