JSFiddle - React, Tailwind, and code Playground

by nihal123

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" />
</head>
<body>
    <div id="example"></div>
    <div class="tooltip" style="visibility: hidden">Hello World</div>
    <script src="hooksCallbacks.js"></script>
    <script src="constants.js"></script>
    <script src="index.js"></script>
</body>
</html>

CSS

.tooltip {
  position: absolute;
  z-index: 99999;
  background-color: #ddd;
}

JavaScript

let defaultTextColor = "#222";
let defaultBackgroundColor = "#FFFFF";
let defaultBorderColor = "#ccc"
let tableHeader = [];
let tablebody = [];
let tableColumnOrder = [];
let tableColumnWidth = [];
let nestedTableHeader = [];
let hasNestedTableHeader = false;
let tooltip = document.querySelector('.tooltip');
let jsonData = {
    "stickyColumns": 1,
    "columns": [
        {"id": 0, "columnIdentifier": "firstcolumn", "name": "First Column", "width": 35},
        {"id": 1, "columnIdentifier": "secondcolumn", "name": "Second Column", "width": 20},
        {"id": 2, "columnIdentifier": "thirdcolumn", "name": "Third Column", "width": 45},
        {"id": 3, "columnIdentifier": "forthcolumn", "name": "Forth Column", "width": 45},
        {"id": 4, "columnIdentifier": "fifthcolumn", "name": "Fifth Column", "width": 45},
        {"id": 5, "columnIdentifier": "sixthcolumn", "name": "Sixth Column", "width": 45},
        {"id": 6, "columnIdentifier": "seventhcolumn", "name": "Seventh Column", "width": 45},
    ],
    "nestedColumns": [
        "firstcolumn",
        {"name": "First Nested Col", "values": ["secondcolumn", "thirdcolumn"]},
        {"name": "Second Nested Col", "values": ["forthcolumn", "fifthcolumn", "sixthcolumn"]},
        "seventhcolumn"
    ],
    "rows": [
        {
            "id": "shdjkkashkj",
            "isChild": false,
            "parentElement": "",
            "firstcolumn": {
                renderer: "text",
                value: "saasd",
                textColor: "",
                backgroundColor: "",
                borderColor: "",
                tooltip: {
                    type: 'error',
                    template: 'single-line',
                    hasValues: false,
                    message: 'error text'
                },
                disabled: false,
                prefix: "USD",
                suffix: ""
            },
            "secondcolumn": {
                renderer: "dropdown",
                value:...