Handsontable example

by Sagar Bendale

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;
}

Babel + JSX

const example = document.getElementById('example1');
const myData = [
  [21, 'Less than 20', 'Do nothing'],
  [19, 'Less than 20', 'Allow invalid and display an alert'],
	[19, 'Less than 20', 'Allow invalid and a read-only comment'],
	[19, 'Less than 20', 'Allow invalid and apply formatting'],
	[19, 'Less than 20', 'Disallow invalid - do not close the editor'],
  [19, 'Less than 20', 'Reject an invalid value'],
];

const hot = new Handsontable(example, {
  data: myData,
  colHeaders: ['Value', 'Criteria', 'Comment'],
  colWidths: 235,
  comments: true,
  cells: function(row, col) {
  	const cellProperties = {};
    
    if (col === 0) {
			cellProperties.type = 'numeric';
      
      if (row === 0) {
      	cellProperties.valid = true;
      }
		} else {
			cellProperties.readOnly  = true;
		}
		
		if (row === 4) {
			// Disallow invalid - do not close the editor
			cellProperties.allowInvalid = false;
		}
		
    return cellProperties;
  },
	beforeChange: function(changes){
		if(changes[0][0] === 5 && changes[0][1] === 0 && changes[0][3] > 19){
			changes[0] = null;
		}
	},
	afterValidate: function(isValid, value, row, prop, source){
		let col = this.propToCol(prop);
    
    if (col !== 0) {
    	return;
    }
    let result;

    switch(row) {
    	case 1:
        result = value < 20;
        if (!result) {
          alert('Invalid value');
        }
        return result;

      case 2:
      	const comments = this.getPlugin('comments');
      	result = value < 20;
        
        if (!result) {
        	comments.updateCommentMeta(row, col, {value: 'Invalid value', readOnly: true});
          comments.showAtCell(row, col);

        } else {
        	comments.removeCommentAtCell(row, col, true);
        }
         
        return result;
				
			case 3:
      	return value < 20;
      
			case 4:
      	return value < 20;

      default:
      	break;
    }
	}
});


hot.validateCells();