Handsontable example

by handsoncode

HTML

<script src="https://docs.handsontable.com/bower_components/handsontable/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://docs.handsontable.com/bower_components/handsontable/dist/handsontable.full.min.css">
<div id="example1"></div>

CSS

body {
  background: #fff;
  padding: 0;
  margin: 0;
  font: 0.9em sans-serif;
}

Babel + JSX

const mydata = [
  ['Anna', '-' ,'Johansson', 'Ann78'],
  ['Micheal', 'James', 'Anton', 'Havana_BY'],
  ['Irvina','-' , 'Adams', 'CatWoman'],
  ['Joan', 'Veronica', 'Weeh', 'JoNaNa'],
  ['Michelle', '-' , 'Vens', 'the-One24'],
  ['John', '-' , 'Mikels', 'xyz_XYZ']
];

const example1 = document.getElementById('example1');
const settings1 = {
  data: mydata,
  licenseKey: 'non-commercial-and-evaluation',
  colWidths: [160, 160, 170, 235],
  colHeaders: ['Name', 'Middle name', 'Surname', 'Nickname'],
  columns: [
  	{}, 
    {},
    {},
    {
      validator: function(value, callback) {
        if (/^([a-zA-Z0-9]|\_){4,15}$/.test(value)) {
          callback(true)
        } else {
          callback(false)
        }
      }
  	}
  ]
};

const hot = new Handsontable(example1, settings1);

hot.validateCells();