Handsontable example

by handsoncode

HTML

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

CSS

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

.handsontable .category {
  background: #ccc;
  color: #333;
}

Babel + JSX

const example = document.getElementById('example1');
const myData = [
  ['Allow Value', null, null],
  [5, 'Between 0-20', null],
  [5, 'Not between 0-20', null],
  [21, 'Equal to 20', null],
  [21, 'Not equal to 20', null],
  [21, 'Greater than 20', null],
  [21, 'Less than 20', null],
  [21, 'Greater or equal to 20', null],
  ['Allow type', null, null],
  [20, 'Number', null],
  [20, 'Text', null],
  ['George Clooney', 'Text length is less than 20 characters', null],
  ['Mike Tyson', 'Text is only lowercase', 'Ignore blank spaces'],
  ['ANTHONY HOPKINS', 'Text is only uppercase', 'Ignore blank spaces'],
  ['12/02/abc', 'Date', 'Format: MM/DD/YYYY'],
  ['13:abc', 'Time', 'Format: H:mm'],
];

const hot = new Handsontable(example, {
  data: myData,
  colHeaders: ['Value', 'Criteria', 'Comment'],
  licenseKey: 'non-commercial-and-evaluation',
  colWidths: [240, 265, 240],
  cells: function(row, col){
  	const cellProperties = {};

    if(row === 0 || row === 8){
    	cellProperties.className = 'category';
      cellProperties.readOnly = true;
    }

    if (col === 0) {
    	if (row > 0 && row !== 8 && row < 10) {
        cellProperties.type = 'numeric';

      } else if (row > 10 && row < 14) {
      	cellProperties.validator = /./g;

      } else if (row === 14) {
      	cellProperties.type = 'date';
        cellProperties.dateFormat = 'MM/DD/YYYY';

      } else if (row === 15) {
      	cellProperties.type= 'time';
        cellProperties.timeFormat= 'H:mm';
      }

    } else {
    	cellProperties.readOnly = true;
    }

    return cellProperties;
  },
  afterValidate: function(isValid, value, row, prop, source) {
	//can be used for cells that already have an active validator
    if (this.propToCol(prop) !== 0) {
    	return;
    }

    switch(row) {
    	case 1:
      	return value <= 20 && value >= 0;

      case 2:
      	return value > 20 || value < 0;

      case 3:
      	return value === 20;

      case 4:
      	return value !== 20;

      case 5:
     ...