Handsontable example

by handsoncode

HTML

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

CSS

body .handsontable .pink {
  color: #ea9dc1
}

JavaScript

var example = document.getElementById('example1');
  var hot = new Handsontable(example, {
    data: [['Ellie\'s family']],
    colWidths: 100,
    rowHeaders: true,
    colHeaders: true
  });

hot.setCellMeta(0,0, 'className', 'pink');
hot.setCellMeta(0,0, 'myArray', [1,5, 'Name']);
hot.setCellMeta(0,0, 'myObject', {person: {name:'Ellie', last: 'March', who: 'wife'}, person_2: {name: 'John', last: 'Smith', who: 'husband'}});
hot.setCellMeta(0,0, 'getNames', function(){
	console.log(this.myObject.person.who + ' ' + this.myObject.person.name);
  console.log(this.myObject.person_2.who + ' ' + this.myObject.person_2.name);
});
hot.render();


hot.addHook('afterSelectionEnd', function(r, c){
	if(hot.getCellMeta(r,c).getNames){
  	hot.getCellMeta(r,c).getNames();
  }
})