Handsontable example

by fuggfuggfugg

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="example2" class="hot "></div>

Babel + JSX

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

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

new Handsontable(container, {
  data: [
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'Other Values'],
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4'],
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5'],
  ],
  colHeaders: true,
  rowHeaders: true,
  colWidths: 100,
  height: 'auto',
  manualColumnResize: true,
  nestedHeaders: [
    [{}, { label: 'External Budget', colspan: 5 }],
    [{}, 'Categories', { label: 'Category A', colspan: 2 }, { label: 'Category B', colspan: 2 }],
    
    ['Dewey', 'Totals', 'Committed', 'Uncommitted','Committed', 'Uncommitted'],
  ],
  collapsibleColumns: [
    { row: -3, col: 1, collapsible: true },
    { row: -2, col: 2, collapsible: true },
    { row: -2, col: 4, collapsible: true }
  ],
 /*  autoWrapRow: true,
  autoWrapCol: true,  */
  licenseKey: 'non-commercial-and-evaluation',
});