JSFiddle - React, Tailwind, and code Playground

HTML

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

<h1>Demo</h1>
<div id="example1" class="hot "></div>
<div class="v"></div>

CSS

.v {
  padding: 0.5em 0;
  margin: 0.5em 0;
  background: #eee;
}

.switch-selection-on-headers {
  padding: 1em;
  margin: 0.5em 0;
  background: pink;
  border: 0
}

#example1{
  margin: 1em
}

.handsontable .box {
  width: 50px;
  height: 50px;
  padding: 10px;
  border: 2px solid blue;
}

React

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';
import { textRenderer } from "handsontable/renderers";

document.querySelector('.v').innerHTML = `Version: ${Handsontable.version}`

const nestedRows = [
    {
        "grapes": {
            "levelValueInfos": [
                {
                    "levelValue": "123",
                    "displayValue": "A Car"
                },
                {
                    "levelValue": "2019",
                    "displayValue": "2019"
                }
            ],
        },
        "apples": {
            "1": {
                "measure": 1,
            },
            "-2": {
                "measure": 2,
            }
        }
    },
    {
        "grapes": {
            "levelValueInfos": [
                {
                    "levelValue": "123",
                    "displayValue": "A Car"
                },
                {
                    "levelValue": "2020",
                    "displayValue": "2020"
                }
            ],
        },
        "apples": {
            "1": {
                "measure": 3,
            },
            "-2": {
                "measure": 4,
            }
        }
    },
    {
        "grapes": {
            "levelValueInfos": [
                {
                    "levelValue": "123",
                    "displayValue": "A Car"
                },
                {
                    "levelValue": "2021",
                    "displayValue": "2021"
                }
            ],
        },
        "apples": {
            "1": {
                "measure": 5,
            },
            "-2": {
                "measure": 6,
            }
        }
    },
    {
        "grapes": {
            "levelValueInfos": [
                {
                    "levelValue": "123",
                    "displayValue": "A Car"
                },
                {
                    "levelValue": "2022",
                   ...