Handsontable example

by handsoncode

HTML

<div id="example"></div>
<button class="btn" data-color="green">Make cells green</button>
<button class="btn" data-color="orange">Make cells orange</button>
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">

CSS

.handsontable .green {
  background: #37BC6C;
  font-weight: bold;
}

.handsontable .orange {
  background: #FCB515;
  font-weight: bold;
}

.btn {
  padding: 20px;
  font: 1.4em sans-serif;
}
[data-color="green"] {
  background: #37BC6C;
}
[data-color="orange"] {
  background: #FCB515;
}

Babel + JSX

const example = document.getElementById('example');
let startRow;
let startColumn;
let endRow;
let endColumn;
const hot = new Handsontable(example, {
  data: Handsontable.helper.createSpreadsheetData(10, 10),
  licenseKey: 'non-commercial-and-evaluation',
  colWidths: 100,
  rowHeights: 23,
  rowHeaders: true,
  colHeaders: true,
  afterSelectionEnd: function(r, c, r2, c2) {
    [startRow, endRow] = [Math.min(r, r2), Math.max(r, r2)];
    [startColumn, endColumn] = [Math.min(c, c2), Math.max(c, c2)];
  }
});

document.addEventListener('click', (event) => {
	const { target } = event;

	if (!target.classList.contains('btn')) {
  	return;
  }
  
  const color = target.getAttribute('data-color');
  
  for (var j = 0; j < (endColumn - startColumn + 1); j++) {
    for (var i = 0; i < (endRow - startRow + 1); i++) {
      hot.setCellMeta(startRow + i, startColumn + j, 'className', color)
    }
  }
  
  hot.render();
});