HoT - Nested headers (colspan first row), with hiding, filtering and context menus.

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" /> 
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/[email protected]/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

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

Babel + JSX

import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      themeName="ht-theme-main"
      data={[
        ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],
        ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],
        ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],
        ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],
        ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],
      ]}
      colHeaders={true}
      rowHeaders={true}
      height="auto"
      nestedHeaders={[
        [{ label: 'Dimension', colspan: 3 }, { label: 'Costs and Fees', colspan: 5 }, { label: 'Taxes', colspan: 2 }, ],
        ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
        ['Column A', 'Column B', 'Column C', 'Column D', 'Column E', 'Column F', 'Column G', 'Column H', 'Column I', 'Column J', ],
      ]}
      autoWrapRow={true}
      autoWrapCol={true}
      manualColumnMove={true}
      manualColumnFreeze={true}
      contextMenu={true}
      // enable filtering
      filters={true}
      // enable the column menu
      dropdownMenu={true}
            hiddenColumns={{
        indicators: true,
      }}
      
      licenseKey="non-commercial-and-evaluation"
    />
  );
};



const container = document.getElementById("example1");
const root = ReactDOM.createRoot(container);
container._reactRoot = root;
root.render(<ExampleComponent />);