HoT Freeze columns

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]/styles/handsontable.min.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/styles/ht-theme-main.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/styles/ht-theme-horizon.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/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// generate an array of arrays with dummy data


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

new Handsontable(container, {
    data: [
    ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O'],
    ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O'],
    ['=B3+C3', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'K', 'L', 'M', 'N', 'O'],
  ],
  themeName: 'ht-theme-main',
    formulas: {
    engine: HyperFormula,
  },
  nestedHeaders: [
    ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O'],
    ['Dimension', 'Dimension', 'Dimension', 'Dimension', 'Taxes', 'Taxes', 'Taxes', 'Fees', 'Fees', 'Fees', 'Other costs', 'Other costs', 'Other costs', 'Other costs', 'Other costs'],
  ],
  colWidths: 100,
  width: '100%',
  height: 320,
  rowHeaders: true,
  colHeaders: true,
  fixedColumnsStart: 0,
  contextMenu: true,
  manualColumnFreeze: true,
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});