@ninebone/table 0.0.423 → 0.0.425

package/dist/nine-table.js

@@ -23,12 +23,12 @@ const re = class re extends Se.constructor {
 a(re, "Trace");
 let jt = re;
 const P = new jt();
-var M, O, p, Y, V, X, St, U, Et;
+var M, z, p, Y, V, X, St, U, Et;
 const le = class le extends HTMLElement {
   constructor() {
     super();
     c(this, M);
-    c(this, O, !1);
+    c(this, z, !1);
     c(this, p);
     c(this, Y);
     c(this, V);
@@ -41,7 +41,7 @@ const le = class le extends HTMLElement {
       })), t(this, X).observe(e));
     }, "#observeResize"));
     v(this, "refresh", /* @__PURE__ */ a(() => {
-      if (!t(this, M) || !t(this, p) || t(this, O)) return;
+      if (!t(this, M) || !t(this, p) || t(this, z)) return;
       const e = t(this, p).container, s = e.querySelector("table");
       if (!s) return;
       const n = t(this, p).track, r = t(this, p).thumb, o = t(this, M).querySelector(".ng-container-bottom"), l = e.clientWidth, d = s.scrollWidth;
@@ -99,13 +99,13 @@ const le = class le extends HTMLElement {
         t(this, U).call(this, n.clientX - r.left - o / 2);
       }), t(this, p).thumb.addEventListener("mousedown", (n) => {
         if (n.button !== 0) return;
-        n.stopPropagation(), n.preventDefault(), b(this, O, !0), this.shiftX = n.clientX - t(this, p).thumb.getBoundingClientRect().left;
+        n.stopPropagation(), n.preventDefault(), b(this, z, !0), this.shiftX = n.clientX - t(this, p).thumb.getBoundingClientRect().left;
         const r = /* @__PURE__ */ a((l) => {
-          if (!t(this, O)) return;
+          if (!t(this, z)) return;
           const d = t(this, p).track.getBoundingClientRect();
           t(this, U).call(this, l.clientX - d.left - this.shiftX);
         }, "onMouseMove"), o = /* @__PURE__ */ a(() => {
-          b(this, O, !1), s(), document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", o), this.refresh();
+          b(this, z, !1), s(), document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", o), this.refresh();
         }, "onMouseUp");
         document.addEventListener("mousemove", r), document.addEventListener("mouseup", o);
       });
@@ -189,7 +189,7 @@ const le = class le extends HTMLElement {
         left: this.querySelector(".ng-scroll-left"),
         right: this.querySelector(".ng-scroll-right")
       }), s.addEventListener("scroll", () => {
-        t(this, O) || this.refresh();
+        t(this, z) || this.refresh();
       }), t(this, Et).call(this), t(this, St).call(this), this.refresh();
     }, "initWhenReady");
     e();
@@ -198,14 +198,14 @@ const le = class le extends HTMLElement {
     t(this, X) && t(this, X).disconnect();
   }
 };
-M = new WeakMap(), O = new WeakMap(), p = new WeakMap(), Y = new WeakMap(), V = new WeakMap(), X = new WeakMap(), St = new WeakMap(), U = new WeakMap(), Et = new WeakMap(), a(le, "NineTableHScrollBar");
+M = new WeakMap(), z = new WeakMap(), p = new WeakMap(), Y = new WeakMap(), V = new WeakMap(), X = new WeakMap(), St = new WeakMap(), U = new WeakMap(), Et = new WeakMap(), a(le, "NineTableHScrollBar");
 let Kt = le;
 customElements.get("nine-table-hscrollbar") || customElements.define("nine-table-hscrollbar", Kt);
