@ninebone/datagrid 0.0.4 → 0.0.5

package/dist/nine-table.js

@@ -323,10 +323,10 @@ var n = new class extends e.constructor {
 		})), this.#t = this.#t.filter((e) => e.name !== "" && e.name !== "__ng"), this.#t.sort((e, t) => e.name.length < t.name.length ? 1 : -1);
 	};
 	#r = () => {
-		this.#t = [], n.log(this.#e.querySelectorAll("table"));
+		this.#t = [];
 		let e = Array.from(this.#e.querySelectorAll("table"));
 		if (e && e.length !== 0) {
-			for (let t of e) n.log(t), t.querySelectorAll("[data-bind]").forEach((e) => {
+			for (let t of e) t.querySelectorAll("[data-bind]").forEach((e) => {
 				let t = e.dataset.bind, n = e.getAttribute("data-type") || "string";
 				t && this.#t.push({
 					name: t,
@@ -646,7 +646,7 @@ var p = class extends HTMLElement {
 		m < 0 && (m = 0), m > h && (m = h), n.style.top = `${m}px`, this.#r.top.disabled = f <= 0, this.#r.bottom.disabled = f >= p - 1;
 	};
 	#s = () => {
-		n.log("nine-table-vscrollbar.#init"), this.#r.container, this.#r.thumb.addEventListener("mousedown", (e) => {
+		this.#r.thumb.addEventListener("mousedown", (e) => {
 			if (e.button !== 0) return;
 			e.stopPropagation(), e.preventDefault(), this.#n = !0, this.#i = e.clientY, this.#a = parseFloat(this.#r.thumb.style.top) || 0;
 			let t = this.#r.track.getBoundingClientRect().height - this.#r.thumb.clientHeight, n = (e) => {
@@ -663,37 +663,32 @@ var p = class extends HTMLElement {
 			document.addEventListener("mousemove", n), document.addEventListener("mouseup", r);
 		}), this.#r.track.addEventListener("mousedown", (e) => {
 			if (e.button !== 0 || e.target === this.#r.thumb) return;
-			let t = this.#r.track.getBoundingClientRect(), r = this.#r.thumb.clientHeight, i = this.#r.track.clientHeight - r;
-			if (i > 0) {
-				let a = e.clientY - t.top - r / 2, o = Math.max(0, Math.min(1, a / i)), { totalCount: s } = this.#o(), c = Math.max(0, Math.min(Math.floor(o * (s - 1)), s - 1));
-				n.log("🎯 [VScroll Track Click]", {
-					ratio: o,
-					clickY: a,
-					totalCount: s,
-					targetRow: c
-				}), c >= 0 && this.#t.rowManager && typeof this.#t.rowManager.scrollToDataRow == "function" && this.#t.rowManager.scrollToDataRow(c, "top");
+			let t = this.#r.track.getBoundingClientRect(), n = this.#r.thumb.clientHeight, r = this.#r.track.clientHeight - n;
+			if (r > 0) {
+				let i = e.clientY - t.top - n / 2, a = Math.max(0, Math.min(1, i / r)), { totalCount: o } = this.#o(), s = Math.max(0, Math.min(Math.floor(a * (o - 1)), o - 1));
+				s >= 0 && this.#t.rowManager && typeof this.#t.rowManager.scrollToDataRow == "function" && this.#t.rowManager.scrollToDataRow(s, "top");
 			}
 			this.refresh();
 		});
 		let e = null, t = (t) => {
 			if (e) return;
-			let r = () => {
+			let n = () => {
 				let e = this.#t.querySelector("tbody.body tr");
-				if (!e || e.dataset.row === void 0 || (n.log(this.#t.isLastRow()), t === "down" && this.#t.isLastRow())) return;
-				let r = parseInt(e.dataset.row, 10), i = t === "down" ? r + 1 : Math.max(0, r - 1);
-				this.#t.rowManager.scrollToDataRow(i, null, () => {
+				if (!e || e.dataset.row === void 0 || t === "down" && this.#t.isLastRow()) return;
+				let n = parseInt(e.dataset.row, 10), r = t === "down" ? n + 1 : Math.max(0, n - 1);
+				this.#t.rowManager.scrollToDataRow(r, null, () => {
 					this.refresh();
 				});
 			};
-			r(), e = setInterval(r, 200);
-		}, r = () => {
+			n(), e = setInterval(n, 200);
+		}, n = () => {
 			e &&= (clearInterval(e), null);
 		};
 		this.#r.top.addEventListener("mousedown", (e) => {
 			e.button === 0 && t("up");
 		}), this.#r.bottom.addEventListener("mousedown", (e) => {
 			e.button === 0 && t("down");
-		}), document.addEventListener("mouseup", r), this.#r.top.addEventListener("mouseleave", r), this.#r.bottom.addEventListener("mouseleave", r);
+		}), document.addEventListener("mouseup", n), this.#r.top.addEventListener("mouseleave", n), this.#r.bottom.addEventListener("mouseleave", n);
 	};
 };
 customElements.get("nine-table-vscrollbar") || customElements.define("nine-table-vscrollbar", p);
