Handsontable example

HTML

<div>
  <div id="example1" class="hot handsontable htColumnHeaders"></div>
</div>

<p>Callback console: <code>[[row, col, oldValue, newValue], ...]</code></p>
<p>Edit the above grid to see callback</p>
<p>
  <b>Note:</b> Please keep in mind that changes in table are applied after running <b>all validators</b> (both synchronous and and asynchronous) from <b>every</b> changed cells.
</p>


<pre id="example1console" class="console"></pre>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">

JavaScript

var people = [
        {id: 1, name: {first: 'Joe', last: 'Fabiano'}, ip: '0.0.0.1', email: '[email protected]'},
        {id: 2, name: {first: 'Fred', last: 'Wecler'}, ip: '0.0.0.1', email: '[email protected]'},
        {id: 3, name: {first: 'Steve', last: 'Wilson'}, ip: '0.0.0.1', email: '[email protected]'},
        {id: 4, name: {first: 'Maria', last: 'Fernandez'}, ip: '0.0.0.1', email: '[email protected]'},
        {id: 5, name: {first: 'Pierre', last: 'Barbault'}, ip: '0.0.0.1', email: '[email protected]'},
        {id: 6, name: {first: 'Nancy', last: 'Moore'}, ip: '0.0.0.1', email: '[email protected]'},
        {id: 7, name: {first: 'Barbara', last: 'MacDonald'}, ip: '0.0.0.1', email: 'krishna'},
        {id: 8, name: {first: 'Wilma', last: 'Williams'}, ip: '0.0.0.1', email: '[email protected]'},
        {id: 9, name: {first: 'Sasha', last: 'Silver'}, ip: '0.0.0.1', email: '[email protected]'},
        {id: 10, name: {first: 'Don', last: 'Pérignon'}, ip: '0.0.0.1', email: 'Don.Pé[email protected]'},
        {id: 11, name: {first: 'Aaron', last: 'Kinley'}, ip: '0.0.0.1', email: '[email protected]'}
      ],
      example1 = document.getElementById('example1'),
      example1console = document.getElementById('example1console'),
      settings1,
      ipValidatorRegexp,
      emailValidator;
  
  ipValidatorRegexp = /^(?:\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b|null)$/;
  
  emailValidator = function (value, callback) {
    setTimeout(function(){
      if (/.+@.+/.test(value)) {
        callback(true);
      }
      else {
        callback(false);
      }
    }, 1000);
  };
  
  settings1 = {
    data: people,
    beforeChange: function (changes, source) {
      for (var i = changes.length - 1; i >= 0; i--) {
        // gently don't accept the word "foo" (remove the change at index i)
        if (changes[i][3] === 'foo') {
          changes.splice(i, 1);
        }
        // if any of pasted...