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 .makeMyBlue {
  color: blue;
  background: #7ec2f7;
}

.handsontable .makeMyGreen {
  color: green;
  background: #b6f47f;
}

Babel + JSX

const columnHeaders = [
	{ name: 'Anna', emoji: '🐈'},
	{ name: 'Jane', emoji: '🦉'},
	{ name: 'Antony', emoji: '🐰'},
];
const example = document.getElementById('example');
const hot = new Handsontable(example, {
  data: Handsontable.helper.createSpreadsheetData(15, 3),
  licenseKey: 'non-commercial-and-evaluation',
  colHeaders(column) {
  	const { name, emoji } = columnHeaders[column];
  
  	return `<u>${name}</u><sup>${emoji}</sup>`
  },
  rowHeaders: true,
  colWidths: 100,
});