Handsontable example

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

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

Babel + JSX

import {useEffect} from 'react';
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';
import HyperFormula from "hyperformula";


// register Handsontable's modules
registerAllModules();

const hf =  HyperFormula.buildEmpty({
        licenseKey: "internal-use-in-handsontable",
      })

const data = [
  [
    "id",
    "Parameter",
    "Group",
    "Type",
    "Units",
    "02-01-2021",
    "02-08-2021",
    "02-15-2021",
    "02-22-2021",
    "03-01-2021",
    "03-08-2021",
    "03-15-2021",
    "03-22-2021",
    "03-29-2021",
    "04-05-2021",
    "04-12-2021",
    "04-19-2021",
    "04-26-2021",
    "05-03-2021",
    "05-10-2021",
    "05-17-2021",
    "05-24-2021",
    "05-31-2021",
    "06-07-2021",
    "06-14-2021",
    "06-21-2021",
    "06-28-2021",
    "07-05-2021",
    "07-12-2021",
    "07-19-2021",
    "07-26-2021",
    "08-02-2021",
    "08-09-2021",
    "08-16-2021",
    "08-23-2021",
    "08-30-2021",
    "09-06-2021",
    "09-13-2021",
    "09-20-2021",
    "09-27-2021",
    "10-04-2021",
    "10-11-2021",
    "10-18-2021",
    "10-25-2021",
    "11-01-2021"
  ],
  [
    "Variable-75815",
    "Variable",
    "-",
    "Variable",
    "",
    "1",
    null,
    null,
    "1",
    null,
    "1",
    null,
    null,
    "1",
    "1",
    null,
    "1",
    null,
    null,
    null,
    "1",
    "11",
    null,
    "1",
    "1",
    "1",
    "1",
    "1",
    "1",
    "1"
  ],
  [
    "Flow-94847",
    "Flow",
    "-",
    "Flow",
    "",
    null,
    "1",
    null,
    null,
    "1",
    null,
    null,
    "1",
    null,
    "1",
    "1",
    "1",
    "1",
    "1",
    "1",
    "1",
    "1",
    null,
    "1",
    "1",
    "1",
    "1",
    "1",
    null,
    null,
    "1"
  ],
  [
    "Stock-99695",
    "Stock",
    "-",
    "Stock",
    "",
    null,
    null,
    "1",
    "1",
    null,
    "1",
    "1",
    "1",
    null,
    null,
   ...