Handsontable example

by handsoncode

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable@13.0/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@13.0/dist/handsontable.full.min.css" /> 
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

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

Babel + JSX

const arrayGen = new Array(8) // number of rows
  .fill()
  .map(() => new Array(2) // number of columns
  );
var data3 = [
    ["", "", ],
    ["", "", ],
    ["", "", ],
    ["", "", ],
    ["", "", ],
    ["", "", ],
    ["", "", ],
    ["", "", ]
  ],
  container3 = document.getElementById('example3'),
  container4 = document.getElementById('example4'),
  hot = new Handsontable(container3, {
    data: data3,
    colHeaders: ["this", "works"],
    outsideClickDeselects: false
  }),
  hot2 = new Handsontable(container4, {
    data: arrayGen,
    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");
        }
      },
      "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");
        }
      },
      "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");
        }
      },
      "cell-pink": {
        name: 'Color <b>cell</b> pink<div class="pink-dot"></div>',
        callback: function(key, options) {
          hot.setCellMeta(hot.getSelectedLast()[0], hot.getSelectedLast()[1], 'className', 'pink');
      ...