Handsontable example

by handsoncode

HTML

<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">
<div id="example"></div>

CSS

.handsontable .blueCell {
	background: #FCB515;
}

Babel + JSX

const example = document.getElementById('example');
const hot = new Handsontable(example, {
  data: Handsontable.helper.createSpreadsheetData(1000, 1000),
  licenseKey: 'non-commercial-and-evaluation',
  width: 584,
  height: 320,
  colWidths: 100,
  contextMenu: true,
  rowHeaders: true,
  colHeaders: true,
  afterCreateRow(index) {
    setTimeout(() => {
      for (let i = 0; i < hot.countCols(); i++) {
        this.setCellMeta(index, i, 'className', 'blueCell')
      }

      this.render()
    }, 50)
  }
});