Handsontable example

Example with following features enabled: * Hide columns * Context menu * Manual column resize

by Blake Gilchrist

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

Babel + JSX

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

const container = document.querySelector('#example5');
const hot = new Handsontable(container, {
  licenseKey: 'non-commercial-and-evaluation',
  data: [
    ['Another really', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],
  ],
  height: 'auto',
  colHeaders: ['Another really long column name', 'Full name', 'Something really long','Country', 'City', 'Address', 'Zip code', 'Mobile', 'E-mail'],
  rowHeaders: true,
  // colWidths: 100, //
  wordWrap: true, // NOTE! - only applies to cells by default and not headers //
  comments: true,
  displayDelay: 100,
  manualColumnFreeze: true,
  manualColumnResize: true,
  contextMenu: true,
  manualColumnMove: true,
  // individually add column hiding context menu items
  // contextMenu: [`hidden_columns_show`, `hidden_columns_hide`], //
  hiddenColumns: {
    columns: [3, 5, 9],
    indicators: true,
  },
});