Handsontable - GuideMe playground

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: [
    ['150', '50', '250'],
    ['50', '25', '75'],
    ['A3', 'B3', 'C3'],
    ['A4', 'B4', 'C4'],
    ['A5', 'B5', 'C5'],
  ],
  height: 'auto',
  colHeaders: ['Fees', 'Costs', 'Total Cost to Client'],
  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,
  // individually add column hiding context menu items
  // contextMenu: [`hidden_columns_show`, `hidden_columns_hide`], //
  hiddenColumns: {
    columns: [3, 5, 9],
    indicators: true,
  },
});