Handsontable example

HTML

<script src="https://docs.handsontable.com/pro/2.0.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://docs.handsontable.com/pro/2.0.0/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<h4>
Select a cell and change it's color with the context menu
</h4>
<div>
This table uses a predefined array of arrays passed into the constructor
</div>
<div id="example3" class="hot handsontable"></div>
<br/>
<div>
This table uses an array of arrays generated with a function
</div>
<div id="example4" class="hot handsontable"></div>

CSS

body {
	font: 0.8em sans-serif;
}
.btyellow,
.btblue, .btpink, .btwhite {
  padding: 10px;
  width: 150px;
  border: 2px solid #ccc;
  margin-bottom: 2px;
  background: #fff;
  border-radius: 2px;
}
.handsontable .white {
  background: #fff;
}
.handsontable .yellow {
  background: #f7ecb7;
}
.handsontable .blue {
  background: #b7ebf4;
}
.handsontable .pink {
	background: #fcc9e9;
}
.yellow-dot, .blue-dot, .pink-dot, .white-dot {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	float: right;
	border: 1px solid #777;
}
.white-dot {
	background: #fff;
}
.yellow-dot {
	background: #f7ecb7;
}
.blue-dot {
	background: #b7ebf4;
}
.pink-dot {
	background: #fcc9e9;
}

JavaScript

const generateArray = (numArrays, value) => {
  return Array(numArrays).fill([[value], [value]] );
};
var
  data3 = [
    ["", "",],
    ["", "",],
    ["", "",],
    ["", "",],
    ["", "",],
    ["", "",],
    ["", "",],
    ["", "",]
  ],
  data4 = generateArray(8, ""),
  container3 = document.getElementById('example3'),
  container4  = document.getElementById('example4'),
  hot = new Handsontable(container3, {
    data: data3,
    colHeaders: ["this", "works"],
    outsideClickDeselects: false
  }),
  hot2 = new Handsontable(container4, {
    data: data4,
    colHeaders: ["doesn't", "work"],
    outsideClickDeselects: false
  });

hot.selectCell(0, 0);
hot2.selectCell(0, 0);

hot.updateSettings({
  contextMenu: {
    items: {
			"cell-white": {
        name: 'Color <b>cell</b> white<div class="white-dot"></div>',
        callback: function(key, options) {
						hot.setCellMeta(hot.getSelectedLast()[0], hot.getSelectedLast()[1], 'className', 'white');
            hot.setDataAtCell(hot.getSelectedLast()[0], hot.getSelectedLast()[1], "white");
						hot.render();
        }
      },
			"cell-yellow": {
        name: 'Color <b>cell</b> yellow<div class="yellow-dot"></div>',
        callback: function(key, options) {
						hot.setCellMeta(hot.getSelectedLast()[0], hot.getSelectedLast()[1], 'className', 'yellow');
            hot.setDataAtCell(hot.getSelectedLast()[0], hot.getSelectedLast()[1], "yellow");
						hot.render();
        }
      },
			"cell-blue": {
        name: 'Color <b>cell</b> blue<div class="blue-dot"></div>',
        callback: function(key, options) {
						hot.setCellMeta(hot.getSelectedLast()[0], hot.getSelectedLast()[1], 'className', 'blue');
            hot.setDataAtCell(hot.getSelectedLast()[0], hot.getSelectedLast()[1], "blue");
						hot.render();
        }
      },
			"cell-pink": {
        name: 'Color <b>cell</b> pink<div class="pink-dot"></div>',
        callback: function(key, options) {
						hot.setCellMeta(hot.getSelectedLast()[0],...