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 .myRow {
  background: #c5d8f7;
}
.handsontable .myErase {
  background: #fff;
}

Babel + JSX

let index;
const example = document.getElementById('example');
const hot = new Handsontable(example, {
  data: Handsontable.helper.createSpreadsheetData(1000, 1000),
  licenseKey: 'non-commercial-and-evaluation',
  colWidths: 100,
  width: '100%',
  height: 320,
  rowHeights: 23,
  rowHeaders: true,
  colHeaders: true,
  beforeOnCellMouseOver(e, coords, td) {
  	if (coords.row < 0) {
    	return;
    }
    
  	index = coords.row;
    
    for (let i = 0; i < this.countCols(); i++) {
      if (coords.col >= 0) {
        this.setCellMeta(index, i, 'className', 'myRow');
      }
    }
    
    this.render();
  },
  beforeOnCellMouseOut(e, coords, td) {
  	for (let i = 0; i < this.countCols(); i++) {
      if (coords.col >= 0) {
        this.setCellMeta(index, i, 'className', 'myErase');
      }
    }
  }
});