-var z, tt, F, E, ht, dt, Rt;
+var _, tt, F, E, ht, dt, Rt;
 const ae = class ae extends HTMLElement {
   constructor() {
     super();
-    c(this, z);
+    c(this, _);
     c(this, tt);
     c(this, F, !1);
     c(this, E);
@@ -215,9 +215,9 @@ const ae = class ae extends HTMLElement {
      * 🎯 스크롤바 위치 및 썸브 크기 갱신
      */
     v(this, "refresh", /* @__PURE__ */ a(() => {
-      var W;
-      if (!t(this, z) || !t(this, E)) return;
-      const e = t(this, E).container, s = t(this, E).track, n = t(this, E).thumb, r = e.clientHeight, l = (t(this, z).data.get() || []).length, d = ((W = t(this, tt)) == null ? void 0 : W.getRowHeight()) || 24, h = l * d;
+      var O;
+      if (!t(this, _) || !t(this, E)) return;
+      const e = t(this, E).container, s = t(this, E).track, n = t(this, E).thumb, r = e.clientHeight, l = (t(this, _).data.get() || []).length, d = ((O = t(this, tt)) == null ? void 0 : O.getRowHeight()) || 24, h = l * d;
       if (h <= r) {
         n.style.display = "none", t(this, E).top.disabled = !0, t(this, E).bottom.disabled = !0;
         return;
@@ -234,7 +234,7 @@ const ae = class ae extends HTMLElement {
     c(this, Rt, /* @__PURE__ */ a(() => {
       const e = t(this, E).container, s = /* @__PURE__ */ a(() => {
         var l;
-        const r = (t(this, z).data.get() || []).length, o = ((l = t(this, tt)) == null ? void 0 : l.getRowHeight()) || 24;
+        const r = (t(this, _).data.get() || []).length, o = ((l = t(this, tt)) == null ? void 0 : l.getRowHeight()) || 24;
         return r * o;
       }, "getContentHeight");
       e.addEventListener("scroll", () => {
@@ -246,8 +246,8 @@ const ae = class ae extends HTMLElement {
           if (!t(this, F)) return;
           const d = t(this, E).track.getBoundingClientRect(), h = t(this, E).thumb.clientHeight, u = d.height - h, g = l.clientY - t(this, ht), y = e.clientHeight, m = s(), S = Math.max(m - y, 1);
           if (u > 0 && S > 0) {
-            const W = g / u * S;
-            let Q = t(this, dt) + W;
+            const O = g / u * S;
+            let Q = t(this, dt) + O;
             const ye = Math.max(0, m - y);
             Q < 0 && (Q = 0), Q > ye && (Q = ye), e.scrollTop = Q;
           }
@@ -272,7 +272,7 @@ const ae = class ae extends HTMLElement {
     }, "#init"));
   }
   connectedCallback() {
-    b(this, z, this.getRootNode().host), b(this, tt, this.closest("nine-table-sheet")), this.innerHTML = `
+    b(this, _, this.getRootNode().host), b(this, tt, this.closest("nine-table-sheet")), this.innerHTML = `
             <style>
                 nine-table-vscrollbar {
                     display: flex;
@@ -338,13 +338,15 @@ const ae = class ae extends HTMLElement {
             <button class='ng-scroll-bottom' disabled><div class='ng-scroll-icon'></div></button>
         `;
     const e = /* @__PURE__ */ a(() => {
-      const s = t(this, z).shadowRoot.querySelector(".ng-container-body");
+      const s = t(this, _).shadowRoot.querySelector(".ng-container-body");
       if (!s) {
         setTimeout(e, 10);
         return;
       }
       b(this, E, {
         container: s,
+        leftContainer: t(this, _).shadowRoot.querySelector(".ng-container-left"),
+        rightContainer: t(this, _).shadowRoot.querySelector(".ng-container-right"),
         track: this.querySelector(".ng-scroll-track"),
         thumb: this.querySelector(".ng-scroll-thumb"),
         top: this.querySelector(".ng-scroll-top"),
@@ -354,7 +356,7 @@ const ae = class ae extends HTMLElement {
     e();
   }
 };
-z = new WeakMap(), tt = new WeakMap(), F = new WeakMap(), E = new WeakMap(), ht = new WeakMap(), dt = new WeakMap(), Rt = new WeakMap(), a(ae, "NineTableVScrollBar");
+_ = new WeakMap(), tt = new WeakMap(), F = new WeakMap(), E = new WeakMap(), ht = new WeakMap(), dt = new WeakMap(), Rt = new WeakMap(), a(ae, "NineTableVScrollBar");
 let Zt = ae;
 customElements.get("nine-table-vscrollbar") || customElements.define("nine-table-vscrollbar", Zt);
 var At, et;
@@ -428,25 +430,25 @@ At = new WeakMap(), et = new WeakMap(), a(H, "TableCompiler"), c(H, At, /* @__PU
   });
 }, "#resetColIndex"));
 let Gt = H;
-var _, w, I, T, D, j, B, it, Tt, qt, kt, ft, ut, Lt, Ct, bt, Ht, st, gt;
+var I, w, W, q, D, j, N, it, qt, Tt, kt, ft, ut, Lt, Ct, bt, Ht, st, gt;
 const ce = class ce {
   constructor(i) {
-    c(this, _);
+    c(this, I);
     c(this, w);
-    c(this, I, /* @__PURE__ */ new Map());
-    c(this, T, null);
+    c(this, W, /* @__PURE__ */ new Map());
+    c(this, q, null);
     c(this, D, null);
     c(this, j, 0);
-    c(this, B, 40);
+    c(this, N, 40);
     c(this, it, !1);
-    c(this, Tt, 3);
+    c(this, qt, 3);
     v(this, "refresh", /* @__PURE__ */ a(() => {
       var e;
       const i = t(this, w).querySelector(".ng-container-body");
       i && (t(this, ft).call(this), t(this, st).call(this, i.scrollTop), (e = t(this, w).querySelector("nine-table-vscrollbar")) == null || e.refresh());
     }, "refresh"));
     v(this, "initialize", /* @__PURE__ */ a(() => {
-      b(this, T, null), t(this, I).clear(), [".ng-container-body", ".ng-container-left", ".ng-container-right"].forEach((n) => {
+      b(this, q, null), t(this, W).clear(), [".ng-container-body", ".ng-container-left", ".ng-container-right"].forEach((n) => {
         const r = t(this, w).querySelector(n);
         if (!r) return;
         const o = r.querySelector("table");
@@ -454,7 +456,7 @@ const ce = class ce {
         const l = o.querySelector("tbody.bindable-tbody");
         if (!l) return;
         const h = Array.from(l.querySelectorAll("tr")).map((f) => f.cloneNode(!0));
-        t(this, I).set(n, h);
+        t(this, W).set(n, h);
       });
       const i = t(this, w).querySelector(".ng-container-body"), e = t(this, w).querySelector(".ng-container-left"), s = t(this, w).querySelector(".ng-container-right");
       if (i) {
@@ -470,23 +472,23 @@ const ce = class ce {
         });
       }
     }, "initialize"));
-    c(this, qt, /* @__PURE__ */ a((i, e) => {
-      const s = t(this, I).get(e);
+    c(this, Tt, /* @__PURE__ */ a((i, e) => {
+      const s = t(this, W).get(e);
       if (!s || s.length === 0) return;
       const n = i.querySelector("tbody.bindable-tbody");
       if (!n) return;
       n.querySelectorAll("tr:not(.nodata)").forEach((l) => l.remove());
       const r = n.querySelector("tr.nodata"), o = document.createDocumentFragment();
-      for (let l = 0; l < t(this, B); l++)
+      for (let l = 0; l < t(this, N); l++)
         s.forEach((d) => {
           o.appendChild(d.cloneNode(!0));
         });
       r ? r.before(o) : n.appendChild(o);
     }, "#renderRows"));
     c(this, kt, /* @__PURE__ */ a((i) => {
-      if (t(this, T) !== null && t(this, T) > 0)
-        return t(this, T);
-      const e = t(this, I).get(".ng-container-body");
+      if (t(this, q) !== null && t(this, q) > 0)
+        return t(this, q);
+      const e = t(this, W).get(".ng-container-body");
       if (!e || e.length === 0) return 24;
       const s = i.querySelector("tbody.bindable-tbody") || i.querySelector("tbody.bindable-tbody:last-of-type");
       if (!s) return 24;
@@ -501,40 +503,24 @@ const ce = class ce {
       const u = s.querySelectorAll("tr:not(.nodata)");
       return u.forEach((g) => {
         f += g.offsetHeight || g.getBoundingClientRect().height;
-      }), u.forEach((g) => g.remove()), o.style.display = l, o.style.visibility = d, o.style.position = h, b(this, T, f > 0 ? f : 24), t(this, ut).call(this), t(this, T);
+      }), u.forEach((g) => g.remove()), o.style.display = l, o.style.visibility = d, o.style.position = h, b(this, q, f > 0 ? f : 24), t(this, ut).call(this), t(this, q);
     }, "#measureAndCacheHeight"));
-    /**
-        #updateVirtualScrollHeight = () => {
-            const bodyContainer = this.#sheet.querySelector('.ng-container-body');
-            if (!bodyContainer) return;
-    
-            const dataList = this.#host.data.get() || [];
-            const totalCount = dataList.length;
-            const rowHeight = this.#cachedTemplateHeight || 24;
-            const totalVirtualHeight = totalCount * rowHeight;
-    
-            // 🎯 디버깅 로그: 전체 데이터가 몇 건이고 테이블 높이가 얼마로 잡히는지 확인
-            trace.log(`[VirtualHeight] totalCount: ${totalCount}, rowHeight: ${rowHeight}, totalVirtualHeight: ${totalVirtualHeight}`);
-    
-            ['.ng-container-body', '.ng-container-left', '.ng-container-right'].forEach(selector => {
-                const container = this.#sheet.querySelector(selector);
-                const table = container?.querySelector('table');
-                if (table) {
-                    table.style.height = `${totalVirtualHeight}px`;
-                }
-            });
-        }; */
     c(this, ft, /* @__PURE__ */ a(() => {
       if (!t(this, w).querySelector(".ng-container-body")) return;
-      (t(this, _).data.get() || []).length, t(this, T), [".ng-container-body", ".ng-container-left", ".ng-container-right"].forEach((s) => {
-        const n = t(this, w).querySelector(s), r = n == null ? void 0 : n.querySelector("table");
-        r && (r.style.height = "auto", r.style.minHeight = "auto");
+      const s = (t(this, I).data.get() || []).length, n = t(this, q) || 24, r = s * n;
+      [".ng-container-body", ".ng-container-left", ".ng-container-right"].forEach((o) => {
+        const l = t(this, w).querySelector(o);
+        if (!l) return;
+        const d = l.querySelector("table");
+        d && (d.style.height = "auto", d.style.minHeight = "auto");
+        const h = l.querySelector(".ng-virtual-spacer");
+        h && (h.style.height = `${r}px`);
       });
     }, "#updateVirtualScrollHeight"));
     c(this, ut, /* @__PURE__ */ a(() => {
-      if ((t(this, _).data.get() || []).length, t(this, j) > 0 && t(this, T) > 0) {
-        const e = Math.ceil(t(this, j) / t(this, T));
-        b(this, B, e + t(this, Tt)), P.log("visibleRows:", e, "cachedRowCount:", t(this, B));
+      if ((t(this, I).data.get() || []).length, t(this, j) > 0 && t(this, q) > 0) {
+        const e = Math.ceil(t(this, j) / t(this, q));
+        b(this, N, e + t(this, qt)), P.log("visibleRows:", e, "cachedRowCount:", t(this, N));
       }
     }, "#updateRowCount"));
     c(this, Lt, /* @__PURE__ */ a(() => {
@@ -562,7 +548,7 @@ const ce = class ce {
             const o = s.querySelector("thead");
             o && (r += o.offsetHeight || o.getBoundingClientRect().height);
             const l = Math.max(n - r, 100);
-            t(this, j) !== l && (b(this, j, l), t(this, ut).call(this), t(this, T) !== null && t(this, bt).call(this));
+            t(this, j) !== l && (b(this, j, l), t(this, ut).call(this), t(this, q) !== null && t(this, bt).call(this));
           }
         }
       })), t(this, D).observe(t(this, w)));
@@ -570,7 +556,7 @@ const ce = class ce {
     c(this, bt, /* @__PURE__ */ a(() => {
       [".ng-container-body", ".ng-container-left", ".ng-container-right"].forEach((i) => {
         const e = t(this, w).querySelector(i);
-        e && e.querySelector("tbody.bindable-tbody") && t(this, qt).call(this, e, i);
+        e && e.querySelector("tbody.bindable-tbody") && t(this, Tt).call(this, e, i);
       }), t(this, Lt).call(this);
     }, "#renderAllContainers"));
     c(this, Ht, /* @__PURE__ */ a((i) => {
@@ -580,24 +566,24 @@ const ce = class ce {
         if (!s) return;
         const n = s.querySelector("tbody.bindable-tbody");
         if (!n) return;
-        const r = Array.from(n.querySelectorAll("tr:not(.nodata)")), o = ((h = t(this, I).get(e)) == null ? void 0 : h.length) || 1, d = (t(this, _).data.get() || []).length;
+        const r = Array.from(n.querySelectorAll("tr:not(.nodata)")), o = ((h = t(this, W).get(e)) == null ? void 0 : h.length) || 1, d = (t(this, I).data.get() || []).length;
         r.forEach((f, u) => {
           const g = i + Math.floor(u / o);
           if (g >= d) {
             f.style.display = "none";
             return;
           }
-          const y = t(this, _).data.get(g);
+          const y = t(this, I).data.get(g);
           f.style.display = "", t(this, gt).call(this, f, y, g);
         });
       });
     }, "#adjustBufferRows"));
     c(this, st, /* @__PURE__ */ a((i) => {
       var d;
-      const e = t(this, T);
+      const e = t(this, q);
       if (!e || e <= 0) return;
-      const n = (t(this, _).data.get() || []).length, r = Math.max(0, Math.floor(i / e)), o = ((d = t(this, I).get(".ng-container-body")) == null ? void 0 : d.length) || 1, l = r + t(this, B);
-      P.log(`[Scroll] scrollTop: ${i}, startIndex: ${r}, cachedRowCount: ${t(this, B)}, targetDataIndex range: ${r} ~ ${l} (Total: ${n})`), [".ng-container-body", ".ng-container-left", ".ng-container-right"].forEach((h) => {
+      const n = (t(this, I).data.get() || []).length, r = Math.max(0, Math.floor(i / e)), o = ((d = t(this, W).get(".ng-container-body")) == null ? void 0 : d.length) || 1, l = r + t(this, N);
+      P.log(`[Scroll] scrollTop: ${i}, startIndex: ${r}, cachedRowCount: ${t(this, N)}, targetDataIndex range: ${r} ~ ${l} (Total: ${n})`), [".ng-container-body", ".ng-container-left", ".ng-container-right"].forEach((h) => {
         const f = t(this, w).querySelector(h);
         if (!f) return;
         const u = f.querySelector("tbody.bindable-tbody");
@@ -608,8 +594,8 @@ const ce = class ce {
             y.style.display = "none";
             return;
           }
-          const W = t(this, _).data.get(S);
-          y.style.display = "", t(this, gt).call(this, y, W, S);
+          const O = t(this, I).data.get(S);
+          y.style.display = "", t(this, gt).call(this, y, O, S);
         });
       }), t(this, it) || (b(this, it, !0), setTimeout(() => {
         t(this, Ht).call(this, r), b(this, it, !1);
@@ -624,19 +610,19 @@ const ce = class ce {
     v(this, "destroy", /* @__PURE__ */ a(() => {
       t(this, D) && (t(this, D).disconnect(), b(this, D, null));
     }, "destroy"));
-    b(this, _, i.getRootNode().host), b(this, w, i), t(this, Ct).call(this);
+    b(this, I, i.getRootNode().host), b(this, w, i), t(this, Ct).call(this);
   }
   getRowHeight() {
-    return t(this, T);
+    return t(this, q);
   }
   templateLength(i = ".ng-container-body") {
     var e;
-    return ((e = t(this, I).get(i)) == null ? void 0 : e.length) || 1;
+    return ((e = t(this, W).get(i)) == null ? void 0 : e.length) || 1;
   }
 };
-_ = new WeakMap(), w = new WeakMap(), I = new WeakMap(), T = new WeakMap(), D = new WeakMap(), j = new WeakMap(), B = new WeakMap(), it = new WeakMap(), Tt = new WeakMap(), qt = new WeakMap(), kt = new WeakMap(), ft = new WeakMap(), ut = new WeakMap(), Lt = new WeakMap(), Ct = new WeakMap(), bt = new WeakMap(), Ht = new WeakMap(), st = new WeakMap(), gt = new WeakMap(), a(ce, "RowManager");
+I = new WeakMap(), w = new WeakMap(), W = new WeakMap(), q = new WeakMap(), D = new WeakMap(), j = new WeakMap(), N = new WeakMap(), it = new WeakMap(), qt = new WeakMap(), Tt = new WeakMap(), kt = new WeakMap(), ft = new WeakMap(), ut = new WeakMap(), Lt = new WeakMap(), Ct = new WeakMap(), bt = new WeakMap(), Ht = new WeakMap(), st = new WeakMap(), gt = new WeakMap(), a(ce, "RowManager");
 let Jt = ce;
-var Mt, nt, K, _t, It, $t, Wt, Ot;
+var Mt, nt, K, _t, $t, It, Wt, Ot;
 const ct = class ct extends HTMLElement {
   constructor() {
     super();
@@ -659,11 +645,15 @@ const ct = class ct extends HTMLElement {
       ].forEach(({ selector: s, type: n }) => {
         const r = this.querySelector(s);
         if (!r) return;
-        const o = t(this, $t).call(this, t(this, nt), n);
-        r.innerHTML = "", r.appendChild(o);
+        const o = t(this, It).call(this, t(this, nt), n);
+        r.innerHTML = "";
+        const l = document.createElement("div");
+        l.className = "ng-scroll-content", l.appendChild(o);
+        const d = document.createElement("div");
+        d.className = "ng-virtual-spacer", l.appendChild(d), r.appendChild(l);
       });
     }, "#renderSplitContainers"));
-    c(this, It, /* @__PURE__ */ a(() => {
+    c(this, $t, /* @__PURE__ */ a(() => {
       ["left", "right"].forEach((e) => {
         const s = this.querySelector(`.ng-container-${e}`), n = s == null ? void 0 : s.querySelector("table");
         if (!s || !n) return;
@@ -675,7 +665,7 @@ const ct = class ct extends HTMLElement {
       });
     }, "#updateContainerWidths"));
     v(this, "generate", /* @__PURE__ */ a((e) => {
-      e && (b(this, nt, Gt.compile(e)), t(this, nt).style.display = "table", t(this, _t).call(this), t(this, It).call(this), requestAnimationFrame(() => {
+      e && (b(this, nt, Gt.compile(e)), t(this, nt).style.display = "table", t(this, _t).call(this), t(this, $t).call(this), requestAnimationFrame(() => {
         var n;
         const s = (n = this.querySelector("thead")) == null ? void 0 : n.getBoundingClientRect().height;
         this.querySelectorAll("tbody.fixed-tbody").forEach((r) => {
@@ -689,7 +679,7 @@ const ct = class ct extends HTMLElement {
     /**
      * 🎯 마스터 테이블을 기반으로 특정 fixed 타입 영역만 남기는 분할 헬퍼
      */
-    c(this, $t, /* @__PURE__ */ a((e, s) => {
+    c(this, It, /* @__PURE__ */ a((e, s) => {
       const n = e.cloneNode(!0), r = n.querySelector("tbody");
       if (r) {
         const o = document.createElement("tbody");
@@ -747,21 +737,14 @@ const ct = class ct extends HTMLElement {
                 nine-table-sheet .ng-container-left {
                     display: flex;
                     flex-direction: column;
-                    overflow: hidden;
+                    overflow-y: auto;
+                    overflow-x: hidden;
                     background: #ffffff;
                     border-right: 1px solid #e5e7eb;
                     flex-shrink: 0;
+                    scrollbar-width: none;
+                    &::-webkit-scrollbar { display: none; }
                 }
-                
-                nine-table-sheet thead {
-                    position: sticky;
-                    top: 0;
-                }
-                nine-table-sheet tbody.fixed-tbody {
-                    position: sticky;
-                    z-index: 4;
-                }
-                
     
                 nine-table-sheet .ng-container-body {
                     display: flex;
@@ -771,23 +754,32 @@ const ct = class ct extends HTMLElement {
                     overflow-x: auto;
                     background: #ffffff;
                     position: relative;
-                    
-                    &::-webkit-scrollbar {
-                        display: none; 
-                        height: 0px;
-                    }
-                    
                     scrollbar-width: none;
+                    &::-webkit-scrollbar { display: none; height: 0px; }
                 }
     
                 nine-table-sheet .ng-container-right {
                     display: flex;
-                    flex-init: 0;
                     flex-direction: column;
-                    overflow: hidden;
+                    overflow-y: auto;
+                    overflow-x: hidden;
                     background: #ffffff;
                     border-left: 1px solid #e5e7eb;
                     flex-shrink: 0;
+                    scrollbar-width: none;
+                    &::-webkit-scrollbar { display: none; }
+                }
+
+                nine-table-sheet .ng-scroll-content {
+                    position: relative;
+                    width: 100%;
+                    height: auto;
+                }
+
+                nine-table-sheet .ng-virtual-spacer {
+                    width: 100%;
+                    visibility: hidden;
+                    pointer-events: none;
                 }
     
                 nine-table-sheet .ng-container-bottom {
@@ -815,6 +807,17 @@ const ct = class ct extends HTMLElement {
                     position: relative;
                 }
     
+                nine-table-sheet thead {
+                    position: sticky;
+                    top: 0;
+                    z-index: 3;
+                }
+
+                nine-table-sheet tbody.fixed-tbody {
+                    position: sticky;
+                    z-index: 4;
+                }
+
                 nine-table-sheet th, nine-table-sheet td {
                     box-sizing: border-box;
                     overflow: hidden;
@@ -871,7 +874,7 @@ const ct = class ct extends HTMLElement {
     this.innerHTML = "", P.log("NineTableSheet destroyed.");
   }
 };
-Mt = new WeakMap(), nt = new WeakMap(), K = new WeakMap(), _t = new WeakMap(), It = new WeakMap(), $t = new WeakMap(), Wt = new WeakMap(), Ot = new WeakMap(), a(ct, "NineTableSheet"), v(ct, "SCROLLBAR_SIZE", 16);
+Mt = new WeakMap(), nt = new WeakMap(), K = new WeakMap(), _t = new WeakMap(), $t = new WeakMap(), It = new WeakMap(), Wt = new WeakMap(), Ot = new WeakMap(), a(ct, "NineTableSheet"), v(ct, "SCROLLBAR_SIZE", 16);
 let wt = ct;
 customElements.get("nine-table-sheet") || customElements.define("nine-table-sheet", wt);
 var zt, yt;
@@ -892,8 +895,8 @@ const he = class he extends HTMLElement {
         Array.from(this.querySelectorAll("nine-splitter")).forEach((y) => y.style.setProperty("display", "none"));
         const g = f.filter((y) => y.classList.contains("active"));
         g.length < 2 || g.forEach((y) => {
-          const m = parseInt(y.getAttribute("data-index"), 10), S = this.querySelector(`nine-splitter[data-split-index="${m}"]`), W = f[m + 1];
-          S && W && W.classList.contains("active") && S.style.setProperty("display", "flex");
+          const m = parseInt(y.getAttribute("data-index"), 10), S = this.querySelector(`nine-splitter[data-split-index="${m}"]`), O = f[m + 1];
+          S && O && O.classList.contains("active") && S.style.setProperty("display", "flex");
         });
       }, "updateSplitters"), r = this.querySelector(".nine-tab-bar"), o = this.querySelector("nine-table-sheets-body"), l = r.querySelectorAll(".nine-tab-item"), d = o.querySelectorAll("nine-table-sheet");
       if (!l[e]) return;
@@ -925,29 +928,29 @@ const he = class he extends HTMLElement {
 zt = new WeakMap(), yt = new WeakMap(), a(he, "NineTableSheets");
 let Qt = he;
 customElements.get("nine-table-sheets") || customElements.define("nine-table-sheets", Qt);
-var q, Dt, pt, Bt;
+var T, Dt, pt, Nt;
 const de = class de {
   constructor(i) {
-    c(this, q);
+    c(this, T);
     c(this, Dt, /* @__PURE__ */ a(() => {
-      t(this, Bt).call(this), new ResizeObserver((i) => {
+      t(this, Nt).call(this), new ResizeObserver((i) => {
         for (let e of i)
-          t(this, q).getAttribute("auto-height") === "true" && t(this, pt).call(this);
-      }).observe(t(this, q));
+          t(this, T).getAttribute("auto-height") === "true" && t(this, pt).call(this);
+      }).observe(t(this, T));
     }, "#init"));
     c(this, pt, /* @__PURE__ */ a(() => {
       var d, h;
-      const i = Array.from(t(this, q).shadowRoot.querySelectorAll("nine-table-sheet.active"));
+      const i = Array.from(t(this, T).shadowRoot.querySelectorAll("nine-table-sheet.active"));
       if (i.length === 0) return;
-      const e = parseInt(t(this, q).getAttribute("max-display-row"), 10) || 10, s = Math.max(...i.map((f) => f.getRowHeight())), n = (d = t(this, q).shadowRoot.querySelector("nine-table-header")) == null ? void 0 : d.getBoundingClientRect().height, r = (h = t(this, q).shadowRoot.querySelector("nine-table-sheets-footer")) == null ? void 0 : h.getBoundingClientRect().height, o = wt.SCROLLBAR_SIZE, l = e * s + n + r + o;
-      t(this, q).style.height = `${l}px`;
+      const e = parseInt(t(this, T).getAttribute("max-display-row"), 10) || 10, s = Math.max(...i.map((f) => f.getRowHeight())), n = (d = t(this, T).shadowRoot.querySelector("nine-table-header")) == null ? void 0 : d.getBoundingClientRect().height, r = (h = t(this, T).shadowRoot.querySelector("nine-table-sheets-footer")) == null ? void 0 : h.getBoundingClientRect().height, o = wt.SCROLLBAR_SIZE, l = e * s + n + r + o;
+      t(this, T).style.height = `${l}px`;
     }, "#applyAutoHeight"));
-    c(this, Bt, /* @__PURE__ */ a(() => {
-      const e = Array.from(t(this, q).children).filter((d) => d.tagName === "TABLE"), s = t(this, q).getAttribute("auto-height") === "true", n = e.length, r = e.map((d, h) => {
+    c(this, Nt, /* @__PURE__ */ a(() => {
+      const e = Array.from(t(this, T).children).filter((d) => d.tagName === "TABLE"), s = t(this, T).getAttribute("auto-height") === "true", n = e.length, r = e.map((d, h) => {
         const u = `<nine-table-sheet class="${h === 0 ? "active" : ""}" data-index="${h}"></nine-table-sheet>`, g = h < n - 1 ? `<nine-splitter class="h" data-split-index="${h}"></nine-splitter>` : "";
         return u + g;
       }).join(""), o = e.map((d, h) => `<div class="nine-tab-item ${h === 0 ? "active" : ""}" data-index="${h}">Sheet ${h + 1}</div>`).join("");
-      t(this, q).shadowRoot.innerHTML = `
+      t(this, T).shadowRoot.innerHTML = `
             <style>
                 :host { 
                     display: flex; 
@@ -1038,17 +1041,17 @@ const de = class de {
             </nine-table-body>
             <nine-table-footer></nine-table-footer>
         `;
-      const l = t(this, q).shadowRoot.querySelectorAll("nine-table-sheet");
+      const l = t(this, T).shadowRoot.querySelectorAll("nine-table-sheet");
       l == null || l.forEach((d, h) => {
         e[h] && setTimeout(() => {
           d.generate(e[h]), s && t(this, pt).call(this);
         });
       });
     }, "#render"));
-    b(this, q, i), t(this, Dt).call(this);
+    b(this, T, i), t(this, Dt).call(this);
   }
 };
-q = new WeakMap(), Dt = new WeakMap(), pt = new WeakMap(), Bt = new WeakMap(), a(de, "LayoutManager");
+T = new WeakMap(), Dt = new WeakMap(), pt = new WeakMap(), Nt = new WeakMap(), a(de, "LayoutManager");
 let te = de;
 var mt, ot;
 const fe = class fe {
@@ -1068,23 +1071,23 @@ const fe = class fe {
 };
 mt = new WeakMap(), ot = new WeakMap(), a(fe, "ngRow");
 let ee = fe;
-var k, R, L, rt, Nt, N, Pt, Z, xt, Yt, Vt, lt;
+var k, R, L, rt, Bt, B, Pt, Z, xt, Yt, Vt, lt;
 const C = class C {
   constructor(i, e) {
     c(this, k);
     c(this, R);
     c(this, L, []);
     c(this, rt, []);
-    c(this, Nt, 0);
-    c(this, N, []);
+    c(this, Bt, 0);
+    c(this, B, []);
     c(this, Pt, /* @__PURE__ */ a(() => {
-      b(this, N, []);
+      b(this, B, []);
       const i = t(this, k).template || [];
       Array.from(i).forEach((e) => {
         var s;
-        t(this, N).push(((s = e.getBoundingClientRect) == null ? void 0 : s.call(e).height) || 24);
+        t(this, B).push(((s = e.getBoundingClientRect) == null ? void 0 : s.call(e).height) || 24);
       }), (t(this, R).rawRecords || []).forEach((e) => {
-        e.__ng || (e.__ng = t(this, xt).call(this)), e.__ng.height = t(this, N).slice();
+        e.__ng || (e.__ng = t(this, xt).call(this)), e.__ng.height = t(this, B).slice();
       });
     }, "#initialize"));
     c(this, Z, /* @__PURE__ */ a(() => {
@@ -1112,10 +1115,10 @@ const C = class C {
       rowState: C.ROW_STATE.EMPTY,
       deleted: !1,
       filtered: !1,
-      height: t(this, N).slice(),
+      height: t(this, B).slice(),
       o: {},
       c: {},
-      _: [0, 0, 0, 0, C.ROW_STATE.EMPTY, !1, !1, !0, !1, !0, !0, !1, t(this, N).slice(), -1, {}, {}]
+      _: [0, 0, 0, 0, C.ROW_STATE.EMPTY, !1, !1, !0, !1, !0, !0, !1, t(this, B).slice(), -1, {}, {}]
     }), "#getDefaultMeta"));
     v(this, "reset", /* @__PURE__ */ a(() => {
       b(this, L, []), b(this, rt, []), t(this, Z).call(this);
@@ -1198,7 +1201,7 @@ const C = class C {
     this.clear(), this.add(i, !1);
   }
   get nextId() {
-    return ++ve(this, Nt)._;
+    return ++ve(this, Bt)._;
   }
   get length() {
     return t(this, L).length;
@@ -1207,7 +1210,7 @@ const C = class C {
     return this.length;
   }
 };
-k = new WeakMap(), R = new WeakMap(), L = new WeakMap(), rt = new WeakMap(), Nt = new WeakMap(), N = new WeakMap(), Pt = new WeakMap(), Z = new WeakMap(), xt = new WeakMap(), Yt = new WeakMap(), Vt = new WeakMap(), lt = new WeakMap(), a(C, "ngData"), // 🎯 행 상태 정의 상수를 클래스 내부로 내재화
+k = new WeakMap(), R = new WeakMap(), L = new WeakMap(), rt = new WeakMap(), Bt = new WeakMap(), B = new WeakMap(), Pt = new WeakMap(), Z = new WeakMap(), xt = new WeakMap(), Yt = new WeakMap(), Vt = new WeakMap(), lt = new WeakMap(), a(C, "ngData"), // 🎯 행 상태 정의 상수를 클래스 내부로 내재화
 v(C, "ROW_STATE", {
   EMPTY: "EMPTY",
   NORMAL: "NORMAL",