Upload 3 files

static/panel.css

@@ -0,0 +1,42 @@
+.tabulator {
+    font-family: Courier New !important;
+    font-weight: normal !important;
+    font-size: 12px !important;
+}
+
+.tabulator-cell {
+    overflow: visible !important;
+}
+
+
+.image-zoom-viewer {
+    display: inline-block;
+    overflow: visible;
+    z-index: 1000;
+}
+
+.image-zoom-viewer::after {
+    content: "";
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+
+.image-zoom-viewer:hover::after {
+    pointer-events: all;
+}
+
+/* When hovering over the container, scale its child (the SVG) */
+.tabulator-cell:hover .image-zoom-viewer svg {
+    padding: 3px;
+    position: absolute;
+    background-color: rgba(250, 250, 250, 0.854);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.618);
+    border-radius: 3px;
+    transform: scale(3); /* Scale up the SVG */
+    transition: transform 0.3s ease;
+    pointer-events: none; /* Prevents the SVG from blocking mouse interactions */
+    z-index: 1000;
+}

static/panel.js

@@ -0,0 +1,22 @@
+function executeScriptFormatter(cell, formatterParams, onRendered) {
+    onRendered(function(){
+        const shadowRoot = cell.getElement().getRootNode();
+        if (shadowRoot instanceof ShadowRoot) {
+            const script = cell.getElement().querySelector('script');
+            if (script) {
+                // Replace "document." with "shadowRoot." in the script code
+                const scriptCode = script.innerText.replace(/document\./g, 'shadowRoot.');
+                // Execute the modified script code
+                const func = new Function('shadowRoot', scriptCode);
+                func(shadowRoot);
+            }
+        }
+    });
+    return cell.getValue();
+};
+
+
+
+Tabulator.extendModule("format", "formatters", {
+    executeScriptFormatter: executeScriptFormatter,
+});