@ninebone/table 0.0.70 → 0.0.71

package/dist/nine-table.js

@@ -15,211 +15,7 @@ const vt = class vt extends Rt.constructor {
 l(vt, "Trace");
 let dt = vt;
 const J = new dt();
-var Y, Q;
-const X = class X extends HTMLElement {
-  constructor() {
-    super();
-    h(this, Y, null);
-    I(this, "init", /* @__PURE__ */ l((e) => {
-      if (!e) return;
-      const s = /* @__PURE__ */ l((a) => {
-        const p = /* @__PURE__ */ l((d) => {
-          if (d.querySelector("colgroup")) return;
-          const m = d.querySelector("tbody tr") || d.querySelector("tr"), q = m ? m.querySelectorAll("th, td").length : 1, x = document.createElement("colgroup"), E = Math.max(Math.floor((d.clientWidth || 600) / q), 100);
-          for (let H = 0; H < q; H++) {
-            const ut = document.createElement("col");
-            ut.setAttribute("width", E), x.appendChild(ut);
-          }
-          d.prepend(x);
-        }, "ensureColgroup"), r = /* @__PURE__ */ l((d) => {
-          if (d.querySelector("thead")) return;
-          const m = document.createElement("thead"), q = d.querySelector("colgroup");
-          q ? q.after(m) : d.prepend(m);
-        }, "ensureThead");
-        return p(a), r(a), a.classList.add("nine-table-element"), a;
-      }, "initializeTable"), o = e.cloneNode(!0);
-      g(this, Y, s(o)), t(this, Y).style.display = "table";
-      const n = this.querySelector(".ng-container-left"), i = this.querySelector(".ng-container-body"), u = this.querySelector(".ng-container-right"), y = /* @__PURE__ */ l((a, p, r = !1) => {
-        const d = a.cloneNode(!0), m = Array.from(d.querySelectorAll("colgroup col")), q = [];
-        return m.forEach((x, E) => {
-          const H = x.getAttribute("fixed");
-          (r ? !H || H === "" : H === p) || q.push(E);
-        }), q.reverse().forEach((x) => {
-          m[x] && m[x].remove(), d.querySelectorAll("tr").forEach((E) => {
-            const H = E.querySelectorAll("th, td");
-            H[x] && H[x].remove();
-          });
-        }), d;
-      }, "filterTableByFixed");
-      if (i) {
-        const a = y(t(this, Y), null, !0);
-        i.innerHTML = "", i.appendChild(a);
-      }
-      if (n) {
-        const a = y(t(this, Y), "left", !1);
-        let p = 0;
-        a.querySelectorAll("col").forEach((d) => {
-          const m = parseInt(d.getAttribute("width"), 10);
-          isNaN(m) || (p += m);
-        }), n.innerHTML = "", n.appendChild(a);
-        const r = p > 0 ? p : 0;
-        n.style.flex = `0 0 ${r}px`, n.style.width = `${r}px`;
-      }
-      if (u) {
-        const a = y(t(this, Y), "right", !1);
-        let p = 0;
-        a.querySelectorAll("col").forEach((d) => {
-          const m = parseInt(d.getAttribute("width"), 10);
-          isNaN(m) || (p += m);
-        }), u.innerHTML = "", u.appendChild(a);
-        const r = p > 0 ? p : 0;
-        u.style.flex = `0 0 ${r}px`, u.style.width = `${r}px`;
-      }
-      if (i) {
-        const a = this.getRowCount();
-        i.style.overflowY = a > 10 ? "auto" : "hidden", i.addEventListener("scroll", () => {
-          const p = i.scrollLeft, r = this.querySelector("nine-table-hscrollbar");
-          r && typeof r.syncThumb == "function" && r.syncThumb(p);
-        });
-      }
-      J.log(`NineTableSheet 3-split initialized with rows: ${this.getRowCount()}`);
-    }, "init"));
-    I(this, "getRowCount", /* @__PURE__ */ l(() => t(this, Y) ? t(this, Y).querySelectorAll("tbody tr").length : 0, "getRowCount"));
-    // 🎯 외부 스크롤바 및 컨트롤러 연동용 메서드
-    I(this, "scrollToX", /* @__PURE__ */ l((e) => {
-      const s = this.querySelector(".ng-container-body");
-      s && (s.scrollLeft = e);
-    }, "scrollToX"));
-    I(this, "scrollToY", /* @__PURE__ */ l((e) => {
-      const s = this.querySelector(".ng-container-body");
-      s && (s.scrollTop = e);
-    }, "scrollToY"));
-    h(this, Q, /* @__PURE__ */ l(() => {
-      const e = X.SCROLLBAR_SIZE;
-      this.innerHTML = `
-            <style>
-                nine-table-sheet {
-                    display: flex;
-                    flex-direction: column;
-                    width: 100%;
-                    height: 100%;
-                    position: relative;
-                    box-sizing: border-box;
-                    background: #ffffff;
-                    overflow: hidden;
-                }
-    
-                nine-table-sheet .ng-container-top {
-                    display: flex;
-                    flex-direction: row;
-                    flex: 1 1 auto;
-                    width: 100%;
-                    height: calc(100% - ${e}px);
-                    overflow: hidden;
-                    position: relative;
-                }
-    
-                nine-table-sheet .ng-container-left {
-                    display: flex;
-                    flex-direction: column;
-                    overflow: hidden;
-                    background: #ffffff;
-                    border-right: 1px solid #e5e7eb;
-                    flex-shrink: 0;
-                }
-    
-                nine-table-sheet .ng-container-body {
-                    display: flex;
-                    flex-direction: column;
-                    flex: 1;
-                    overflow-x: auto;
-                    overflow-y: auto;
-                    background: #ffffff;
-                    position: relative;
-                }
-    
-                nine-table-sheet .ng-container-right {
-                    display: flex;
-                    flex-direction: column;
-                    overflow: hidden;
-                    background: #ffffff;
-                    border-left: 1px solid #e5e7eb;
-                    flex-shrink: 0;
-                }
-    
-                nine-table-sheet .ng-container-bottom {
-                    display: flex;
-                    flex-direction: row;
-                    height: ${e}px;
-                    min-height: ${e}px;
-                    flex-shrink: 0;
-                    background: #f9fafb;
-                    border-top: 1px solid #e5e7eb;
-                }
-    
-                nine-table-sheet nine-table-hscrollbar {
-                    flex: 1;
-                    height: 100%;
-                    overflow: hidden;
-                    display: block;
-                }
-    
-                nine-table-sheet .ng-scroll-edge {
-                    width: ${e}px;
-                    min-width: ${e}px;
-                    height: 100%;
-                    flex-shrink: 0;
-                    background: #f3f4f6;
-                }
-    
-                nine-table-sheet table {
-                    border-collapse: collapse;
-                    width: 100%;
-                    table-layout: fixed;
-                }
-    
-                nine-table-sheet th, nine-table-sheet td {
-                    box-sizing: border-box;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                    padding: 6px 8px;
-                    border: 1px solid #e5e7eb;
-                    font-size: 12px;
-                    color: #111827;
-                }
-    
-                nine-table-sheet th {
-                    background-color: #f9fafb;
-                    font-weight: 600;
-                    text-align: left;
-                }
-            </style>
-            
-            <div class='ng-container-top'>
-                <div class='ng-container-left'></div>
-                <div class='ng-container-body'></div>
-                <div class='ng-container-right'></div>
-                <nine-table-vscrollbar></nine-table-vscrollbar>
-            </div>
-            <div class='ng-container-bottom'>
-                <nine-table-hscrollbar></nine-table-hscrollbar>
-                <div class='ng-scroll-edge'></div>
-            </div>
-        `;
-    }, "#render"));
-  }
-  connectedCallback() {
-    t(this, Q).call(this);
-  }
-  disconnectedCallback() {
-    this.innerHTML = "", J.log("NineTableSheet destroyed.");
-  }
-};
-Y = new WeakMap(), Q = new WeakMap(), l(X, "NineTableSheet"), I(X, "SCROLLBAR_SIZE", 16);
-let bt = X;
-customElements.get("nine-table-sheet") || customElements.define("nine-table-sheet", bt);
-var w, M, b, S, R, U, V, tt, et, z, ot, D, _, B, N;
+var w, M, b, S, R, Q, U, V, tt, z, et, D, _, B, N;
 const xt = class xt extends HTMLElement {
   constructor() {
     super();
@@ -228,8 +24,8 @@ const xt = class xt extends HTMLElement {
     h(this, b);
     h(this, S);
     h(this, R);
-    h(this, U);
-    h(this, V, 0);
+    h(this, Q);
+    h(this, U, 0);
     I(this, "refresh", /* @__PURE__ */ l(() => {
       if (!t(this, w)) return;
       const e = t(this, w).querySelector(".ng-container-body");
@@ -262,7 +58,7 @@ const xt = class xt extends HTMLElement {
     I(this, "stopScroll", /* @__PURE__ */ l(() => {
       clearInterval(t(this, S)), clearInterval(t(this, R));
     }, "stopScroll"));
-    h(this, tt, /* @__PURE__ */ l(() => {
+    h(this, V, /* @__PURE__ */ l(() => {
       const e = /* @__PURE__ */ l((o) => {
         clearInterval(t(this, S)), clearInterval(t(this, R));
         const n = t(this, w).querySelector(".ng-container-body");
@@ -284,13 +80,13 @@ const xt = class xt extends HTMLElement {
       const s = /* @__PURE__ */ l(() => {
         clearInterval(t(this, S)), clearInterval(t(this, R));
       }, "clearTimer");
-      t(this, b).top.ontouchend = t(this, b).bottom.ontouchend = t(this, b).track.ontouchend = t(this, b).top.onmouseup = t(this, b).top.onmouseleave = t(this, b).bottom.onmouseup = t(this, b).bottom.onmouseleave = t(this, b).track.onmouseup = t(this, b).track.onmouseleave = s, $(t(this, b).track).on("mousedown", t(this, z)), $(t(this, b).track).on("touchstart", t(this, et)), $(t(this, b).thumb).on("mousedown", t(this, _)), $(t(this, b).thumb).on("touchstart", t(this, ot)), document.addEventListener("mouseup", (o) => {
+      t(this, b).top.ontouchend = t(this, b).bottom.ontouchend = t(this, b).track.ontouchend = t(this, b).top.onmouseup = t(this, b).top.onmouseleave = t(this, b).bottom.onmouseup = t(this, b).bottom.onmouseleave = t(this, b).track.onmouseup = t(this, b).track.onmouseleave = s, $(t(this, b).track).on("mousedown", t(this, z)), $(t(this, b).track).on("touchstart", t(this, tt)), $(t(this, b).thumb).on("mousedown", t(this, _)), $(t(this, b).thumb).on("touchstart", t(this, et)), document.addEventListener("mouseup", (o) => {
         t(this, M) && g(this, M, !1), document.removeEventListener("mousemove", t(this, B));
       }), document.addEventListener("touchend", (o) => {
         g(this, M, !1), document.removeEventListener("touchmove", t(this, D));
       });
     }, "#init"));
-    h(this, et, /* @__PURE__ */ l((e) => {
+    h(this, tt, /* @__PURE__ */ l((e) => {
       e.target.getBoundingClientRect(), e.clientX = e.targetTouches[0].clientX, e.clientY = e.targetTouches[0].clientY, e.buttons = 1, t(this, z).call(this, e);
     }, "#track_onTouchStart"));
     h(this, z, /* @__PURE__ */ l((e) => {
@@ -307,14 +103,14 @@ const xt = class xt extends HTMLElement {
         }, 10));
       }, 500));
     }, "#track_onMouseDown"));
-    h(this, ot, /* @__PURE__ */ l((e) => {
+    h(this, et, /* @__PURE__ */ l((e) => {
       e.clientX = e.targetTouches[0].clientX, e.clientY = e.targetTouches[0].clientY, e.buttons = 1, t(this, _).call(this, e), document.addEventListener("touchmove", t(this, D));
     }, "#thumb_onTouchStart"));
     h(this, D, /* @__PURE__ */ l((e) => {
       e.clientX = e.targetTouches[0].clientX, e.clientY = e.targetTouches[0].clientY, e.buttons = 1, t(this, B).call(this, e);
     }, "#thumb_onTouchMove"));
     h(this, _, /* @__PURE__ */ l((e) => {
-      g(this, V, e.clientY), g(this, M, !0), this.shiftY = e.offsetY + t(this, b).track.getBoundingClientRect().y, this.trackHeight = $(t(this, b).track).height(), this.thumbHeight = $(t(this, b).thumb).height(), g(this, U, !0), document.addEventListener("mousemove", t(this, B));
+      g(this, U, e.clientY), g(this, M, !0), this.shiftY = e.offsetY + t(this, b).track.getBoundingClientRect().y, this.trackHeight = $(t(this, b).track).height(), this.thumbHeight = $(t(this, b).thumb).height(), g(this, Q, !0), document.addEventListener("mousemove", t(this, B));
     }, "#thumb_onMouseDown"));
     h(this, B, /* @__PURE__ */ l((e) => {
       if (!t(this, M)) return;
@@ -340,13 +136,13 @@ const xt = class xt extends HTMLElement {
       thumb: this.shadowRoot.querySelector(".ng-scroll-thumb"),
       top: this.shadowRoot.querySelector(".ng-scroll-top"),
       bottom: this.shadowRoot.querySelector(".ng-scroll-bottom")
-    }), t(this, tt).call(this));
+    }), t(this, V).call(this));
   }
 };
-w = new WeakMap(), M = new WeakMap(), b = new WeakMap(), S = new WeakMap(), R = new WeakMap(), U = new WeakMap(), V = new WeakMap(), tt = new WeakMap(), et = new WeakMap(), z = new WeakMap(), ot = new WeakMap(), D = new WeakMap(), _ = new WeakMap(), B = new WeakMap(), N = new WeakMap(), l(xt, "NineTableVScrollBar");
-let ft = xt;
-customElements.get("nine-table-vscrollbar") || customElements.define("nine-table-vscrollbar", ft);
-var T, A, f, k, C, nt, st, it, lt, W, rt, O, j, K, F;
+w = new WeakMap(), M = new WeakMap(), b = new WeakMap(), S = new WeakMap(), R = new WeakMap(), Q = new WeakMap(), U = new WeakMap(), V = new WeakMap(), tt = new WeakMap(), z = new WeakMap(), et = new WeakMap(), D = new WeakMap(), _ = new WeakMap(), B = new WeakMap(), N = new WeakMap(), l(xt, "NineTableVScrollBar");
+let bt = xt;
+customElements.get("nine-table-vscrollbar") || customElements.define("nine-table-vscrollbar", bt);
+var T, A, f, k, C, ot, nt, st, it, W, lt, O, j, K, F;
 const wt = class wt extends HTMLElement {
   constructor() {
     super();
@@ -355,8 +151,8 @@ const wt = class wt extends HTMLElement {
     h(this, f);
     h(this, k);
     h(this, C);
-    h(this, nt);
-    h(this, st, 0);
+    h(this, ot);
+    h(this, nt, 0);
     I(this, "refresh", /* @__PURE__ */ l(() => {
       if (!t(this, T)) return;
       const e = t(this, T).querySelector(".ng-container-body");
@@ -389,7 +185,7 @@ const wt = class wt extends HTMLElement {
     I(this, "stopScroll", /* @__PURE__ */ l(() => {
       clearInterval(t(this, k)), clearInterval(t(this, C));
     }, "stopScroll"));
-    h(this, it, /* @__PURE__ */ l(() => {
+    h(this, st, /* @__PURE__ */ l(() => {
       const e = /* @__PURE__ */ l((o) => {
         clearInterval(t(this, k)), clearInterval(t(this, C));
         const n = t(this, T).querySelector(".ng-container-body");
@@ -411,13 +207,13 @@ const wt = class wt extends HTMLElement {
       const s = /* @__PURE__ */ l(() => {
         clearInterval(t(this, k)), clearInterval(t(this, C));
       }, "clearTimer");
-      t(this, f).top.ontouchend = t(this, f).bottom.ontouchend = t(this, f).track.ontouchend = t(this, f).top.onmouseup = t(this, f).top.onmouseleave = t(this, f).bottom.onmouseup = t(this, f).bottom.onmouseleave = t(this, f).track.onmouseup = t(this, f).track.onmouseleave = s, $(t(this, f).track).on("mousedown", t(this, W)), $(t(this, f).track).on("touchstart", t(this, lt)), $(t(this, f).thumb).on("mousedown", t(this, j)), $(t(this, f).thumb).on("touchstart", t(this, rt)), document.addEventListener("mouseup", (o) => {
+      t(this, f).top.ontouchend = t(this, f).bottom.ontouchend = t(this, f).track.ontouchend = t(this, f).top.onmouseup = t(this, f).top.onmouseleave = t(this, f).bottom.onmouseup = t(this, f).bottom.onmouseleave = t(this, f).track.onmouseup = t(this, f).track.onmouseleave = s, $(t(this, f).track).on("mousedown", t(this, W)), $(t(this, f).track).on("touchstart", t(this, it)), $(t(this, f).thumb).on("mousedown", t(this, j)), $(t(this, f).thumb).on("touchstart", t(this, lt)), document.addEventListener("mouseup", (o) => {
         t(this, A) && g(this, A, !1), document.removeEventListener("mousemove", t(this, K));
       }), document.addEventListener("touchend", (o) => {
         g(this, A, !1), document.removeEventListener("touchmove", t(this, O));
       });
     }, "#init"));
-    h(this, lt, /* @__PURE__ */ l((e) => {
+    h(this, it, /* @__PURE__ */ l((e) => {
       e.target.getBoundingClientRect(), e.clientX = e.targetTouches[0].clientX, e.clientY = e.targetTouches[0].clientY, e.buttons = 1, t(this, W).call(this, e);
     }, "#track_onTouchStart"));
     h(this, W, /* @__PURE__ */ l((e) => {
@@ -434,14 +230,14 @@ const wt = class wt extends HTMLElement {
         }, 10));
       }, 500));
     }, "#track_onMouseDown"));
-    h(this, rt, /* @__PURE__ */ l((e) => {
+    h(this, lt, /* @__PURE__ */ l((e) => {
       e.clientX = e.targetTouches[0].clientX, e.clientY = e.targetTouches[0].clientY, e.buttons = 1, t(this, j).call(this, e), document.addEventListener("touchmove", t(this, O));
     }, "#thumb_onTouchStart"));
     h(this, O, /* @__PURE__ */ l((e) => {
       e.clientX = e.targetTouches[0].clientX, e.clientY = e.targetTouches[0].clientY, e.buttons = 1, t(this, K).call(this, e);
     }, "#thumb_onTouchMove"));
     h(this, j, /* @__PURE__ */ l((e) => {
-      g(this, st, e.clientY), g(this, A, !0), this.shiftY = e.offsetY + t(this, f).track.getBoundingClientRect().y, this.trackHeight = $(t(this, f).track).height(), this.thumbHeight = $(t(this, f).thumb).height(), g(this, nt, !0), document.addEventListener("mousemove", t(this, K));
+      g(this, nt, e.clientY), g(this, A, !0), this.shiftY = e.offsetY + t(this, f).track.getBoundingClientRect().y, this.trackHeight = $(t(this, f).track).height(), this.thumbHeight = $(t(this, f).thumb).height(), g(this, ot, !0), document.addEventListener("mousemove", t(this, K));
     }, "#thumb_onMouseDown"));
     h(this, K, /* @__PURE__ */ l((e) => {
       if (!t(this, A)) return;
@@ -467,12 +263,216 @@ const wt = class wt extends HTMLElement {
       thumb: this.shadowRoot.querySelector(".ng-scroll-thumb"),
       top: this.shadowRoot.querySelector(".ng-scroll-top"),
       bottom: this.shadowRoot.querySelector(".ng-scroll-bottom")
-    }), t(this, it).call(this));
+    }), t(this, st).call(this));
+  }
+};
+T = new WeakMap(), A = new WeakMap(), f = new WeakMap(), k = new WeakMap(), C = new WeakMap(), ot = new WeakMap(), nt = new WeakMap(), st = new WeakMap(), it = new WeakMap(), W = new WeakMap(), lt = new WeakMap(), O = new WeakMap(), j = new WeakMap(), K = new WeakMap(), F = new WeakMap(), l(wt, "NineTableHScrollBar");
+let ft = wt;
+customElements.get("nine-table-hscrollbar") || customElements.define("nine-table-hscrollbar", ft);
+var Y, rt;
+const X = class X extends HTMLElement {
+  constructor() {
+    super();
+    h(this, Y, null);
+    I(this, "init", /* @__PURE__ */ l((e) => {
+      if (!e) return;
+      const s = /* @__PURE__ */ l((a) => {
+        const p = /* @__PURE__ */ l((d) => {
+          if (d.querySelector("colgroup")) return;
+          const m = d.querySelector("tbody tr") || d.querySelector("tr"), q = m ? m.querySelectorAll("th, td").length : 1, x = document.createElement("colgroup"), E = Math.max(Math.floor((d.clientWidth || 600) / q), 100);
+          for (let H = 0; H < q; H++) {
+            const ut = document.createElement("col");
+            ut.setAttribute("width", E), x.appendChild(ut);
+          }
+          d.prepend(x);
+        }, "ensureColgroup"), r = /* @__PURE__ */ l((d) => {
+          if (d.querySelector("thead")) return;
+          const m = document.createElement("thead"), q = d.querySelector("colgroup");
+          q ? q.after(m) : d.prepend(m);
+        }, "ensureThead");
+        return p(a), r(a), a.classList.add("nine-table-element"), a;
+      }, "initializeTable"), o = e.cloneNode(!0);
+      g(this, Y, s(o)), t(this, Y).style.display = "table";
+      const n = this.querySelector(".ng-container-left"), i = this.querySelector(".ng-container-body"), u = this.querySelector(".ng-container-right"), y = /* @__PURE__ */ l((a, p, r = !1) => {
+        const d = a.cloneNode(!0), m = Array.from(d.querySelectorAll("colgroup col")), q = [];
+        return m.forEach((x, E) => {
+          const H = x.getAttribute("fixed");
+          (r ? !H || H === "" : H === p) || q.push(E);
+        }), q.reverse().forEach((x) => {
+          m[x] && m[x].remove(), d.querySelectorAll("tr").forEach((E) => {
+            const H = E.querySelectorAll("th, td");
+            H[x] && H[x].remove();
+          });
+        }), d;
+      }, "filterTableByFixed");
+      if (i) {
+        const a = y(t(this, Y), null, !0);
+        i.innerHTML = "", i.appendChild(a);
+      }
+      if (n) {
+        const a = y(t(this, Y), "left", !1);
+        let p = 0;
+        a.querySelectorAll("col").forEach((d) => {
+          const m = parseInt(d.getAttribute("width"), 10);
+          isNaN(m) || (p += m);
+        }), n.innerHTML = "", n.appendChild(a);
+        const r = p > 0 ? p : 0;
+        n.style.flex = `0 0 ${r}px`, n.style.width = `${r}px`;
+      }
+      if (u) {
+        const a = y(t(this, Y), "right", !1);
+        let p = 0;
+        a.querySelectorAll("col").forEach((d) => {
+          const m = parseInt(d.getAttribute("width"), 10);
+          isNaN(m) || (p += m);
+        }), u.innerHTML = "", u.appendChild(a);
+        const r = p > 0 ? p : 0;
+        u.style.flex = `0 0 ${r}px`, u.style.width = `${r}px`;
+      }
+      if (i) {
+        const a = this.getRowCount();
+        i.style.overflowY = a > 10 ? "auto" : "hidden", i.addEventListener("scroll", () => {
+          const p = i.scrollLeft, r = this.querySelector("nine-table-hscrollbar");
+          r && typeof r.syncThumb == "function" && r.syncThumb(p);
+        });
+      }
+      J.log(`NineTableSheet 3-split initialized with rows: ${this.getRowCount()}`);
+    }, "init"));
+    I(this, "getRowCount", /* @__PURE__ */ l(() => t(this, Y) ? t(this, Y).querySelectorAll("tbody tr").length : 0, "getRowCount"));
+    // 🎯 외부 스크롤바 및 컨트롤러 연동용 메서드
+    I(this, "scrollToX", /* @__PURE__ */ l((e) => {
+      const s = this.querySelector(".ng-container-body");
+      s && (s.scrollLeft = e);
+    }, "scrollToX"));
+    I(this, "scrollToY", /* @__PURE__ */ l((e) => {
+      const s = this.querySelector(".ng-container-body");
+      s && (s.scrollTop = e);
+    }, "scrollToY"));
+    h(this, rt, /* @__PURE__ */ l(() => {
+      const e = X.SCROLLBAR_SIZE;
+      this.innerHTML = `
+            <style>
+                nine-table-sheet {
+                    display: flex;
+                    flex-direction: column;
+                    width: 100%;
+                    height: 100%;
+                    position: relative;
+                    box-sizing: border-box;
+                    background: #ffffff;
+                    overflow: hidden;
+                }
+    
+                nine-table-sheet .ng-container-top {
+                    display: flex;
+                    flex-direction: row;
+                    flex: 1 1 auto;
+                    width: 100%;
+                    height: calc(100% - ${e}px);
+                    overflow: hidden;
+                    position: relative;
+                }
+    
+                nine-table-sheet .ng-container-left {
+                    display: flex;
+                    flex-direction: column;
+                    overflow: hidden;
+                    background: #ffffff;
+                    border-right: 1px solid #e5e7eb;
+                    flex-shrink: 0;
+                }
+    
+                nine-table-sheet .ng-container-body {
+                    display: flex;
+                    flex-direction: column;
+                    flex: 1;
+                    overflow-x: auto;
+                    overflow-y: auto;
+                    background: #ffffff;
+                    position: relative;
+                }
+    
+                nine-table-sheet .ng-container-right {
+                    display: flex;
+                    flex-direction: column;
+                    overflow: hidden;
+                    background: #ffffff;
+                    border-left: 1px solid #e5e7eb;
+                    flex-shrink: 0;
+                }
+    
+                nine-table-sheet .ng-container-bottom {
+                    display: flex;
+                    flex-direction: row;
+                    height: ${e}px;
+                    min-height: ${e}px;
+                    flex-shrink: 0;
+                    background: #f9fafb;
+                    border-top: 1px solid #e5e7eb;
+                }
+    
+                nine-table-sheet nine-table-hscrollbar {
+                    flex: 1;
+                    height: 100%;
+                    overflow: hidden;
+                    display: block;
+                }
+    
+                nine-table-sheet .ng-scroll-edge {
+                    width: ${e}px;
+                    min-width: ${e}px;
+                    height: 100%;
+                    flex-shrink: 0;
+                    background: #f3f4f6;
+                }
+    
+                nine-table-sheet table {
+                    border-collapse: collapse;
+                    width: 100%;
+                    table-layout: fixed;
+                }
+    
+                nine-table-sheet th, nine-table-sheet td {
+                    box-sizing: border-box;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    padding: 6px 8px;
+                    border: 1px solid #e5e7eb;
+                    font-size: 12px;
+                    color: #111827;
+                }
+    
+                nine-table-sheet th {
+                    background-color: #f9fafb;
+                    font-weight: 600;
+                    text-align: left;
+                }
+            </style>
+            
+            <div class='ng-container-top'>
+                <div class='ng-container-left'></div>
+                <div class='ng-container-body'></div>
+                <div class='ng-container-right'></div>
+                <nine-table-vscrollbar></nine-table-vscrollbar>
+            </div>
+            <div class='ng-container-bottom'>
+                <nine-table-hscrollbar></nine-table-hscrollbar>
+                <div class='ng-scroll-edge'></div>
+            </div>
+        `;
+    }, "#render"));
+  }
+  connectedCallback() {
+    t(this, rt).call(this);
+  }
+  disconnectedCallback() {
+    this.innerHTML = "", J.log("NineTableSheet destroyed.");
   }
 };
-T = new WeakMap(), A = new WeakMap(), f = new WeakMap(), k = new WeakMap(), C = new WeakMap(), nt = new WeakMap(), st = new WeakMap(), it = new WeakMap(), lt = new WeakMap(), W = new WeakMap(), rt = new WeakMap(), O = new WeakMap(), j = new WeakMap(), K = new WeakMap(), F = new WeakMap(), l(wt, "NineTableHScrollBar");
-let gt = wt;
-customElements.get("nine-table-hscrollbar") || customElements.define("nine-table-hscrollbar", gt);
+Y = new WeakMap(), rt = new WeakMap(), l(X, "NineTableSheet"), I(X, "SCROLLBAR_SIZE", 16);
+let gt = X;
+customElements.get("nine-table-sheet") || customElements.define("nine-table-sheet", gt);
 var ct;
 const St = class St extends HTMLElement {
   constructor() {