Handsontable example

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable@11.1.0/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@11.1.0/dist/handsontable.full.min.css" /> 
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

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

Babel + JSX

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

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

let obj = [
    {
        "id": "node_type",
        "parameter": "<li>Input</li>",
        "format": null,
        "scenario": null,
        "category": null,
        "source": null,
        "dependencies": null,
        "formula": null,
        "2020 (Y)": "",
        "2021 (Y)": "",
        "2022 (Y)": "",
        "2023 (Y)": "",
        "2024 (Y)": "",
        "2025 (Y)": "",
        "2026 (Y)": "",
        "2027 (Y)": "",
        "2028 (Y)": "",
        "2029 (Y)": ""
    },
    {
        "id": "Flow-89899",
        "parameter": "Flow_89899",
        "format": "{:,.2f}",
        "source": "input",
        "category": "[Channel, Product]",
        "scenario": "scenario_1",
        "dependencies": "-",
        "formula": "66",
        "2020 (Y)": "-",
        "2021 (Y)": "66.00",
        "2022 (Y)": "87.00",
        "2023 (Y)": "67.00",
        "2024 (Y)": "87.00",
        "2025 (Y)": "66.00",
        "2026 (Y)": "66.00",
        "2027 (Y)": "66.00",
        "2028 (Y)": "66.00",
        "2029 (Y)": "66.00"
    },
    {
        "id": "Flow-89899",
        "parameter": "Flow_89899",
        "format": "{:,.2f}",
        "source": "formula",
        "category": "web, book",
        "scenario": "scenario_1",
        "dependencies": "-",
        "formula": "",
        "2020 (Y)": "",
        "2021 (Y)": "",
        "2022 (Y)": "",
        "2023 (Y)": "",
        "2024 (Y)": "",
        "2025 (Y)": "",
        "2026 (Y)": "",
        "2027 (Y)": "",
        "2028 (Y)": "",
        "2029 (Y)": ""
    },
    {
        "id": "Flow-89899",
        "parameter": "Flow_89899",
        "format": "{:,.2f}",
        "source": "formula",
        "category": "retail, sugar",
        "scenario": "scenario_1",
        "dependencies": "-",
        "formula": "54",
        "2020 (Y)": "",
        "2021 (Y)": "",
        "2022 (Y)":...