Handsontable example

by handsoncode

HTML

<div id="example"></div>
<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 .colored {
  background: #FCB515;
  color: #222;
  animation: blinker 1s linear;
}
@keyframes blinker {
  50% {
    opacity: 0.5;
  }
}

Babel + JSX

const example = document.getElementById('example');
const hot = new Handsontable(example, {
  data: Handsontable.helper.createSpreadsheetData(10, 10),
  licenseKey: 'non-commercial-and-evaluation',
  rowHeaders: true,
  colHeaders: true,
  beforeChange(changes) {
    changes.forEach((change) => {
    	const [row, column, oldValue, newValue] = change;
      
      this.setCellMeta(row, column, 'className', 'colored');
    });
  },
});