Handsontable example

HTML

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

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

SCSS

.handsontable thead TR:nth-child(1) TH:first-child:after {
  content: 'â„–'
}

Babel + JSX

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

const container = document.querySelector('#example1');
const hot = new Handsontable(container, {
  data: [
    ['A1', 'C1', 'D1', 'E1'],
    ['A2', 'C2', 'D2', 'E2'],
    ['A3', 'C3', 'D3', 'E3'],
    ['A4', 'C4', 'D4', 'E4'],
  ],
  colHeaders: true,
  rowHeaders: true,
  height: 'auto',
  manualColumnResize: true,
  nestedHeaders: [
    [
        {
            "label": "A",
            "colspan": 1
        },
        {
            "label": "B",
            "colspan": 3
        }
    ],
    [
        {
            "label": "",
            "colspan": 1
        },
        {
            "label": "C",
            "colspan": 1
        },
        {
            "label": "D",
            "colspan": 1
        },
        {
            "label": "E",
            "colspan": 1
        }
    ],
    [
        {
            "label": "",
            "colspan": 1
        },
        {
            "label": "F",
            "colspan": 1
        }
    ],
  ],
  licenseKey: 'non-commercial-and-evaluation',
});