Handsontable example

by arzo

HTML

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

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
    container7 = document.getElementById('example7'),
    hot7;
  
  hot7 = new Handsontable(container7, {
    data: [
      model({id: 1, name: 'Ted Right', address: ''}),
      model({id: 2, name: 'Frank Hones22t', address: ''}),
      model({id: 3, name: 'Joan Well', address: ''}),
      model({id: 4, name: 'Gail Polite', address: ''}),
      model({id: 5, name: 'Michael Fair', address: ''})
    ],
    dataSchema: model,
    colHeaders: ['ID', 'Name', 'Address'],
    columns: [
      {data: property('id')},
      {data: property('name')},
      {data: property('address')}
    ],
    minSpareRows: 1
  });
  
  function model(opts) {
    var
      _pub = {},
      _priv = {
        "id": undefined,
        "name": undefined,
        "address": undefined
      };
  
    for (var i in opts) {
      if (opts.hasOwnProperty(i)) {
        _priv[i] = opts[i];
      }
    }
  
    _pub.attr = function (attr, val) {
      if (typeof val === 'undefined') {
        window.console && console.log("\t\tGET the", attr, "value of", _pub);
        return _priv[attr];
      }
      window.console && console.log("SET the", attr, "value of", _pub);
      _priv[attr] = val;
  
      return _pub;
    };
  
    return _pub;
  }
  
  function property(attr) {
    return function (row, value) {
      return row.attr(attr, value);
    }
  }