JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
 
<!-- Theme main -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/styles/handsontable.min.css" />
<!-- Theme basis -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/styles/ht-theme-main.min.css" />


<div id="analytic" style="position: relative;z-index:5;">

JavaScript

/* ===============================
   1️⃣ Container
================================ */
const container = document.querySelector('#analytic');

/* ===============================
   2️⃣ Hard-coded column schema
================================ */
const headerName = [
  { type: "tracking", label: "Tracking ID" },
  { type: "date", label: "Submission Date" },
  { type: "text", label: "IP Address" },
  { type: "text", label: "Full Name" },
  { type: "email", label: "Email" },
  { type: "phone", label: "Phone" },
  { type: "number", label: "Age" },
  { type: "agree", label: "Agreed" },
  { type: "signature", label: "Signature" },
  { type: "reply", label: "Reply" }
];

/* ===============================
   3️⃣ Sample data (rows)
   Must match column order
================================ */
const data = [
  [
    1001,
    "2024-10-01",
    "192.168.1.10",
    "Ahmed Ali",
    "[email protected]",
    "+20123456789",
    29,
    true,
    "https://via.placeholder.com/150x50?text=Sign",
    "Open"
  ],
  [
    1002,
    "2024-10-02",
    "192.168.1.11",
    "Sara Mohamed",
    "[email protected]",
    "+20198765432",
    34,
    false,
    "https://via.placeholder.com/150x50?text=Sign",
    "Open"
  ],  [
    1002,
    "2024-10-02",
    "192.168.1.11",
    "Sara Mohamed",
    "[email protected]",
    "+20198765432",
    34,
    false,
    "https://via.placeholder.com/150x50?text=Sign",
    "Open"
  ],  [
    1002,
    "2024-10-02",
    "192.168.1.11",
    "Sara Mohamed",
    "[email protected]",
    "+20198765432",
    34,
    false,
    "https://via.placeholder.com/150x50?text=Sign",
    "Open"
  ],  [
    1002,
    "2024-10-02",
    "192.168.1.11",
    "Sara Mohamed",
    "[email protected]",
    "+20198765432",
    34,
    false,
    "https://via.placeholder.com/150x50?text=Sign",
    "Open"
  ],  [
    1002,
    "2024-10-02",
    "192.168.1.11",
    "Sara Mohamed",
   ...