@@ -726,7 +721,7 @@ var m = {
 		}), this.#n = e;
 	};
 	apply() {
-		if (n.log("==================", "Grouping.Apply"), this.#i) return;
+		if (this.#i) return;
 		this.#i = !0;
 		let e = [], t = this.#e.sourceTable;
 		t && t.querySelectorAll("tbody tr[grouping=\"true\"]").forEach((t) => {
@@ -867,44 +862,43 @@ var m = {
 		}), this.#n.selection.refresh());
 	};
 	#p = (e, t = !1) => {
-		n.log("handleGroupdScroll() start");
-		let r = this.#n.view.getArray() || [], i = r.length;
-		if (i === 0) {
+		let n = this.#n.view.getArray() || [], r = n.length;
+		if (r === 0) {
 			this.#n.elements.scrollHolder.style.height = "0px";
 			return;
 		}
-		let a = this.#n.querySelector(".ng-sheet-body .ng-sheet-body-content"), o = this.#n.templateLength || 1, s = (e) => {
+		let i = this.#n.querySelector(".ng-sheet-body .ng-sheet-body-content"), a = this.#n.templateLength || 1, o = (e) => {
 			if (e.type === "group") {
 				let t = e.record[m.DEPTH] || 0;
-				return this.#a[t] || this.#o / o;
+				return this.#a[t] || this.#o / a;
 			}
 			{
 				let e = 0, t = this.#n.templateLength || 1, n = 0;
 				for (let e = 0; e < t - 1; e++) n += this.#a[e] || 0;
 				return e = this.#o - n, e > 0 ? e : this.#o;
 			}
-		}, c = 0, l = Array(i);
-		for (let e = 0; e < i; e++) {
-			let t = s(r[e]);
-			l[e] = t, c += t;
+		}, s = 0, c = Array(r);
+		for (let e = 0; e < r; e++) {
+			let t = o(n[e]);
+			c[e] = t, s += t;
 		}
-		this.#n.elements.scrollHolder.style.height = `${c}px`, n.log("*************", c);
-		let u = this.#n.clientHeight, d = 0, f = 0;
-		for (let t = 0; t < i; t++) {
-			let n = l[t];
-			if (d + n > e) {
-				f = t;
+		this.#n.elements.scrollHolder.style.height = `${s}px`;
+		let l = this.#n.clientHeight, u = 0, d = 0;
+		for (let t = 0; t < r; t++) {
+			let n = c[t];
+			if (u + n > e) {
+				d = t;
 				break;
 			}
-			d += n, f = t;
+			u += n, d = t;
 		}
-		let p = e - d;
-		a && a.querySelectorAll("tbody").forEach((e) => {
-			e.style.top = `-${Math.max(0, p)}px`;
+		let f = e - u;
+		i && i.querySelectorAll("tbody").forEach((e) => {
+			e.style.top = `-${Math.max(0, f)}px`;
 		});
-		let h = this.#r.firstTr, g = h && h.dataset.virtualIndex !== void 0 ? parseInt(h.dataset.virtualIndex, 10) : -1;
-		if (!t && g === f) return;
-		let _ = Math.ceil(u / (this.#o / o)), v = (this.#n.grouping.columns?.length || 1) * 15, y = f, b = Math.min(i, f + _ + v), x = r.slice(y, b);
+		let p = this.#r.firstTr, h = p && p.dataset.virtualIndex !== void 0 ? parseInt(p.dataset.virtualIndex, 10) : -1;
+		if (!t && h === d) return;
+		let g = Math.ceil(l / (this.#o / a)), _ = (this.#n.grouping.columns?.length || 1) * 15, v = d, y = Math.min(r, d + g + _), b = n.slice(v, y);
 		[
 			".ng-container-body",
 			".ng-container-left",
@@ -912,21 +906,21 @@ var m = {
 		].forEach((e) => {
 			let t = this.#n.querySelector(`.ng-sheet-body ${e}`);
 			if (!t) return;
-			let n = Array.from(t.querySelectorAll("tbody.body tr"));
-			for (let e = 0; e < n.length; e += o) {
-				let t = Math.floor(e / o), i = x[t], a = n.slice(e, e + o);
-				if (!i || t >= x.length) {
-					a.forEach((e) => {
+			let r = Array.from(t.querySelectorAll("tbody.body tr"));
+			for (let e = 0; e < r.length; e += a) {
+				let t = Math.floor(e / a), i = b[t], o = r.slice(e, e + a);
+				if (!i || t >= b.length) {
+					o.forEach((e) => {
 						e.style.display = "none", e.dataset.matrixRow = null, e.dataset.row = null, e.dataset.index = null;
 					});
 					continue;
 				}
-				let s = f + t;
-				a.forEach((e, n) => {
-					let a = f + t;
+				let s = d + t;
+				o.forEach((e, r) => {
+					let a = d + t;
 					e.dataset.virtualIndex = a, e.dataset.row = i.type === "data" ? s : "";
 					let o = e.getAttribute("grouping") === "true";
-					if (i.type === "group") o && n === i.record[m.DEPTH] ? (e.style.display = "", this.#m(e, r, i.record, a)) : (e.style.display = "none", e.dataset.matrixRow = null, e.dataset.row = null, e.dataset.index = null);
+					if (i.type === "group") o && r === i.record[m.DEPTH] ? (e.style.display = "", this.#m(e, n, i.record, a)) : (e.style.display = "none", e.dataset.matrixRow = null, e.dataset.row = null, e.dataset.index = null);
 					else if (o) e.style.display = "none", e.dataset.matrixRow = null, e.dataset.row = null, e.dataset.index = null;
 					else {
 						e.style.display = "";
@@ -935,7 +929,7 @@ var m = {
 					}
 				});
 			}
-		}), this.#n.selection.refresh(), n.log("handleGroupdScroll() end");
+		}), this.#n.selection.refresh();
 	};
 	#m = (e, t, n, r) => {
 		let i = this.#n.templateLength || 1, a = parseInt(e.dataset.subrow, 10) || 0, o = r * i + a, s = n[m.CHILDREN], c = this.#t.data.getArray(), l = s ? s.map((e) => c[e]).filter(Boolean) : [];
@@ -972,22 +966,22 @@ var m = {
 		let e = this.#n.querySelector(".ng-sheet-body");
 		e && (this.#c = e.clientHeight, this.#g(), this.#v(), this.#f(e.scrollTop, !0), e.addEventListener("scroll", (t) => {
 			if (this.#u) return;
-			let r = this.#o || 0, i = (this.#n.view.getArray()?.length || 0) * r;
-			i <= e.clientHeight ? n.log(i, e.clientHeight) : (this.#f(e.scrollTop), this.#n.querySelector("nine-table-vscrollbar").refresh());
+			let n = this.#o || 0;
+			(this.#n.view.getArray()?.length || 0) * n <= e.clientHeight || (this.#f(e.scrollTop), this.#n.querySelector("nine-table-vscrollbar").refresh());
 		}, { passive: !0 }));
 	};
-	scrollToDataRow(e, t = "top", r) {
-		let i = this.#n.querySelector(".ng-sheet-body"), a = this.#n.view.getArray()?.length || 0, o = Math.max(0, Math.min(e, a - 1)), s = 0;
+	scrollToDataRow(e, t = "top", n) {
+		let r = this.#n.querySelector(".ng-sheet-body"), i = this.#n.view.getArray()?.length || 0, a = Math.max(0, Math.min(e, i - 1)), o = 0;
 		if (this.#d) {
-			let e = Math.max(i.scrollHeight - i.clientHeight, 1);
-			s = o / Math.max(a - 1, 1) * e;
+			let e = Math.max(r.scrollHeight - r.clientHeight, 1);
+			o = a / Math.max(i - 1, 1) * e;
 		} else {
-			let e = this.#o, t = o * e, n = (this.#n.elements.body.thead?.offsetHeight || 0) + (this.#n.elements.body.tfoot?.offsetHeight || 0) + this.#n.elements.body.tbody.head.offsetHeight, r = i.offsetHeight || 0, c = Math.max(a * e + n - r, 0), l = 15e6, u = c > l, d = 1;
-			u && (d = l / c), s = t * d;
+			let e = this.#o, t = a * e, n = (this.#n.elements.body.thead?.offsetHeight || 0) + (this.#n.elements.body.tfoot?.offsetHeight || 0) + this.#n.elements.body.tbody.head.offsetHeight, s = r.offsetHeight || 0, c = Math.max(i * e + n - s, 0), l = 15e6, u = c > l, d = 1;
+			u && (d = l / c), o = t * d;
 		}
-		n.log(s), this.#u = !0, i.scrollTop = s, this.#f(s), requestAnimationFrame(() => {
+		this.#u = !0, r.scrollTop = o, this.#f(o), requestAnimationFrame(() => {
 			requestAnimationFrame(() => {
-				this.#u = !1, typeof r == "function" && r();
+				this.#u = !1, typeof n == "function" && n();
 			});
 		});
 	}
@@ -998,30 +992,25 @@ var m = {
 		if (!this.#n.classList.contains("active") || !this.#n.sourceTable) return;
 		let e = this.#n.sourceTable?.querySelectorAll("tbody.body tr"), t = this.#n.querySelector(".ng-sheet-body .ng-container-body tbody.body");
 		t.querySelectorAll("tr").forEach((e) => e.remove());
-		let r = document.createDocumentFragment();
-		e.forEach((e) => r.appendChild(e.cloneNode(!0))), t.appendChild(r);
-		let i = t.querySelectorAll("tr");
-		this.#a = [], i.forEach((e) => {
-			if (e?.offsetHeight === 2) {
-				n.log("================================"), n.log(this.#n), n.log(e), n.log(e.cloneNode(!0));
-				let t = window.getComputedStyle(e);
-				n.log("================================", t, t.height, t.minHeight);
-			}
+		let n = document.createDocumentFragment();
+		e.forEach((e) => n.appendChild(e.cloneNode(!0))), t.appendChild(n);
+		let r = t.querySelectorAll("tr");
+		this.#a = [], r.forEach((e) => {
 			this.#a.push(Math.max(e.offsetHeight, 24));
-		}), i.forEach((e) => e.remove()), this.#o = this.#a.reduce((e, t) => e + t, 0), this.#_();
+		}), r.forEach((e) => e.remove()), this.#o = this.#a.reduce((e, t) => e + t, 0), this.#_();
 	};
 	#_ = () => {
-		if (n.log("[DEBUG #updateRowCount] sheetHeight:", this.#c, "cachedTemplateHeight:", this.#o), this.#c > 0 && this.#o > 0) {
+		if (this.#c > 0 && this.#o > 0) {
 			let e = Math.ceil(this.#c / this.#o), t = this.#e;
 			if (this.#d && this.#n.grouping) {
 				let e = this.#n.grouping.columns?.length || 1;
 				t += e * 15;
 			}
-			this.#l = e + t, n.log("[DEBUG #updateRowCount] calculated cachedRowCount:", this.#t, this.#l);
+			this.#l = e + t;
 		}
 	};
 	#v = () => {
-		n.log("rowManager.#renderAllContainers"), [
+		[
 			".ng-container-body",
 			".ng-container-left",
 			".ng-container-right"
@@ -1114,7 +1103,7 @@ var m = {
 		endCol: -1
 	};
 	constructor(e) {
-		this.#e = e, this.#r(), n.log("🎯 [CellSelection] Initialized (New Structure Compatible)");
+		this.#e = e, this.#r();
 	}
 	#n(e) {
 		if (!e) return {
@@ -1192,7 +1181,7 @@ var m = {
 	};
 	#r() {
 		let e = this.#e.querySelector(".ng-sheet-body");
-		e ? e.addEventListener("mousedown", (e) => {
+		e && e.addEventListener("mousedown", (e) => {
 			if (e.button !== 0) return;
 			let t = e.target.closest("td, th");
 			if (!t || t.dataset.row === void 0 || t.dataset.col === void 0) return;
@@ -1222,7 +1211,7 @@ var m = {
 				this.#e.style.userSelect = "", this.#e.style.webkitUserSelect = "", document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", c);
 			};
 			document.addEventListener("mousemove", s), document.addEventListener("mouseup", c);
-		}) : n.log("❌ [CellSelection] .ng-sheet-body not found!");
+		});
 	}
 }, b = class {
 	#e;
@@ -1230,7 +1219,7 @@ var m = {
 	#n = null;
 	#r = null;
 	constructor(e) {
-		this.#e = e, this.#t = e.getRootNode().host, this.#g(), n.log("🎯 [CellNavigation] Initialized (Diagnostic Logging Restored)");
+		this.#e = e, this.#t = e.getRootNode().host, this.#g();
 	}
 	get currentCell() {
 		return this.#n;
@@ -1324,11 +1313,7 @@ var m = {
 			"time",
 			"week",
 			"month"
-		].includes(e.target.type))) return;
-		if (!this.#n || !this.#r) {
-			n.log("⚠️ [moveCell] currentCell or currentTr is missing!");
-			return;
-		}
+		].includes(e.target.type)) || !this.#n || !this.#r) return;
 		let t;
 		switch (e.code) {
 			case "Tab":
@@ -1455,18 +1440,18 @@ var m = {
 		let t = Array.from(this.#e.querySelectorAll(`.ng-container-${e}`));
 		if (t.length !== 0) {
 			if (e === "left" || e === "right" || !this.#e.isAutoFitCol && t[0].querySelector("table")?.getAttribute("auto-fit-col") !== "true") {
-				let r = t[0].querySelector("table colgroup");
-				if (!r) return;
-				let i = 0, a = {};
-				Array.from(r.querySelectorAll("col")).forEach((e) => {
+				let n = t[0].querySelector("table colgroup");
+				if (!n) return;
+				let r = 0, i = {};
+				Array.from(n.querySelectorAll("col")).forEach((e) => {
 					let t = e.getAttribute("data-col"), n = parseInt(e.getAttribute("width"), 10);
-					isNaN(n) || (a[t] = n, i += n);
-				}), t.forEach((r) => {
-					let o = r.querySelectorAll("table");
-					n.log("====================", t, e), e === "body" ? o.forEach((e) => {
-						e.style.width = `${i}px`;
-					}) : (r.style.flex = `0 0 ${i}px`, r.style.width = `${i}px`, r.style.minWidth = `${i}px`, r.style.maxWidth = `${i}px`, o.forEach((e) => {
-						e.style.width = `${i}px`, e.style.minWidth = `${i}px`, e.style.maxWidth = `${i}px`, Object.entries(a).forEach(([t, n]) => {
+					isNaN(n) || (i[t] = n, r += n);
+				}), t.forEach((t) => {
+					let n = t.querySelectorAll("table");
+					e === "body" ? n.forEach((e) => {
+						e.style.width = `${r}px`;
+					}) : (t.style.flex = `0 0 ${r}px`, t.style.width = `${r}px`, t.style.minWidth = `${r}px`, t.style.maxWidth = `${r}px`, n.forEach((e) => {
+						e.style.width = `${r}px`, e.style.minWidth = `${r}px`, e.style.maxWidth = `${r}px`, Object.entries(i).forEach(([t, n]) => {
 							e.querySelectorAll(`th[data-col="${t}"], td[data-col="${t}"]`).forEach((e) => {
 								e.style.width = `${n}px`, e.style.minWidth = `${n}px`, e.style.maxWidth = `${n}px`;
 							});
@@ -1479,16 +1464,15 @@ var m = {
 			this.#e.querySelector("nine-table-hscrollbar")?.refresh();
 		}
 	}
-	setColumnWidth(e, t, r = null) {
-		n.log("setColumnWidth");
-		let i = [];
-		if (i = Array.from(this.#e.querySelectorAll(`table colgroup col[data-col="${e}"]`)), i.length === 0) return;
-		let a = i[0].closest(".ng-container-left, .ng-container-body, .ng-container-right"), o = r || (a?.classList.contains("ng-container-left") ? "left" : a?.classList.contains("ng-container-right") ? "right" : "body");
-		i.forEach((e) => {
-			e.setAttribute("width", t), e.style.width = `${t}px`, n.log(e, t);
+	setColumnWidth(e, t, n = null) {
+		let r = [];
+		if (r = Array.from(this.#e.querySelectorAll(`table colgroup col[data-col="${e}"]`)), r.length === 0) return;
+		let i = r[0].closest(".ng-container-left, .ng-container-body, .ng-container-right"), a = n || (i?.classList.contains("ng-container-left") ? "left" : i?.classList.contains("ng-container-right") ? "right" : "body");
+		r.forEach((e) => {
+			e.setAttribute("width", t), e.style.width = `${t}px`;
 		});
-		let s = this.#e.sourceTable?.querySelector(`colgroup col[data-col="${e}"]`);
-		s && (s.setAttribute("width", t), s.style.width = `${t}px`), this.refreshLayout(o), (o === "left" || o === "right") && this.refreshLayout("body"), this.#e.rowManager?.refresh();
+		let o = this.#e.sourceTable?.querySelector(`colgroup col[data-col="${e}"]`);
+		o && (o.setAttribute("width", t), o.style.width = `${t}px`), this.refreshLayout(a), (a === "left" || a === "right") && this.refreshLayout("body"), this.#e.rowManager?.refresh();
 	}
 	#p(e) {
 		if (this.#e.isAutoFitCol) return !0;
@@ -1520,29 +1504,29 @@ var m = {
 		a || o ? n.classList.add("resizable-edge") : n.classList.remove("resizable-edge");
 	};
 	#g = (e) => {
-		if (n.log("onPointerDown"), !e.actualTarget.closest("thead")) return;
+		if (!e.actualTarget.closest("thead")) return;
 		let t = e.actualTarget.closest("th, td");
-		if (n.log(t, e.actualTarget), !t || !t.classList.contains("resizable-edge")) return;
+		if (!t || !t.classList.contains("resizable-edge")) return;
 		e.preventDefault();
-		let r = t.getBoundingClientRect(), i = e.clientX - r.left, a = t;
-		if (i <= x) {
+		let n = t.getBoundingClientRect(), r = e.clientX - n.left, i = t;
+		if (r <= x) {
 			let e = t.previousElementSibling;
-			if (e && e.dataset.col !== void 0 && e.getAttribute("collapsed") !== "true") a = e;
+			if (e && e.dataset.col !== void 0 && e.getAttribute("collapsed") !== "true") i = e;
 			else if (!t.previousElementSibling) return;
 		}
-		this.#s = a, this.#o = this.#m(a);
-		let o = this.#e.querySelector(`.ng-container-${this.#o}`);
-		if (!o) return;
-		let s = parseInt(a.dataset.col, 10), c = a.colSpan || 1;
-		if (this.#i = s + c - 1, this.#p(a)) {
+		this.#s = i, this.#o = this.#m(i);
+		let a = this.#e.querySelector(`.ng-container-${this.#o}`);
+		if (!a) return;
+		let o = parseInt(i.dataset.col, 10), s = i.colSpan || 1;
+		if (this.#i = o + s - 1, this.#p(i)) {
 			this.#a = this.#i + 1;
-			let e = o.querySelector(`col[data-col="${this.#a}"]`);
+			let e = a.querySelector(`col[data-col="${this.#a}"]`);
 			e ? this.#u = parseInt(e.getAttribute("width"), 10) || 100 : this.#a = null;
 		} else this.#a = null;
-		let l = a.getBoundingClientRect(), u = this.#e.getBoundingClientRect();
-		this.#d = l.width, this.#f = l.left - u.left;
-		let d = o.querySelector(`col[data-col="${this.#i}"]`)?.getAttribute("width");
-		this.#l = d && !isNaN(parseInt(d, 10)) ? parseInt(d, 10) : l.width / c, this.#c = e.clientX, this.#n && (this.#n.classList.add("active"), this.#_(e.clientX)), window.addEventListener("pointermove", this.#v), window.addEventListener("pointerup", this.#y, { once: !0 });
+		let c = i.getBoundingClientRect(), l = this.#e.getBoundingClientRect();
+		this.#d = c.width, this.#f = c.left - l.left;
+		let u = a.querySelector(`col[data-col="${this.#i}"]`)?.getAttribute("width");
+		this.#l = u && !isNaN(parseInt(u, 10)) ? parseInt(u, 10) : c.width / s, this.#c = e.clientX, this.#n && (this.#n.classList.add("active"), this.#_(e.clientX)), window.addEventListener("pointermove", this.#v), window.addEventListener("pointerup", this.#y, { once: !0 });
 	};
 	#_(e) {
 		let t = e - this.#c, n = this.#p(this.#s);
@@ -1561,7 +1545,7 @@ var m = {
 		o && (o.textContent = `${Math.round(r)}px`);
 	}
 	#v = (e) => {
-		n.log(e), this.#_(e.clientX);
+		this.#_(e.clientX);
 	};
 	#y = (e) => {
 		window.removeEventListener("pointermove", this.#v);
@@ -1584,56 +1568,56 @@ var m = {
 	#b = (e) => {
 		let t = e.target.closest("th, td");
 		if (!t || !t.classList.contains("resizable-edge")) return;
-		let r = t.getBoundingClientRect();
-		e.clientX - r.left <= x && (t = t.previousElementSibling);
-		let i = parseInt(t.dataset.col, 10), a = this.#e.querySelector(`tbody.body [data-col="${i}"]`);
-		if (!a || !a.dataset.bind || a.classList.contains("CELL-RADIO")) return;
-		let o = 0;
-		Array.from(a.firstElementChild.children).forEach((e) => {
+		let n = t.getBoundingClientRect();
+		e.clientX - n.left <= x && (t = t.previousElementSibling);
+		let r = parseInt(t.dataset.col, 10), i = this.#e.querySelector(`tbody.body [data-col="${r}"]`);
+		if (!i || !i.dataset.bind || i.classList.contains("CELL-RADIO")) return;
+		let a = 0;
+		Array.from(i.firstElementChild.children).forEach((e) => {
 			switch (e.tagName) {
 				case "SPAN":
-					o += 8;
+					a += 8;
 					break;
 				case "DIV":
-					o += 8;
+					a += 8;
 					break;
 				case "BUTTON":
-					o += 32;
+					a += 32;
 					break;
 				case "SELECT":
-					o += 32;
+					a += 32;
 					break;
 				case "INPUT": switch ((e.type || "text").toLowerCase()) {
 					case "checkbox":
 					case "radio":
-						o += 12;
+						a += 12;
 						break;
 					case "button":
 					case "submit":
 					case "reset":
 					case "image":
-						o += 16;
+						a += 16;
 						break;
 					case "color":
 					case "file":
 					case "range":
-						o += 24;
+						a += 24;
 						break;
 					case "hidden":
-						o += 0;
+						a += 0;
 						break;
-					default: o += 16;
+					default: a += 16;
 				}
 			}
-		}), n.log(o);
-		let s = this.#t.fields.get().indexOf(a.dataset.bind), c = window.getComputedStyle(a).font || "12px sans-serif", l = t.innerText || "", u = (nine.measureTextSize(l, c).width || 0) + 16;
+		});
+		let o = this.#t.fields.get().indexOf(i.dataset.bind), s = window.getComputedStyle(i).font || "12px sans-serif", c = t.innerText || "", l = (nine.measureTextSize(c, s).width || 0) + 16;
 		this.#t.execute(() => {
 			this.#e.view.getArray().forEach((e, t) => {
-				let n = String(a.dataset.expr ? this.#t.exprEngine.evaluate(a.dataset.expr, e, t) : e.v[s] ?? "").trim(), r = nine.measureTextSize(n, c);
-				r.width && r.width > u && (u = r.width);
+				let n = String(i.dataset.expr ? this.#t.exprEngine.evaluate(i.dataset.expr, e, t) : e.v[o] ?? "").trim(), r = nine.measureTextSize(n, s);
+				r.width && r.width > l && (l = r.width);
 			});
-			let e = Math.max(32, Math.min(400, Math.ceil(u) + o));
-			this.setColumnWidth(a.dataset.col, e, this.#m(t));
+			let e = Math.max(32, Math.min(400, Math.ceil(l) + a));
+			this.setColumnWidth(i.dataset.col, e, this.#m(t));
 		});
 	};
 }, C = class extends HTMLElement {
@@ -1833,12 +1817,11 @@ var w = class {
 		this.#r && (window.removeEventListener("pointermove", this.#h), document.body.style.cursor = "", this.#t && (this.#t.style.display = "none", this.#t.replaceChildren()), this.#n && (this.#n.style.display = "none"), this.#o !== null && this.#a !== null && this.#o !== this.#a && this.#o !== this.#a + 1 && this.moveColumn(this.#a, this.#o), this.#r = !1, this.#i = null, this.#a = null, this.#o = null);
 	};
 	moveColumn(e, t) {
-		n.log(this.#e.sourceTable.cloneNode(!0));
-		let r = this.#e.sourceTable.querySelector("colgroup"), i = r.querySelector(`col[data-col="${t}"]`), a = this.#d(this.#i);
-		if (!a || !a.isValidGroup) return;
-		let o = a.colSpan, s = (t) => t >= e && t < e + o, c = this.#e.querySelector(`.ng-sheet-body-content col[data-col="${t}"]`), l = c?.closest(".ng-container-left") ? "left" : c?.closest(".ng-container-right") ? "right" : null;
-		r.querySelectorAll("col").forEach((e) => {
-			s(parseInt(e.getAttribute("data-col"), 10)) && (l ? e.setAttribute("fixed", l) : e.removeAttribute("fixed"), r.insertBefore(e, i));
+		let n = this.#e.sourceTable.querySelector("colgroup"), r = n.querySelector(`col[data-col="${t}"]`), i = this.#d(this.#i);
+		if (!i || !i.isValidGroup) return;
+		let a = i.colSpan, o = (t) => t >= e && t < e + a, s = this.#e.querySelector(`.ng-sheet-body-content col[data-col="${t}"]`), c = s?.closest(".ng-container-left") ? "left" : s?.closest(".ng-container-right") ? "right" : null;
+		n.querySelectorAll("col").forEach((e) => {
+			o(parseInt(e.getAttribute("data-col"), 10)) && (c ? e.setAttribute("fixed", c) : e.removeAttribute("fixed"), n.insertBefore(e, r));
 		}), [
 			"thead",
 			"tbody",
@@ -1847,7 +1830,7 @@ var w = class {
 			this.#e.sourceTable.querySelectorAll(`${e} tr`).forEach((e) => {
 				let n = Array.from(e.children), r = n.find((e) => parseInt(e.dataset.col, 10) >= t);
 				n.forEach((t) => {
-					s(parseInt(t.dataset.col, 10)) && e.insertBefore(t, r || null);
+					o(parseInt(t.dataset.col, 10)) && e.insertBefore(t, r || null);
 				});
 			});
 		}), this.#e.recompileAndRefresh();
@@ -1892,64 +1875,64 @@ var w = class {
 		}
 		return !0;
 	}
-	executeFixToggle(e, t, r = "left") {
+	executeFixToggle(e, t, n = "left") {
 		if (!this.#e || !t) return;
-		let i = this.#e.sourceTable;
-		if (!i) return;
-		let a = parseInt(t.dataset.col, 10), o = t.colSpan || 1, s = a + o - 1;
-		if (isNaN(s)) return;
-		let c = i.querySelector("colgroup");
-		if (!c) return;
-		let l = Array.from(c.querySelectorAll("col"));
-		if (e === "fix-column") l.forEach((e) => {
-			parseInt(e.getAttribute("data-col"), 10) <= s && e.setAttribute("fixed", r);
+		let r = this.#e.sourceTable;
+		if (!r) return;
+		let i = parseInt(t.dataset.col, 10), a = t.colSpan || 1, o = i + a - 1;
+		if (isNaN(o)) return;
+		let s = r.querySelector("colgroup");
+		if (!s) return;
+		let c = Array.from(s.querySelectorAll("col"));
+		if (e === "fix-column") c.forEach((e) => {
+			parseInt(e.getAttribute("data-col"), 10) <= o && e.setAttribute("fixed", n);
 		}), [
 			"thead",
 			"tbody",
 			"tfoot"
 		].forEach((e) => {
-			i.querySelectorAll(`${e} tr`).forEach((e) => {
+			r.querySelectorAll(`${e} tr`).forEach((e) => {
 				Array.from(e.children).forEach((e) => {
 					let t = parseInt(e.dataset.col, 10);
-					!isNaN(t) && t <= s && e.setAttribute("fixed", r);
+					!isNaN(t) && t <= o && e.setAttribute("fixed", n);
 				});
 			});
 		});
 		else if (e === "unfix-column") {
-			let e = a, t = a + o - 1;
+			let e = i, t = i + a - 1;
 			[
 				"thead",
 				"tbody",
 				"tfoot"
 			].forEach((n) => {
-				i.querySelectorAll(`${n} tr`).forEach((n, r) => {
-					Array.from(n.children).forEach((i) => {
-						let o = parseInt(i.dataset.col, 10), c = o + (i.colSpan || 1) - 1, l = i.rowSpan || 1;
-						(n.sectionRowIndex ?? r) + l - 1 < i.closest("tr").sectionRowIndex || i.closest("tr").sectionRowIndex + l - 1, c < a || o > s || (e = Math.min(e, o), t = Math.max(t, c));
+				r.querySelectorAll(`${n} tr`).forEach((n, r) => {
+					Array.from(n.children).forEach((a) => {
+						let s = parseInt(a.dataset.col, 10), c = s + (a.colSpan || 1) - 1, l = a.rowSpan || 1;
+						(n.sectionRowIndex ?? r) + l - 1 < a.closest("tr").sectionRowIndex || a.closest("tr").sectionRowIndex + l - 1, c < i || s > o || (e = Math.min(e, s), t = Math.max(t, c));
 					});
 				});
-			}), l.forEach((t) => {
+			}), c.forEach((t) => {
 				parseInt(t.getAttribute("data-col"), 10) >= e && t.removeAttribute("fixed");
 			});
 			let n = !1;
-			l.forEach((e) => {
+			c.forEach((e) => {
 				n ? e.removeAttribute("fixed") : e.getAttribute("fixed") || (n = !0);
 			}), [
 				"thead",
 				"tbody",
 				"tfoot"
 			].forEach((e) => {
-				i.querySelectorAll(`${e} tr`).forEach((e) => {
+				r.querySelectorAll(`${e} tr`).forEach((e) => {
 					Array.from(e.children).forEach((e) => {
 						let t = parseInt(e.dataset.col, 10);
 						if (isNaN(t)) return;
-						let n = l.find((e) => parseInt(e.getAttribute("data-col"), 10) === t)?.getAttribute("fixed");
+						let n = c.find((e) => parseInt(e.getAttribute("data-col"), 10) === t)?.getAttribute("fixed");
 						n ? e.setAttribute("fixed", n) : e.removeAttribute("fixed");
 					});
 				});
 			});
 		}
-		n.log(this.#e.sourceTable), this.#e.recompileAndRefresh?.();
+		this.#e.recompileAndRefresh?.();
 	}
 }, E = class extends HTMLElement {
 	#e;
@@ -2055,11 +2038,11 @@ var w = class {
 		let t = e.target.value.toLowerCase().trim();
 		if (!t) this.#r.filtering.clear();
 		else {
-			let e = this.#n.data.getArray(), r = this.#n.data.getHostFields().indexOf("DATA2"), i = [];
+			let e = this.#n.data.getArray(), n = this.#n.data.getHostFields().indexOf("DATA2"), r = [];
 			e.forEach((e) => {
-				let n = r >= 0 && e.v ? e.v[r] : "";
-				String(n).replace(/<[^>]*>?/gm, "").toLowerCase().includes(t) && i.push(n);
-			}), n.log(i), this.#r.filtering.set({ DATA2: [...new Set(i)] });
+				let i = n >= 0 && e.v ? e.v[n] : "";
+				String(i).replace(/<[^>]*>?/gm, "").toLowerCase().includes(t) && r.push(i);
+			}), this.#r.filtering.set({ DATA2: [...new Set(r)] });
 		}
 	};
 	#d = (e) => {
@@ -2096,9 +2079,9 @@ var w = class {
 		this.classList.toggle("filtered", t);
 	};
 	#n = (e) => {
-		n.log(e), e.preventDefault(), e.stopPropagation();
-		let t = this.#e.querySelector("nine-table-filter-panel"), r = this.closest("th, td").dataset.col;
-		t && t.currentCol === r && t.classList.contains("active") ? t.close() : t && t.open(this);
+		e.preventDefault(), e.stopPropagation();
+		let t = this.#e.querySelector("nine-table-filter-panel"), n = this.closest("th, td").dataset.col;
+		t && t.currentCol === n && t.classList.contains("active") ? t.close() : t && t.open(this);
 	};
 }, O = class {
 	#e;
@@ -2126,10 +2109,9 @@ var w = class {
 	clear = (e) => {
 		e ? delete this.#i[e] : this.#i = {}, this.#n = Object.keys(this.#i).length > 0, this.#s(), this.#e.querySelectorAll("nine-table-filter-button").forEach((e) => {
 			e.updateFilteredState();
-		}), n.log(`🔄 [NineTableFiltering] Filter cleared for ${e || "all"}`);
+		});
 	};
 	set = (e) => {
-		n.log(e);
 		let t = Array.isArray(e) ? Object.fromEntries(Object.keys(e[0]).map((t) => [t, [...new Set(e.map((e) => e[t]))]])) : e;
 		this.#i = t, this.#n = Object.keys(t).length > 0, this.#e.toggleAttribute("filtering", this.#n), this.#s();
 	};
@@ -2190,7 +2172,7 @@ var k = class {
 					}
 				});
 			});
-		}), n.log("🎯 [NineTableSorting] Initialized");
+		});
 	}
 	#i(e, t) {
 		let n = t.dataset.col, r = t.closest("tr"), i = r ? r.dataset.subrow || String(r.sectionRowIndex) : "0";
@@ -2221,7 +2203,7 @@ var k = class {
 		}) : this.#n = this.#n.filter((e) => !(e.colIndex === n && e.subRowIndex === i || e.colName === o)), this.#a();
 	}
 	#a() {
-		this.#e.view ? (this.#e.view.setSorting(this.#n), this.#o(), this.#e.invalidate(), n.log("🔄 [NineTableSorting] Sorting applied via RowManager.refresh(true)")) : console.warn("⚠️ [NineTableSorting] Sheet view (SheetView) is not initialized.");
+		this.#e.view && (this.#e.view.setSorting(this.#n), this.#o(), this.#e.invalidate());
 	}
 	#o() {
 		this.#e.querySelectorAll("thead th, thead td").forEach((e) => {
@@ -2311,16 +2293,15 @@ var k = class {
 		this.#n = [], this.refresh();
 	};
 	#o = (e, t) => {
-		n.log(/* @__PURE__ */ new Date());
-		let r = typeof this.#t.data.getHostFields == "function" ? this.#t.data.getHostFields() : [], i = this.#n.map((e) => ({
+		let n = typeof this.#t.data.getHostFields == "function" ? this.#t.data.getHostFields() : [], r = this.#n.map((e) => ({
 			...e,
-			colIndex: r.indexOf(e.colname || e.colName)
+			colIndex: n.indexOf(e.colname || e.colName)
 		}));
 		return e.sort((e, n) => {
-			let r = t[e], a = t[n];
-			for (let t of i) {
-				let i = t.asc, o = t.expr, s, c;
-				o ? (s = this.#t.exprEngine.evaluate(o, r, e), c = this.#t.exprEngine.evaluate(o, a, n)) : t.colIndex >= 0 && r.v && a.v && (s = r.v[t.colIndex], c = a.v[t.colIndex]);
+			let i = t[e], a = t[n];
+			for (let t of r) {
+				let r = t.asc, o = t.expr, s, c;
+				o ? (s = this.#t.exprEngine.evaluate(o, i, e), c = this.#t.exprEngine.evaluate(o, a, n)) : t.colIndex >= 0 && i.v && a.v && (s = i.v[t.colIndex], c = a.v[t.colIndex]);
 				let l = s == null || s === "", u = c == null || c === "";
 				if (!(l && u)) {
 					if (l) return 1;
@@ -2332,7 +2313,7 @@ var k = class {
 							let t = String(s), n = String(c);
 							e = t > n ? 1 : t < n ? -1 : 0;
 						}
-						if (e !== 0) return i ? e : -e;
+						if (e !== 0) return r ? e : -e;
 					}
 				}
 			}
@@ -2589,12 +2570,12 @@ var k = class {
 	}
 	refreshLayout() {
 		requestAnimationFrame(() => {
-			n.log("*************************", this.classList, this.#f.table), this.classList.contains("active") && this.#f.table && (this.#_(), this.isAutoFitCol ? this.autoFit(!0) : this.querySelector("nine-table-hscrollbar")?.refresh(), this.#h(), this.#a?.refreshLayout(), this.#n?.refresh());
+			this.classList.contains("active") && this.#f.table && (this.#_(), this.isAutoFitCol ? this.autoFit(!0) : this.querySelector("nine-table-hscrollbar")?.refresh(), this.#h(), this.#a?.refreshLayout(), this.#n?.refresh());
 		});
 	}
 	#h = () => {
 		let e = this.querySelector(".ng-container-body thead"), t = this.querySelector(".nodata-overlay");
-		t.style.top = `${e.offsetHeight}px`, n.log("***************************************", e), n.log(e.offsetHeight);
+		t.style.top = `${e.offsetHeight}px`;
 	};
 	get view() {
 		return !this.#d && this.#t?.data && (this.#d = new A(this)), this.#d;
@@ -2608,62 +2589,58 @@ var k = class {
 		});
 	};
 	#g = (e = !0) => {
-		n.log("***************** autoFit", this);
 		let t = this.querySelector(".ng-sheet-body .ng-container-body");
 		if (!t) return;
-		let r = this.querySelector(".ng-container-body table colgroup");
-		if (r) {
+		let n = this.querySelector(".ng-container-body table colgroup");
+		if (n) {
 			if (e) {
 				this.setAttribute("auto-fit-col", "true");
 				let e = t.clientWidth;
 				if (e <= 0) return;
-				let i = 0, a = [];
-				r.querySelectorAll("col").forEach((e) => {
+				let r = 0, i = [];
+				n.querySelectorAll("col").forEach((e) => {
 					let t = e.getAttribute("data-col");
-					if (this.querySelector(`thead th[data-col="${t}"]`)?.getAttribute("collapsed") === "true") a.unshift({
+					if (this.querySelector(`thead th[data-col="${t}"]`)?.getAttribute("collapsed") === "true") i.unshift({
 						globalColIndex: t,
 						width: 16,
 						isCollapsed: !0
-					}), n.log(`[AutoFit Col] Index ${t}: COLLAPSED (forced 16px)`);
+					});
 					else {
-						let r = parseInt(e.getAttribute("width"), 10) || 100;
-						a.push({
+						let n = parseInt(e.getAttribute("width"), 10) || 100;
+						i.push({
 							globalColIndex: t,
-							width: r,
+							width: n,
 							isCollapsed: !1
-						}), i += r, n.log(`[AutoFit Col] Index ${t}: NORMAL (original width: ${r}px)`);
+						}), r += n;
 					}
-				}), n.log(`[AutoFit] Total Original Width of Normal Cols: ${i}px`);
-				let o = a.filter((e) => e.isCollapsed).reduce((e, t) => e + t.width, 0), s = Math.max(0, e - o);
-				if (n.log(`[AutoFit] Collapsed Total Width: ${o}px | Available Width for Normal Cols: ${s}px`), i > 0 && a.length > 0) {
-					let t = 0, r = a.map((e) => {
-						if (e.isCollapsed) return {
-							globalColIndex: e.globalColIndex,
+				});
+				let a = i.filter((e) => e.isCollapsed).reduce((e, t) => e + t.width, 0), o = Math.max(0, e - a);
+				if (r > 0 && i.length > 0) {
+					let e = 0, t = i.map((t) => {
+						if (t.isCollapsed) return {
+							globalColIndex: t.globalColIndex,
 							remainder: 0,
 							width: 16
 						};
-						let n = e.width * s / i, r = Math.max(30, Math.floor(n));
-						return t += r, {
-							globalColIndex: e.globalColIndex,
+						let n = t.width * o / r, i = Math.max(30, Math.floor(n));
+						return e += i, {
+							globalColIndex: t.globalColIndex,
 							remainder: n - Math.floor(n),
-							width: r
+							width: i
 						};
-					}), o = s - t;
-					n.log(`[AutoFit] Initial Allocated Total: ${t}px | Remainder Pixels to distribute: ${o}`);
-					let c = r.filter((e) => !a.find((t) => t.globalColIndex === e.globalColIndex)?.isCollapsed);
-					if (o > 0 && c.length > 0) {
-						c.sort((e, t) => t.remainder - e.remainder);
-						for (let e = 0; e < o; e++) c[e % c.length].width += 1;
-					} else if (o < 0 && c.length > 0) {
-						c.sort((e, t) => e.remainder - t.remainder);
-						for (let e = 0; e < Math.abs(o); e++) {
-							let t = c[e % c.length];
+					}), n = o - e, a = t.filter((e) => !i.find((t) => t.globalColIndex === e.globalColIndex)?.isCollapsed);
+					if (n > 0 && a.length > 0) {
+						a.sort((e, t) => t.remainder - e.remainder);
+						for (let e = 0; e < n; e++) a[e % a.length].width += 1;
+					} else if (n < 0 && a.length > 0) {
+						a.sort((e, t) => e.remainder - t.remainder);
+						for (let e = 0; e < Math.abs(n); e++) {
+							let t = a[e % a.length];
 							t.width > 30 && --t.width;
 						}
 					}
-					let l = r.reduce((e, t) => e + t.width, 0);
-					n.log(`[AutoFit Verification] Target Container Width: ${e}px | Sum of All Calculated Cols: ${l}px`), e === l ? n.log("✅ [AutoFit Success] 완벽하게 일치합니다!") : n.log(`⚠️ [AutoFit Mismatch Warning!] 오차 발생: ${e - l}px 차이가 납니다.`), r.forEach(({ globalColIndex: e, width: t }) => {
-						n.log(`[AutoFit Apply] Col Index ${e} -> ${t}px`), this.#a?.setColumnWidth(e, t, "body");
+					t.forEach(({ globalColIndex: e, width: t }) => {
+						this.#a?.setColumnWidth(e, t, "body");
 					});
 				}
 			} else this.removeAttribute("auto-fit-col");
@@ -2692,7 +2669,7 @@ var k = class {
 		}), this.#n.initialize(), this.isAutoFitCol ? this.autoFit(!0) : this.querySelector("nine-table-hscrollbar").refresh(), this.#u.initialize(), this.loaded = !0;
 	};
 	#_ = () => {
-		this.isAutoFitCol, [
+		[
 			"left",
 			"right",
 			"body"
@@ -2706,8 +2683,7 @@ var k = class {
 				let t = parseInt(e.getAttribute("width"), 10);
 				isNaN(t) || (r += t);
 			}), t.forEach((t) => {
-				let n = t.querySelectorAll("table");
-				e === "body" ? (t.style.flex = "1", n.forEach((e) => {})) : (t.style.flex = `0 0 ${r}px`, t.style.width = `${r}px`, t.style.minWidth = `${r}px`, t.style.maxWidth = `${r}px`, n.forEach((e) => {}));
+				t.querySelectorAll("table"), e === "body" ? t.style.flex = "1" : (t.style.flex = `0 0 ${r}px`, t.style.width = `${r}px`, t.style.minWidth = `${r}px`, t.style.maxWidth = `${r}px`);
 			});
 		});
 	};
@@ -2742,8 +2718,8 @@ var k = class {
 	getRowHeight = () => this.#n.getRowHeight();
 	getViewHeight = () => (this.#p.content.offsetHeight || 0) - ((this.#p.body.thead?.offsetHeight || 0) + (this.#p.body.tfoot?.offsetHeight || 0) + (this.#p.body.tbody.head.offsetHeight || 0));
 	isLastRow = () => {
-		let e = this.querySelector(".ng-sheet-body"), t = this.querySelector(".ng-container-body tbody.body"), r = this.#p.body.tfoot?.offsetHeight || 0, i = e.getBoundingClientRect().bottom, a = t.getBoundingClientRect().bottom;
-		return n.log(i, a, r), i - r >= a;
+		let e = this.querySelector(".ng-sheet-body"), t = this.querySelector(".ng-container-body tbody.body"), n = this.#p.body.tfoot?.offsetHeight || 0, r = e.getBoundingClientRect().bottom, i = t.getBoundingClientRect().bottom;
+		return r - n >= i;
 	};
 	scrollToX = (e) => {
 		let t = this.querySelector(".ng-sheet-body .ng-container-body");
@@ -2759,33 +2735,30 @@ var k = class {
 		});
 	};
 	#x = () => {
-		this.innerHTML = "\n            <div class=\"ng-sheet-body\">\n                <div class=\"ng-sheet-body-content\">\n                    <div class=\"ng-container-left\"></div>\n                    <div class=\"ng-container-body\"></div>\n                    <div class=\"ng-container-right\"></div>\n                </div>\n                <div class=\"ng-virtual-height-holder\"></div>\n            </div>\n\n            <div class=\"nodata-overlay\">Data Not Found</div>\n\n            <!-- [Grid Row 1, Col 2] 세로 스크롤바 -->\n            <nine-table-vscrollbar></nine-table-vscrollbar>\n\n            <!-- [Grid Row 2, Col 1] 가로 스크롤바 -->\n            <nine-table-hscrollbar></nine-table-hscrollbar>\n\n            <!-- [Grid Row 2, Col 2] 우하단 엣지 -->\n            <div class=\"scroll-edge\"></div>\n            \n            <!-- 리사이저 및 드래그 패널들 -->\n            <nine-table-col-resizer-panel></nine-table-col-resizer-panel>\n            <!--\n            <div class=\"ng-col-resizer-panel\">\n                <div class=\"resizer-overlay\">\n                    <span class=\"size-badge\">0px</span>\n                </div>\n            </div> ->\n            \n            <div class=\"ng-col-mover-grip\"></div>\n            <div class=\"ng-col-mover-indi\"></div>\n        ", this.#p = {
+		this.innerHTML = "\n            <div class=\"ng-sheet-body\">\n                <div class=\"ng-sheet-body-content\">\n                    <div class=\"ng-container-left\"></div>\n                    <div class=\"ng-container-body\"></div>\n                    <div class=\"ng-container-right\"></div>\n                </div>\n                <div class=\"ng-virtual-height-holder\"></div>\n            </div>\n\n            <div class=\"nodata-overlay\">Data Not Found</div>\n\n            <nine-table-vscrollbar></nine-table-vscrollbar>\n            <nine-table-hscrollbar></nine-table-hscrollbar>\n            <div class=\"scroll-edge\"></div>\n            \n            <nine-table-col-resizer-panel></nine-table-col-resizer-panel>\n            \n            <div class=\"ng-col-mover-grip\"></div>\n            <div class=\"ng-col-mover-indi\"></div>\n        ", this.#p = {
 			mainBody: this.querySelector(".ng-sheet-body .ng-container-body"),
 			hscrollbar: this.querySelector("nine-table-hscrollbar"),
 			vscrollbar: this.querySelector("nine-table-vscrollbar"),
 			content: this.querySelector(".ng-sheet-body .ng-sheet-body-content"),
 			scrollHolder: this.querySelector(".ng-sheet-body .ng-virtual-height-holder")
-		}, n.log("444*****************");
+		};
 	};
 	#S = () => {
-		n.log("**********************", "#syncHeaderAndFooterHeights");
-		let e = this.querySelector(".ng-container-left table"), t = this.querySelector(".ng-container-body table"), r = this.querySelector(".ng-container-right table"), i = Array.from(e.querySelectorAll("thead tr:not(.col-indicator-rowgroup)")), a = Array.from(t.querySelectorAll("thead tr:not(.col-indicator-rowgroup)")), o = Array.from(r.querySelectorAll("thead tr:not(.col-indicator-rowgroup)"));
-		this.#C(i, a, o);
-		let s = Array.from(e.querySelectorAll("tfoot tr")), c = Array.from(t.querySelectorAll("tfoot tr")), l = Array.from(r.querySelectorAll("tfoot tr"));
-		this.#C(s, c, l);
+		let e = this.querySelector(".ng-container-left table"), t = this.querySelector(".ng-container-body table"), n = this.querySelector(".ng-container-right table"), r = Array.from(e.querySelectorAll("thead tr:not(.col-indicator-rowgroup)")), i = Array.from(t.querySelectorAll("thead tr:not(.col-indicator-rowgroup)")), a = Array.from(n.querySelectorAll("thead tr:not(.col-indicator-rowgroup)"));
+		this.#C(r, i, a);
+		let o = Array.from(e.querySelectorAll("tfoot tr")), s = Array.from(t.querySelectorAll("tfoot tr")), c = Array.from(n.querySelectorAll("tfoot tr"));
+		this.#C(o, s, c);
 	};
-	#C = (e, t, r) => {
+	#C = (e, t, n) => {
 		setTimeout(() => {
-			let i = Math.max(e.length, t.length, r.length);
-			n.log(this.#t);
-			for (let a = 0; a < i; a++) {
-				n.log(i);
-				let o = [
-					e[a]?.getBoundingClientRect().height || 0,
-					t[a]?.getBoundingClientRect().height || 0,
-					r[a]?.getBoundingClientRect().height || 0
-				], s = Math.max(...o);
-				n.log(o, s), s > 0 && (e[a] && (e[a].style.height = `${s}px`), t[a] && (t[a].style.height = `${s}px`), r[a] && (r[a].style.height = `${s}px`));
+			let r = Math.max(e.length, t.length, n.length);
+			for (let i = 0; i < r; i++) {
+				let r = [
+					e[i]?.getBoundingClientRect().height || 0,
+					t[i]?.getBoundingClientRect().height || 0,
+					n[i]?.getBoundingClientRect().height || 0
+				], a = Math.max(...r);
+				a > 0 && (e[i] && (e[i].style.height = `${a}px`), t[i] && (t[i].style.height = `${a}px`), n[i] && (n[i].style.height = `${a}px`));
 			}
 		});
 	};
@@ -2835,15 +2808,13 @@ var N = class {
 		this.#e.style.height = `${c}px`;
 	};
 	#r = () => {
-		let e = Array.from(this.#e.children).filter((e) => e.tagName.toUpperCase() === "TABLE"), t = this.#e.getAttribute("auto-height") === "true", r = e.length, i = e.map((e, t) => {
-			let n = t === 0 ? "active" : "", i = e.id || `sheet${t + 1}`;
-			return `<nine-table-sheet class="${n}" data-index="${t}" data-sheet-id="${i}" id="${i}"></nine-table-sheet>` + (t < r - 1 ? `<nine-splitter class="h" data-split-index="${t}"></nine-splitter>` : "");
-		}).join("");
-		n.log("Welcome nine-table", "0.0.3");
-		let a = ["@import \"https://cdn.jsdelivr.net/npm/@ninebone/datagrid@0.0.3/dist/css/nine-table.css\";"];
-		nine["nine-table"] && nine["nine-table"].cssFile && a.push(`@import "${nine["nine-table"].cssFile}";`), this.#e.shadowRoot.innerHTML = `
+		let e = Array.from(this.#e.children).filter((e) => e.tagName.toUpperCase() === "TABLE"), t = this.#e.getAttribute("auto-height") === "true", n = e.length, r = e.map((e, t) => {
+			let r = t === 0 ? "active" : "", i = e.id || `sheet${t + 1}`;
+			return `<nine-table-sheet class="${r}" data-index="${t}" data-sheet-id="${i}" id="${i}"></nine-table-sheet>` + (t < n - 1 ? `<nine-splitter class="h" data-split-index="${t}"></nine-splitter>` : "");
+		}).join(""), i = ["@import \"https://cdn.jsdelivr.net/npm/@ninebone/datagrid@0.0.4/dist/css/nine-table.css\";"];
+		nine["nine-table"] && nine["nine-table"].cssFile && i.push(`@import "${nine["nine-table"].cssFile}";`), this.#e.shadowRoot.innerHTML = `
             <style>
-                ${a.join("\n")}
+                ${i.join("\n")}
             </style>
             
             <nine-table-toolbar></nine-table-toolbar>
@@ -2853,7 +2824,7 @@ var N = class {
                 <div class="ng-loading-bar"></div>
                 <nine-table-sheets>
                     <nine-table-sheets-body>
-                        ${i}
+                        ${r}
                     </nine-table-sheets-body>
                     <nine-table-sheets-footer></nine-table-sheets-footer>
                 </nine-table-sheets>
@@ -2886,10 +2857,11 @@ var N = class {
 		if (e == null) return "";
 		try {
 			let r = String(e).trim(), i = this.rewriteExpr(r);
-			if (i.includes("data.") || i.includes("rowItem.v") || i.includes("host.") || i.includes("(")) {
+			if (i.includes("provider.") || i.includes("host.") || i.includes("data.") || i.includes("rowItem.v") || i.includes("(")) {
 				let e = this.#n.get(i);
 				return e || (e = Function("rowItem", "row", "host", `
                         const data = rowItem;
+                        const provider = host;
 
                         if (!data && !host) return "";
                         return ${i};
@@ -2906,16 +2878,14 @@ var N = class {
 	#n;
 	#r = 0;
 	constructor() {
-		super(), this.#e = this.attachShadow({ mode: "open" }), this.#t = new o(this);
+		super(), ["NINE-TABLE"].includes(this.tagName) && n.log("Welcome nine-table", "0.0.4"), this.#e = this.attachShadow({ mode: "open" }), this.#t = new o(this);
 	}
 	connectedCallback() {
 		setTimeout(() => {
 			this.#r = this.querySelectorAll("table")?.length, this.fields = new s(this), this.exprEngine = new P(this), this.#a(), this.#n = new N(this), this.#i();
 		});
 	}
-	disconnectedCallback() {
-		n.log("NineTable disconnected.");
-	}
+	disconnectedCallback() {}
 	#i = () => {
 		let e = 0, t = setInterval(() => {
 			e++;
@@ -2943,6 +2913,13 @@ var N = class {
 	get row() {
 		return this.#t.row;
 	}
+	addProvider(e) {
+		e && typeof e == "object" && setTimeout(() => {
+			Object.entries(e).forEach(([e, t]) => {
+				typeof t == "function" && (this[e] = t);
+			}), this.rerenderer();
+		});
+	}
 	setData(e) {
 		this.#t.data.set(e), this.refresh();
 	}
@@ -3611,7 +3588,7 @@ customElements.get("cell-checkbox") || customElements.define("cell-checkbox", W)
 // src/cell/cell-radio.js
 var G = class extends z {
 	#e;
-	#t;
+	#t = [];
 	#n = [];
 	constructor() {
 		super();
@@ -3631,7 +3608,7 @@ var G = class extends z {
 		});
 	};
 	#i = () => {
-		n.log("rendererRadio");
+		if (!this.host) return;
 		let e = this.cell.getAttribute("data-source");
 		if (e && (this.#n = super.getExprValue(e, this.tr.data, this.tr.dataset.row), this.#e.replaceChildren(), this.#n && Array.isArray(this.#n))) {
 			let e = document.createDocumentFragment();
@@ -3898,7 +3875,7 @@ var X = class extends R {
 		super();
 	}
 	connectedCallback() {
-		this.#r(), super.connectedCallback(), this.cell && (this.cell.removeAttribute("tabindex"), this.cell.dataset.bind = "rowState", this.cell.dataset.expr, this.cell.setAttribute("text-align", "right")), this.#e = this.querySelector(".ng-row-main"), this.#t = this.querySelector(".ng-row-sub"), this.#n = this.querySelector(".ng-row-status");
+		this.#r(), super.connectedCallback(), this.cell && (this.cell.removeAttribute("tabindex"), this.cell.dataset.bind = "rowState"), this.#e = this.querySelector(".ng-row-main"), this.#t = this.querySelector(".ng-row-sub"), this.#n = this.querySelector(".ng-row-status");
 	}
 	#r = () => {
 		this.innerHTML = "\n			<span class=\"ng-row-main\"></span>\n            <span class=\"ng-row-sub\"></span>\n            <span class=\"ng-row-status\"></span>\n        ";
@@ -3908,14 +3885,14 @@ var X = class extends R {
 		let e = this.row;
 		if (isNaN(e)) return;
 		let t = this.tr.data;
-		t && t.__ng && t.__ng.rowState;
+		t && t.__ng;
 		let n = this.index + 1, r = n.toLocaleString();
 		if (n >= 1e4) {
 			let e = r.length - 4, t = r.substring(0, e + 1), n = r.substring(e + 1);
 			this.#e.innerHTML = `
-             <span class="ng-row-prefix">${t}</span>
-             <span class="ng-row-suffix">${n}</span>
-          `;
+            	<span class="ng-row-prefix">${t}</span>
+            	<span class="ng-row-suffix">${n}</span>
+        	`;
 		} else this.#e.innerHTML = `${r}`;
 		let i = !!this.sheet.querySelector("thead .asc,thead .desc"), a = !!this.sheet.querySelector("thead nine-table-filter-button.filtered");
 		this.#t.innerHTML = e, this.#t.style.display = i || a ? "" : "none";