Handsontable example

by aszymanski

HTML

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

<div id="example4" class="hot "></div>

SCSS

.customColor {
  color: blue;
}

Babel + JSX

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#example4');

const hot = new Handsontable(container, {
  data: Handsontable.helper.createSpreadsheetData(5, 5),
  colHeaders: true,
  height: 'auto',
  columns: [
  	{renderer: 'text'}, {renderer: 'text'}, {renderer: 'text'}, {renderer: 'text'}, {renderer: safeHtmlRenderer}
  ],
  licenseKey: 'non-commercial-and-evaluation'
});

function safeHtmlRenderer(instance, td, row, col, prop, value, cellProperties) {
    td.innerHTML = '<p class="customColor">I am blue</p>';
}