Handsontable example

by handsoncode

HTML

<p>
  Use the context menu to change the font family of the whole table.
</p>
<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

.sans {
  font: 0.8em sans-serif;
}

.verdana {
  font: 0.8em Verdana;
}

Babel + JSX

const example = document.getElementById('example');
const hot = new Handsontable(example, {
  data: [
    ['', 'Kia', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
    ['2012', 10, 11, 12, 13, 15, 16],
    ['2013', 10, 11, 12, 13, 15, 16],
    ['2014', 10, 11, 12, 13, 15, 16],
    ['2015', 10, 11, 12, 13, 15, 16],
    ['2016', 10, 11, 12, 13, 15, 16]
  ],
  licenseKey: 'non-commercial-and-evaluation',
  rowHeaders: true,
  colHeaders: true,
  contextMenu: {
    items: {
      "change_to_sans": {
        name: 'Change font to Sans-Serif',
        callback() {
          hot.updateSettings({
            className: 'sans'
          });
        },
      },
      "change_to_verdana": {
        name: 'Change font to Verdana',
        callback() {
          hot.updateSettings({
            className: 'verdana'
          });
        },
      },
    },
  },
});