@ninebone/datagrid 0.1.3 → 0.2.1

package/dist/nine-table.js

@@ -103,6 +103,7 @@ var n = new class extends e.constructor {
 		this.#e = e, this.#t = t, this.#a();
 	}
 	#i = () => (this.#t.rawRecords || []).filter((e) => e.m._[r.META.INDEX.ROW_STATE] !== r.ROW_STATE.DELETE);
+	getRawRecords = () => this.#t.rawRecords || [];
 	get count() {
 		return this.length;
 	}
@@ -636,115 +637,19 @@ var f = class extends HTMLElement {
 	};
 };
 customElements.get("nine-table-hscrollbar") || customElements.define("nine-table-hscrollbar", f);
-// src/layout/nine-table-vscrollbar.js
-var p = class extends HTMLElement {
-	#e;
-	#t;
-	#n = !1;
-	#r;
-	#i = 0;
-	#a = 0;
-	constructor() {
-		super();
-	}
-	connectedCallback() {
-		this.#e = this.getRootNode().host, this.#t = this.closest("nine-table-sheet"), this.innerHTML = "\n            <button class='scroll-top' disabled><div class='scroll-icon'></div></button>\n            <div class='scroll-track'><div class='scroll-thumb'></div></div>\n            <button class='scroll-bottom' disabled><div class='scroll-icon'></div></button>\n        ";
-		let e = () => {
-			let t = this.#t.querySelector(".ng-sheet-body");
-			t ? (this.#r = {
-				container: t,
-				track: this.querySelector(".scroll-track"),
-				thumb: this.querySelector(".scroll-thumb"),
-				top: this.querySelector(".scroll-top"),
-				bottom: this.querySelector(".scroll-bottom")
-			}, this.#s(), this.refresh()) : setTimeout(e, 10);
-		};
-		e();
-	}
-	#o = () => {
-		let e = this.#t.view.getArray(), t = e ? e.length : 0, n = this.#t.elements?.scrollHolder, r = n && parseFloat(n.style.height) || 0;
-		(!r || r <= 0) && (r = this.#t.sourceTable?.querySelector("tbody tr[grouping='true']") && this.#t.rowManager ? body.scrollHeight > body.clientHeight ? body.scrollHeight : t * 30 : t * (this.#t.getRowHeight() || 1));
-		let i = 15e6, a = r > i, o = 1, s = r;
-		return a && (o = i / r, s = i), {
-			rawContentHeight: r,
-			contentHeight: s,
-			scaleFactor: o,
-			useScaling: a,
-			totalCount: t
-		};
-	};
-	refresh = () => {
-		if (this.#n || !this.#t || !this.#t.elements || !this.#r) return;
-		let e = this.#r.container, t = this.#r.track, n = this.#r.thumb, { contentHeight: r } = this.#o(), i = (this.#t.querySelector("thead")?.offsetHeight || 0) + (this.#t.querySelector("tfoot")?.offsetHeight || 0) + (this.#t.querySelector("tbody.head")?.offsetHeight || 0), a = this.#t.querySelector(".ng-sheet-body").offsetHeight || 0, o = a - i, s = this.#t.view.getArray().length, c = this.#t.getRowHeight() * s, l = c > o;
-		if (this.#t.classList.toggle("vscroll-visible", l), !l) return;
-		let u = t.clientHeight;
-		if (u <= 0) return;
-		let d = Math.max(Math.min(a / c * u, u), 20);
-		n.style.height = `${d}px`;
-		let f = e.scrollTop, p = Math.max(r - this.#t.rowManager.getRowHeight(), 1), m = 0;
-		p > 0 && (m = f / p * (u - d));
-		let h = u - d;
-		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 = () => {
-		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) => {
-				if (!this.#n || t <= 0) return;
-				let n = e.clientY - this.#i, r = this.#a + n;
-				r < 0 && (r = 0), r > t && (r = t), this.#r.thumb.style.top = `${r}px`;
-				let i = r / t, a = this.#t.getRowHeight(), o = (this.#t.querySelector(".ng-sheet-body").offsetHeight || 0) - (this.#t.elements.body.thead?.offsetHeight || 0) - (this.#t.elements.body.tfoot?.offsetHeight || 0) - (this.#t.elements.body.tbody.head.offsetHeight || 0), s = Math.floor(o / a), { totalCount: c } = this.#o(), l = Math.floor(i * (c - s + 1));
-				this.#t.rowManager.scrollToDataRow(l);
-				let { rawContentHeight: u, contentHeight: d } = this.#o(), f = this.#r.container.scrollTop, p = Math.max(d - this.#t.rowManager.getRowHeight(), 0);
-				this.#r.top.disabled = f <= 0, this.#r.bottom.disabled = f >= p - 1;
-			}, r = () => {
-				this.#n = !1, document.removeEventListener("mousemove", n), document.removeEventListener("mouseup", r);
-			};
-			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(), 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 n = () => {
-				let e = this.#t.querySelector("tbody.body tr");
-				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();
-				});
-			};
-			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", n), this.#r.top.addEventListener("mouseleave", n), this.#r.bottom.addEventListener("mouseleave", n);
-	};
-};
-customElements.get("nine-table-vscrollbar") || customElements.define("nine-table-vscrollbar", p);
 // src/data/Grouping.js
-var m = {
+var p = {
 	ID: 0,
 	DEPTH: 1,
 	NAME: 2,
 	CHILDREN: 3
-}, h = class {
+}, m = class {
 	#e;
 	#t;
 	#n = [];
 	#r = /* @__PURE__ */ new Map();
-	#i = !1;
+	#i = /* @__PURE__ */ new Map();
+	#a = !1;
 	constructor(e) {
 		this.#e = e, this.#t = this.#e.getRootNode().host;
 	}
@@ -754,6 +659,19 @@ var m = {
 	get groupMap() {
 		return this.#r;
 	}
+	setGroupMap(e) {
+		this.#r = e;
+	}
+	toggleGroup(e) {
+		let t = this.#i.get(e) || !1;
+		this.#i.set(e, !t), this.#e.invalidate();
+	}
+	isCollapsed(e) {
+		return this.#i.get(e) || !1;
+	}
+	get collapsedMap() {
+		return this.#i;
+	}
 	initialize = () => {
 		let e = [], t = this.#e.sourceTable;
 		t && t.querySelectorAll("tbody tr[grouping=\"true\"]").forEach((t) => {
@@ -762,19 +680,10 @@ var m = {
 		}), this.#n = e;
 	};
 	apply() {
-		if (this.#i) return;
-		this.#i = !0;
-		let e = [], t = this.#e.sourceTable;
-		t && t.querySelectorAll("tbody tr[grouping=\"true\"]").forEach((t) => {
-			let n = t.querySelector("[cell-type=\"tree\"]");
-			n && n.dataset.bind && e.push(n.dataset.bind);
-		}), this.#n = e, this.#i = !1, this.#e.scrollToY(0), this.#e.view.refresh();
+		this.#a || (this.#a = !0, this.initialize(), this.#a = !1, this.#e.scrollToY(0), this.#e.view.refresh());
 	}
 	clear() {
-		this.#n = [], this.#r.clear(), this.#i = !1, this.#e.scrollToY(0), this.#e.view.refresh();
-	}
-	setGroupMap(e) {
-		this.#r = e;
+		this.#n = [], this.#r.clear(), this.#i.clear(), this.#a = !1, this.#e.scrollToY(0), this.#e.view.refresh();
 	}
 	getChildrenRowIds(e) {
 		return this.#r.get(e) || [];
@@ -783,37 +692,38 @@ var m = {
 		let t = this.getChildrenRowIds(e), n = this.#t.data;
 		return t.map((e) => n.getArray(e)).filter(Boolean);
 	}
-}, g = class e {
-	static apply(t, n = [], r = []) {
+}, h = class e {
+	static apply(t, n = [], r = [], i = /* @__PURE__ */ new Map()) {
 		if (!n || n.length === 0) return {
 			headers: [],
 			renderItems: [],
 			groupMap: /* @__PURE__ */ new Map()
 		};
-		let i = t.filter((e) => !e.__ng?.deleted), a = /* @__PURE__ */ new Map(), o = e.#t(i, n, r), s = [], c = [];
-		return e.#e(o, 0, n, s, c, a, ""), {
-			headers: s,
-			renderItems: c,
-			groupMap: a
+		let a = t.filter((e) => !e.__ng?.deleted), o = /* @__PURE__ */ new Map(), s = e.#t(a, n, r), c = [], l = [];
+		return e.#e(s, 0, n, c, l, o, "", i), {
+			headers: c,
+			renderItems: l,
+			groupMap: o
 		};
 	}
-	static #e(t, n, r, i, a, o, s) {
-		let c = 0, l = n === r.length - 1;
-		for (let [u, d] of t.entries()) {
-			let t = s ? `${s}_${c++}` : `g_${c++}`, f = e.#n(d);
-			o.set(t, f);
-			let p = [];
-			p[m.ID] = t, p[m.DEPTH] = n, p[m.NAME] = u, p[m.CHILDREN] = f, p.__isGroupHeader = !0, p.__groupId = t, i.push(p), a.push({
+	static #e(t, n, r, i, a, o, s, c) {
+		let l = 0, u = n === r.length - 1;
+		for (let [d, f] of t.entries()) {
+			let t = s ? `${s}_${l++}` : `g_${l++}`, m = c.get(t) || !1, h = e.#n(f);
+			o.set(t, h);
+			let g = [];
+			g[p.ID] = t, g[p.DEPTH] = n, g[p.NAME] = d, g[p.CHILDREN] = h, g.__isGroupHeader = !0, g.__groupId = t, g.__collapsed = m, i.push(g), a.push({
 				type: "group",
-				record: p,
-				groupId: t
-			}), !l && d instanceof Map ? e.#e(d, n + 1, r, i, a, o, t) : e.#r(d).forEach((e) => {
+				record: g,
+				groupId: t,
+				collapsed: m
+			}), m || (!u && f instanceof Map ? e.#e(f, n + 1, r, i, a, o, t, c) : e.#r(f).forEach((e) => {
 				e.__isGroupHeader = !1, e.__groupId = t, i.push(e), a.push({
 					type: "data",
 					record: e,
 					groupId: t
 				});
-			});
+			}));
 		}
 	}
 	static #t(t, n, r) {
@@ -840,19 +750,148 @@ var m = {
 		else Array.isArray(t) && (n = n.concat(t));
 		return n;
 	}
-}, _ = class {
+}, g = class extends HTMLElement {
+	#e;
+	#t;
+	#n = !1;
+	#r;
+	#i = 0;
+	#a = 0;
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		this.#e = this.getRootNode().host, this.#t = this.closest("nine-table-sheet"), this.innerHTML = "\n            <button class='scroll-top' disabled><div class='scroll-icon'></div></button>\n            <div class='scroll-track'><div class='scroll-thumb'></div></div>\n            <button class='scroll-bottom' disabled><div class='scroll-icon'></div></button>\n        ";
+		let e = () => {
+			let t = this.#t.querySelector(".ng-sheet-body");
+			t ? (this.#r = {
+				container: t,
+				track: this.querySelector(".scroll-track"),
+				thumb: this.querySelector(".scroll-thumb"),
+				top: this.querySelector(".scroll-top"),
+				bottom: this.querySelector(".scroll-bottom")
+			}, this.#u(), this.refresh()) : setTimeout(e, 10);
+		};
+		e();
+	}
+	#o = () => {
+		let e = this.#t.view.getArray(), t = e ? e.length : 0, n = this.#t.elements.scrollHolder, r = n && parseFloat(n.style.height) || 0;
+		if (this.#t.sourceTable?.querySelector("tbody tr[grouping='true']")) {
+			let t = (e) => {
+				if (e.type === "group") {
+					let t = e.record[p.DEPTH];
+					return this.#t.template.heights[t];
+				}
+				{
+					let e = this.#t.template.height - this.#t.template.group.height;
+					return e > 0 ? e : this.#t.template.height;
+				}
+			}, n = 0;
+			for (let r = 0; r < e.length; r++) n += t(e[r]);
+			r = n;
+		} else r = t * this.#t.template.height;
+		let i = 15e6, a = r > i, o = 1, s = r;
+		return a && (o = i / r, s = i), {
+			contentHeight: s,
+			scaleFactor: o,
+			useScaling: a,
+			totalCount: t
+		};
+	};
+	refresh = () => {
+		if (this.#n || !this.#t || !this.#t.elements || !this.#r) return;
+		let e = this.#r.container, t = this.#r.track, n = this.#r.thumb, { contentHeight: r } = this.#o(), i = (this.#t.querySelector("thead")?.offsetHeight || 0) + (this.#t.querySelector("tfoot")?.offsetHeight || 0) + (this.#t.querySelector("tbody.head")?.offsetHeight || 0), a = (this.#t.querySelector(".ng-sheet-body").offsetHeight || 0) - i, o = r, s = o > a;
+		if (this.#t.classList.toggle("vscroll-visible", s), !s) return;
+		let c = t.clientHeight;
+		if (c <= 0) return;
+		let l = Math.max(Math.min(a / o * c, c), 20);
+		n.style.height = `${l}px`;
+		let u = e.scrollTop, d = Math.max(o - a, 1), f = 0;
+		d > 0 && (f = u / d * (c - l));
+		let p = c - l;
+		f < 0 && (f = 0), f > p && (f = p), n.style.top = `${f}px`, this.#r.top.disabled = u <= 0, this.#r.bottom.disabled = u >= d - 1;
+	};
+	#s = () => {
+		this.#n = !1;
+	};
+	#c = (e) => {
+		e.button === 0 && (e.stopPropagation(), e.preventDefault(), this.#n = !0, this.#i = e.clientY, this.#a = parseFloat(this.#r.thumb.style.top) || 0);
+	};
+	#l = (e) => {
+		if (!this.#n) return;
+		let t = this.#r.track.getBoundingClientRect().height - this.#r.thumb.clientHeight;
+		if (t <= 0) return;
+		let n = e.clientY - this.#i, r = this.#a + n;
+		r < 0 && (r = 0), r > t && (r = t), this.#r.thumb.style.top = `${r}px`;
+		let i = t > 0 ? r / t : 0, a = this.#r.container, o = (this.#t.elements.body?.thead?.offsetHeight || 0) + (this.#t.elements.body?.tfoot?.offsetHeight || 0) + (this.#t.elements.body?.tbody.head.offsetHeight || 0), s = a.clientHeight - o, { contentHeight: c } = this.#o(), l = Math.max(c - s, 0);
+		a.scrollTop = i * l;
+		let u = a.scrollTop;
+		this.#r.top.disabled = u <= 0, this.#r.bottom.disabled = u >= l - 1;
+	};
+	#u = () => {
+		document.addEventListener("mouseup", this.#s), document.addEventListener("mousemove", this.#l), this.#r.thumb.addEventListener("mousedown", this.#c), this.#r.track.addEventListener("mousedown", (e) => {
+			if (e.button !== 0 || e.target === this.#r.thumb) return;
+			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)), o = this.#r.container, s = (this.#t.elements.body?.thead?.offsetHeight || 0) + (this.#t.elements.body?.tfoot?.offsetHeight || 0) + (this.#t.elements.body?.tbody.head.offsetHeight || 0), c = o.clientHeight - s, { contentHeight: l } = this.#o();
+				o.scrollTop = a * Math.max(l - c, 0), this.#t.rowManager?.refresh(!0);
+			}
+			this.refresh();
+		});
+		let e = null, t = (t) => {
+			if (e) return;
+			let n = this.#t.view.getArray(), r = (this.#t.querySelector("thead")?.offsetHeight || 0) + (this.#t.querySelector("tfoot")?.offsetHeight || 0) + (this.#t.querySelector("tbody.head")?.offsetHeight || 0), i = 400, a = () => {
+				let o = this.#r.container, s = o.scrollTop, c = o.getBoundingClientRect().top + r, l = Array.from(this.#t.querySelectorAll(".ng-container-body tbody.body tr"));
+				if (l.length === 0) return;
+				let u = l.find((e) => e.style.display !== "none");
+				if (!u) return;
+				let d = parseInt(u.dataset.index, 10), f = l.filter((e) => e.style.display !== "none" && e.dataset.index === u.dataset.index).map((e) => e.getBoundingClientRect()), p = Math.min(...f.map((e) => e.top)), m = u.getAttribute("grouping") === "true", h = s, g = 0;
+				if (t === "down") {
+					if (m) {
+						let e = Math.max(...f.map((e) => e.bottom)) - p;
+						g = c > p ? e - (c - p) : e;
+					} else g = c > p ? this.#t.template.height - this.#t.template.group.height - (c - p) : this.#t.template.height - this.#t.template.group.height;
+					h = s + g;
+				} else {
+					if (p >= c) {
+						if (d > 0) {
+							if (n[d - 1].type === "group") {
+								let e = n[d - 1].groupId.split("_").length - 2;
+								g = this.#t.template.group.heights[e];
+							} else g = this.#t.template.height - this.#t.template.group.height;
+						}
+					} else g = c - p;
+					h = Math.max(0, s - g);
+				}
+				o.scrollTop = h, this.#t.rowManager?.refresh(!0), this.refresh(), i = Math.max(1, Math.floor(i * .7)), e = setTimeout(a, i);
+			};
+			a();
+		}, n = () => {
+			e &&= (clearTimeout(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", n), this.#r.top.addEventListener("mouseleave", n), this.#r.bottom.addEventListener("mouseleave", n);
+	};
+};
+customElements.get("nine-table-vscrollbar") || customElements.define("nine-table-vscrollbar", g);
+// src/layout/core/RowManager.js
+var _ = class {
 	#e = 3;
 	#t;
 	#n;
 	#r;
-	#i = /* @__PURE__ */ new Map();
-	#a = null;
-	#o = 0;
-	#s;
-	#c = !1;
+	#i;
+	#a = /* @__PURE__ */ new Map();
+	#o = null;
+	#s = 0;
+	#c;
 	#l = !1;
+	#u = !1;
 	constructor(e) {
-		this.#t = e.getRootNode().host, this.#n = e, this.#y();
+		this.#t = e.getRootNode().host, this.#n = e, this.#b();
 	}
 	getRowHeight() {
 		return this.#n.template.height;
@@ -860,15 +899,15 @@ var m = {
 	refresh = (e = !1) => {
 		if (!this.#n.classList.contains("active")) return;
 		let t = this.#n.querySelector(".ng-sheet-body");
-		t && ((!this.#n.template.height || this.#n.template.height <= 0) && (this.#m(), this.#n.template.height && this.#n.template.height > 0 && this.#g()), this.#u(t.scrollTop, e), this.#n.querySelector("nine-table-vscrollbar")?.refresh());
+		t && ((!this.#n.template.height || this.#n.template.height <= 0) && (this.#h(), this.#n.template.height && this.#n.template.height > 0 && this.#_()), this.#i = this.#t.data.getArray(), this.#d(t.scrollTop, e), this.#n.querySelector("nine-table-vscrollbar")?.refresh());
 	};
-	#u = (e, t = !1) => {
-		if (this.#l) {
-			this.#d(e, t);
-			return;
-		}
+	#d = (e, t = !1) => {
 		let n = this.#n.template.height;
 		if (!n || n <= 0) return;
+		if (this.#u) {
+			this.#f(e, t);
+			return;
+		}
 		let i = this.#n.view.getArray(), a = i.length;
 		if (a === 0) {
 			this.#n.elements.scrollHolder.style.height = "0px";
@@ -884,7 +923,7 @@ var m = {
 			this.#n.elements.body.tbody.body,
 			this.#n.elements.right.tbody.body
 		].forEach((e, t) => {
-			e && e.querySelectorAll("tbody.body tr").forEach((e, t) => {
+			e && e.trs.forEach((e, t) => {
 				let n = g + Math.floor(t / this.#n.template.length);
 				if (n >= a) {
 					e.style.display = "none", e.dataset.matrixRow = null, e.dataset.row = null, e.dataset.index = null;
@@ -900,92 +939,89 @@ var m = {
 			});
 		}), this.#n.selection.refresh());
 	};
-	#d = (e, t = !1) => {
-		let n = this.#n.view.getArray() || [], r = n.length;
-		if (r === 0) {
+	#f = (e, t = !1) => {
+		let n = this.#n.view.getArray() || [], i = n.length;
+		if (i === 0) {
 			this.#n.elements.scrollHolder.style.height = "0px";
 			return;
 		}
-		let i = this.#n.querySelector(".ng-sheet-body .ng-sheet-body-content"), a = this.#n.templateLength || 1, o = (e) => {
+		this.#n.querySelector(".ng-sheet-body");
+		let a = this.#n.querySelector(".ng-sheet-body .ng-sheet-body-content"), o = this.#n.template.length, s = (e) => {
 			if (e.type === "group") {
-				let t = e.record[m.DEPTH] || 0;
-				return this.#n.template.height[t] || this.#n.template.height / a;
+				let t = e.record[p.DEPTH];
+				return this.#n.template.heights[t];
 			}
 			{
-				let e = 0, t = this.#n.templateLength || 1, n = 0;
-				for (let e = 0; e < t - 1; e++) n += this.#n.template.heights[e] || 0;
-				return e = this.#n.template.height - n, e > 0 ? e : this.#n.template.height;
+				let e = this.#n.template.height - this.#n.template.group.height;
+				return e > 0 ? e : this.#n.template.height;
 			}
-		}, s = 0, c = Array(r);
-		for (let e = 0; e < r; e++) {
-			let t = o(n[e]);
-			c[e] = t, s += t;
+		}, c = 0, l = Array(i);
+		for (let e = 0; e < i; e++) {
+			let t = s(n[e]);
+			l[e] = t, c += 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;
+		let u = Math.max(c - this.#n.viewport.height + this.#n.viewport.fixedHeight, 0), d = 15e6, f = u > d, m = 1, h = u;
+		f && (m = d / u, h = d), this.#n.elements.scrollHolder.style.height = `${h}px`;
+		let g = f ? e / m : e, _ = Math.min(g, u), v = 0, y = 0;
+		for (let e = 0; e < i; e++) {
+			let t = l[e];
+			if (v + t > _) {
+				y = e;
 				break;
 			}
-			u += n, d = t;
+			v += t, y = e;
 		}
-		let f = e - u;
-		i && i.querySelectorAll("tbody").forEach((e) => {
-			e.style.top = `-${Math.max(0, f)}px`;
+		let b = _ - v;
+		a && a.querySelectorAll("tbody.body").forEach((e) => {
+			e.style.top = `-${Math.max(0, b)}px`;
 		});
-		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.#n.template.height / 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",
-			".ng-container-right"
-		].forEach((e) => {
-			let t = this.#n.querySelector(`.ng-sheet-body ${e}`);
-			if (!t) return;
-			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) => {
+		let x = Math.min(i, y + this.#n.viewport.tr.length), S = n.slice(y, x);
+		if (S.length === 0) return;
+		let C = [];
+		S.find((e) => !(e.type === "group" && C.includes(e.groupId))), [
+			this.#n.elements.left.tbody.body,
+			this.#n.elements.body.tbody.body,
+			this.#n.elements.right.tbody.body
+		].forEach((e, t) => {
+			if (!e) return;
+			let i = y;
+			for (let t = 0; t < e.trs.length; t += o) {
+				let a = Math.floor(t / o), s = S[a], c = e.trs.slice(t, t + o);
+				if (!s || a >= S.length) {
+					c.forEach((e) => {
 						e.style.display = "none", e.dataset.matrixRow = null, e.dataset.row = null, e.dataset.index = null;
 					});
 					continue;
 				}
-				let s = d + t;
-				o.forEach((e, r) => {
-					let a = d + t;
-					e.dataset.virtualIndex = a, e.dataset.row = i.type === "data" ? s : "";
+				let l = y + a;
+				c.forEach((e, t) => {
+					e.dataset.virtualIndex = i, e.dataset.row = s.type === "data" ? l : "";
 					let o = e.getAttribute("grouping") === "true";
-					if (i.type === "group") o && r === i.record[m.DEPTH] ? (e.style.display = "", this.#f(e, n, i.record, a)) : (e.style.display = "none", e.dataset.matrixRow = null, e.dataset.row = null, e.dataset.index = null);
+					if (s.type === "group") o && t === s.record[p.DEPTH] ? (e.style.display = "", this.#m(e, n, s.record, y + 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 = "";
-						let t = i.record.m?.rowid ?? 0;
-						this.#p(e, i.record, t, a);
+						let t = s.record.m._[r.META.INDEX.ROWID];
+						this.#p(e, s.record, t, y + a);
 					}
 				});
 			}
 		}), this.#n.selection.refresh();
 	};
-	#f = (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) : [];
-		e.dataset.virtualIndex = r, e.dataset.row = "", e.dataset.matrixRow = o, e.data = l, e.dataset.groupId = n[m.ID], Array.from(e.cells).forEach((e) => {
-			e.dataset.row = r;
-			let t = Array.from(e.children).find((e) => e.tagName.toLowerCase().startsWith("cell-") || typeof e.refresh == "function");
-			t !== void 0 && typeof t.refresh == "function" && t?.refresh();
-		});
-	};
 	#p = (e, t, n, r) => {
 		let i = this.#n.templateLength || 1, a = parseInt(e.dataset.subrow, 10) || 0, o = r * i + a;
 		e.dataset.index = r, e.dataset.row = n, e.dataset.matrixRow = o, e.data = t, Array.from(e.cells).forEach((e) => {
 			e.dataset.index = r, e.dataset.row = n, Array.from(e.children).find((e) => e.tagName.toLowerCase().startsWith("cell-") && typeof e.refresh == "function")?.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[p.CHILDREN], c = s ? s.map((e) => this.#i[e]).filter(Boolean) : [];
+		e.dataset.virtualIndex = r, e.dataset.index = r, e.dataset.row = "", e.dataset.matrixRow = o, e.data = c, e.dataset.groupId = n[p.ID], Array.from(e.cells).forEach((e) => {
+			e.dataset.index = r, e.dataset.row = r, Array.from(e.children).find((e) => e.tagName.toLowerCase().startsWith("cell-") || typeof e.refresh == "function")?.refresh?.();
+		});
+	};
 	initialize = () => {
-		this.#l = !!this.#n.sourceTable.querySelector("tbody tr[grouping='true']"), this.#i.clear(), this.#r = {
+		this.#u = !!this.#n.sourceTable.querySelector("tbody tr[grouping='true']"), this.#a.clear(), this.#r = {
 			scrollTables: this.#n.querySelectorAll(".ng-sheet-body table"),
 			firstTr: this.#n.querySelector(".ng-sheet-body .ng-container-body tbody.body tr")
 		}, [
@@ -1000,59 +1036,82 @@ var m = {
 			let r = n.querySelector("tbody.body");
 			if (!r) return;
 			let i = Array.from(r.querySelectorAll("tr")).map((e) => e.cloneNode(!0));
-			this.#i.set(e, i);
+			this.#a.set(e, i);
 		});
 		let e = this.#n.querySelector(".ng-sheet-body");
-		e && (this.#o = e.clientHeight, this.#m(), this.#g(), this.#u(e.scrollTop, !0), e.addEventListener("scroll", (t) => {
+		e && (this.#s = e.clientHeight, this.#h(), this.#_(), this.#d(e.scrollTop, !0), e.addEventListener("scroll", (t) => {
 			if (this.#n.querySelectorAll("cell-combo-panel").forEach((e) => {
 				e.classList.remove("active");
-			}), this.#c) return;
+			}), this.#l) return;
 			let n = this.#n.template.height || 0;
-			(this.#n.view.getArray()?.length || 0) * n <= e.clientHeight || (this.#u(e.scrollTop), this.#n.querySelector("nine-table-vscrollbar").refresh());
+			(this.#n.view.getArray()?.length || 0) * n <= e.clientHeight || (this.#d(e.scrollTop), this.#n.querySelector("nine-table-vscrollbar").refresh());
 		}, { passive: !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.#l) {
-			let e = Math.max(r.scrollHeight - r.clientHeight, 1);
-			o = a / Math.max(i - 1, 1) * e;
+		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, s = 15e6;
+		if (this.#u) {
+			let e = this.#n.view.getArray() || [], t = Array.from(this.#n.sourceTable?.querySelectorAll("tbody.body tr") || []), n = t.length || 1, r = 0, i = 0, c = 0;
+			for (let o = 0; o < a; o++) {
+				let s = e[o], l = 0;
+				for (let e = 0; e < n; e++) {
+					let n = t[e];
+					if (!n) continue;
+					let r = n.getAttribute("grouping") === "true", i = !1;
+					if (s.type === "group") {
+						if (r) {
+							let t = s.record[p.DEPTH];
+							e === t && (i = !0);
+						}
+					} else r || (i = !0);
+					if (i) {
+						if (r) {
+							let e = s.record[p.DEPTH];
+							l += this.#n.template.group.heights[e];
+						} else this.#n.template.height - this.#n.template.group.height, l += (this.#n.template.height - this.#n.template.group.height) / (this.#n.template.length - this.#n.template.group.length);
+					}
+				}
+				s.type === "data" && (r === a && (c = i), r++), i += l;
+			}
+			r <= a && (c = i);
+			let l = i > s, u = 1;
+			l && (u = s / i), o = Math.max(0, c * u);
 		} else {
-			let e = this.#n.template.height, 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;
+			let e = this.#n.template.height, 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, c = r.offsetHeight || 0, l = Math.max(i * e - e + n - c - e, 0), u = l > s, d = 1;
+			u && (d = s / l), o = t * d;
 		}
-		this.#c = !0, r.scrollTop = o, this.#u(o), requestAnimationFrame(() => {
+		this.#l = !0, r.scrollTop = o, this.#d(o), requestAnimationFrame(() => {
 			requestAnimationFrame(() => {
-				this.#c = !1, typeof n == "function" && n();
+				this.#l = !1, typeof n == "function" && n();
 			});
 		});
 	}
 	destroy = () => {
-		this.#a &&= (this.#a.disconnect(), null);
-	};
-	#m = () => {
-		this.#h();
+		this.#o &&= (this.#o.disconnect(), null);
 	};
 	#h = () => {
-		if (this.#o > 0 && this.#n.template.height > 0) {
-			let e = Math.ceil(this.#o / this.#n.template.height), t = this.#e;
-			if (this.#l && this.#n.grouping) {
-				let e = this.#n.grouping.columns?.length || 1;
-				t += e * 15;
+		this.#g();
+	};
+	#g = () => {
+		if (this.#n.viewport.innerHeight > 0 && this.#n.template.height > 0) {
+			let e = Math.ceil(this.#n.viewport.innerHeight / (this.#n.template.height - this.#n.template.group.height)), t = this.#e;
+			if (this.#u) {
+				let e = Math.ceil(this.#n.viewport.innerHeight / this.#n.template.group.height) + this.#e;
+				t += this.#n.viewport.group.length * e;
 			}
-			this.#s = e + t;
+			this.#c = e + t;
 		}
 	};
-	#g = () => {
+	#_ = () => {
 		[
 			".ng-container-body",
 			".ng-container-left",
 			".ng-container-right"
 		].forEach((e) => {
 			let t = this.#n.querySelector(`.ng-sheet-body ${e}`);
-			t && t.querySelector("tbody") && this.#_(t);
-		}), this.#v();
+			t && t.querySelector("tbody") && this.#v(t);
+		}), this.#y();
 	};
-	#_ = (e) => {
+	#v = (e) => {
 		let t = null;
 		e.classList.contains("ng-container-left") ? t = "left" : e.classList.contains("ng-container-right") && (t = "right");
 		let n = Array.from(this.#n.sourceTable.querySelectorAll("tbody.body tr")).map((e) => {
@@ -1069,10 +1128,19 @@ var m = {
 		let r = e.querySelector("tbody.body");
 		r.querySelectorAll("tr").forEach((e) => e.remove());
 		let i = document.createDocumentFragment();
-		for (let e = 0; e < this.#s; e++) n.forEach((e) => i.appendChild(e.cloneNode(!0)));
-		r.appendChild(i), e.classList.contains("ng-container-body") && (this.#r.firstTr = r.querySelector("tr"));
+		for (let e = 0; e < this.#c; e++) n.forEach((e) => i.appendChild(e.cloneNode(!0)));
+		r.appendChild(i);
+		let a = document.createDocumentFragment(), o = 0, s = n.filter((e) => e.getAttribute("grouping") === "true").length;
+		n.forEach((e) => {
+			if (e.getAttribute("grouping") === "true") {
+				let t = e.cloneNode(!0);
+				t.style.position = "relative", t.style.zIndex = (s - o) * 10, a.appendChild(t), o++;
+			}
+		});
+		let c = e.querySelector("thead.foot");
+		c && (c.querySelectorAll("tr").forEach((e) => e.remove()), c.appendChild(a)), e.classList.contains("ng-container-body") && (this.#r.firstTr = r.querySelector("tr")), r.trs = Array.from(e.querySelectorAll("tbody.body tr"));
 	};
-	#v = () => {
+	#y = () => {
 		let e = this.#n.querySelector(".ng-sheet-body .ng-container-left table"), t = this.#n.querySelector(".ng-sheet-body .ng-container-body table"), n = this.#n.querySelector(".ng-sheet-body .ng-container-right table");
 		if (t) {
 			let r = e ? Array.from(e.querySelectorAll("tbody tr")) : [], i = Array.from(t.querySelectorAll("tbody tr")), a = n ? Array.from(n.querySelectorAll("tbody tr")) : [], o = Math.max(r.length, i.length, a.length);
@@ -1086,14 +1154,14 @@ var m = {
 			}
 		}
 	};
-	#y = () => {
-		this.#n && this.#n instanceof HTMLElement && (this.#a = new ResizeObserver((e) => {
+	#b = () => {
+		this.#n && this.#n instanceof HTMLElement && (this.#o = new ResizeObserver((e) => {
 			for (let t of e) {
 				if (!t.target.classList.contains("active")) continue;
 				let e = t.contentRect.height;
-				t.contentRect.width > 0 && this.#n.isAutoFitCol && this.#n.autoFit(!0), e > 0 && this.#o !== e && (this.#o = e, this.#h(), this.#n.template.height !== null && (this.#g(), this.refresh()));
+				t.contentRect.width > 0 && this.#n.isAutoFitCol && this.#n.autoFit(!0), e > 0 && this.#s !== e && (this.#s = e, this.#g(), this.#n.template.height !== null && (this.#_(), this.refresh()));
 			}
-		}), this.#a.observe(this.#n));
+		}), this.#o.observe(this.#n));
 	};
 }, v = class e {
 	static compile(t) {
@@ -1136,7 +1204,7 @@ var m = {
 		endCol: -1
 	};
 	constructor(e) {
-		this.#e = e, this.#t = e.getRootNode().host, this.#i();
+		this.#e = e, this.#t = e.getRootNode().host, this.#d();
 	}
 	#r(e) {
 		if (!e) return {
@@ -1150,11 +1218,11 @@ var m = {
 			subRowIndex: -1,
 			matrixRow: -1
 		};
-		let n = e.closest("tbody"), r = Array.from(n.querySelectorAll("tr")).filter((e) => parseInt(e.dataset.index, 10) === t), i = r.indexOf(e), a = r.length > 0 ? r.length : 1;
+		let n = e.closest("tbody");
 		return {
 			dataRow: t,
-			subRowIndex: i,
-			matrixRow: t * a + (i >= 0 ? i : e.sectionRowIndex % a)
+			subRowIndex: Array.from(n.querySelectorAll("tr")).filter((e) => parseInt(e.dataset.index, 10) === t).indexOf(e),
+			matrixRow: parseInt(e.dataset.matrixRow, 10)
 		};
 	}
 	setFocus(e, t) {
@@ -1238,39 +1306,45 @@ var m = {
 			});
 		});
 	};
-	#i() {
+	#i;
+	#a;
+	#o;
+	#s;
+	#c = (e, t) => {
+		let n = this.#e.getRootNode();
+		if (n && typeof n.elementsFromPoint == "function") {
+			let r = n.elementsFromPoint(e, t);
+			for (let e of r) {
+				let t = e.closest("td, th");
+				if (t && this.#e.contains(t) && t.dataset.row !== void 0) return t;
+			}
+		}
+		let r = this.#e.querySelectorAll(".ng-sheet-body-content tbody tr td, .ng-sheet-body-content tbody tr:not(.nodata) th");
+		for (let n of r) {
+			let r = n.getBoundingClientRect();
+			if (e >= r.left && e <= r.right && t >= r.top && t <= r.bottom) return n;
+		}
+		return null;
+	};
+	#l = (e) => {
+		let t = this.#c(e.clientX, e.clientY);
+		if (!t || t.dataset.row === void 0 || t.dataset.col === void 0) return;
+		let n = t.closest("tr"), { matrixRow: r } = this.#r(n), i = parseInt(t.dataset.col, 10);
+		r < 0 || (this.#i !== r || this.#a !== i) && (this.#i = r, this.#a = i, this.setRange(this.#o, this.#s, r, i));
+	};
+	#u = () => {
+		document.removeEventListener("mousemove", this.#l);
+	};
+	#d() {
 		let e = this.#e.querySelector(".ng-sheet-body");
-		e && e.addEventListener("mousedown", (e) => {
+		e && (document.addEventListener("mouseup", this.#u), 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;
 			this.#e.style.userSelect = "none", this.#e.style.webkitUserSelect = "none";
 			let n = t.closest("tr"), { matrixRow: r } = this.#r(n), i = parseInt(t.dataset.col, 10);
-			if (r < 0) {
-				this.#e.style.userSelect = "", this.#e.style.webkitUserSelect = "";
-				return;
-			}
-			this.setFocus(r, i), this.setRange(r, i, r, i);
-			let a = r, o = i, s = (e) => {
-				let t = document.elementFromPoint(e.clientX, e.clientY)?.closest("td, th");
-				if (!t || !this.#e.contains(t)) {
-					let n = this.#e.querySelectorAll(".ng-sheet-body-content tbody tr td, .ng-sheet-body-content tbody tr:not(.nodata) th");
-					for (let r of n) {
-						let n = r.getBoundingClientRect();
-						if (e.clientX >= n.left && e.clientX <= n.right && e.clientY >= n.top && e.clientY <= n.bottom) {
-							t = r;
-							break;
-						}
-					}
-				}
-				if (!t || t.dataset.row === void 0 || t.dataset.col === void 0) return;
-				let n = t.closest("tr"), { matrixRow: s } = this.#r(n), c = parseInt(t.dataset.col, 10);
-				s < 0 || (a !== s || o !== c) && (a = s, o = c, this.setRange(r, i, s, c));
-			}, c = () => {
-				this.#e.style.userSelect = "", this.#e.style.webkitUserSelect = "", document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", c);
-			};
-			document.addEventListener("mousemove", s), document.addEventListener("mouseup", c);
-		});
+			this.#o = r, this.#s = i, r < 0 ? (this.#e.style.userSelect = "", this.#e.style.webkitUserSelect = "") : (this.setFocus(r, i), this.setRange(r, i, r, i), this.#i = r, this.#a = i, document.addEventListener("mousemove", this.#l));
+		}));
 	}
 }, b = class {
 	#e;
@@ -1278,7 +1352,7 @@ var m = {
 	#n = null;
 	#r = null;
 	constructor(e) {
-		this.#e = e, this.#t = e.getRootNode().host, this.#g();
+		this.#e = e, this.#t = e.getRootNode().host, this.#h();
 	}
 	get currentCell() {
 		return this.#n;
@@ -1320,8 +1394,6 @@ var m = {
 			let n = !1;
 			switch (e.code) {
 				case "Enter":
-					e.shiftKey, this.#f(t) && (n = !0);
-					break;
 				case "ArrowDown":
 					this.#f(t) && (n = !0);
 					break;
@@ -1332,32 +1404,26 @@ var m = {
 				return;
 			}
 		}
-		let n = parseInt(this.#r.dataset.index, 10), r = -1;
+		let n = this.#e.querySelector(".ng-sheet-body");
+		if (!n) return;
+		let r = t || this.#n;
+		if (!r) return;
+		let i = n.getBoundingClientRect(), a = r.getBoundingClientRect(), o = n.querySelector("thead")?.offsetHeight || 0, s = 0;
 		switch (e.code) {
 			case "Enter":
-				if (e.shiftKey) {
-					let e = this.#h();
-					r = Math.max(n - e + 0, 0);
-				} else r = Math.min(n, this.#e.view.count());
-				break;
-			case "ArrowDown":
-				r = Math.min(n, this.#e.view.count());
-				break;
-			case "ArrowUp":
-				let t = this.#h();
-				r = Math.max(n - t + 0, 0);
-		}
-		if (r < 0) return;
-		let i = parseInt(this.#r.dataset.matrixRow, 10), a = parseInt(this.#n.dataset.col, 10), o = parseInt(this.#n.rowSpan, 10) || 1;
-		switch (e.code) {
 			case "ArrowDown":
-				i += o;
+				s = a.top - a.height - (i.top + o);
 				break;
-			case "ArrowUp": i--;
+			case "ArrowUp": s = a.bottom + a.height - i.bottom;
 		}
-		this.#e.rowManager.scrollToDataRow(r, null, () => {
-			let e = this.#c(i, a);
-			e && (this.currentCell = e, this.#e.selection.setRange(this.#r.dataset.matrixRow, e.dataset.col, this.#r.dataset.matrixRow, e.dataset.col));
+		let c = parseInt(t ? t.closest("tr")?.dataset.matrixRow : this.#r.dataset.matrixRow, 10), l = parseInt(t ? t.dataset.col : this.#n.dataset.col, 10);
+		s !== 0 && (n.scrollTop += s), setTimeout(() => {
+			let e = this.#c(c, l);
+			if (e) {
+				this.currentCell = e;
+				let t = e.closest("tr");
+				t && this.#e.selection.setRange(t.dataset.matrixRow, e.dataset.col, t.dataset.matrixRow, e.dataset.col);
+			}
 		});
 	};
 	moveCell = (e) => {
@@ -1424,12 +1490,14 @@ var m = {
 		}))), i;
 	};
 	#l = () => {
-		let e = parseInt(this.#n.dataset.col, 10), t = parseInt(this.#r.dataset.matrixRow, 10);
-		return this.#c(t - 1, e);
+		let e = parseInt(this.#n.dataset.col, 10), t = parseInt(this.#r.dataset.matrixRow, 10), n = null;
+		for (let r = 0; r < 100 && (n = this.#c(t - 1 - r, e), !n); r++);
+		return n;
 	};
 	#u = () => {
-		let e = parseInt(this.#n.dataset.col, 10), t = parseInt(this.#r.dataset.matrixRow, 10), n = parseInt(this.#n.rowSpan, 10) || 1;
-		return this.#c(t + n, e);
+		let e = parseInt(this.#n.dataset.col, 10), t = parseInt(this.#r.dataset.matrixRow, 10), n = parseInt(this.#n.rowSpan, 10) || 1, r = null;
+		for (let i = 0; i < 100 && (r = this.#c(t + n + i, e), !r); i++);
+		return r;
 	};
 	#d = (e) => {
 		let t = this.#e.querySelector(".ng-sheet-body");
@@ -1455,11 +1523,7 @@ var m = {
 		let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
 		return n.right <= r.right;
 	};
-	#h = () => {
-		let e = this.#e.querySelector(".ng-sheet-body"), t = e.clientHeight - (e.querySelector("thead")?.offsetHeight || 0), n = this.#e.rowManager.getRowHeight();
-		return Math.max(1, Math.floor(t / n));
-	};
-	#g() {
+	#h() {
 		this.#e.addEventListener("mousedown", (e) => {
 			if (e.button !== 0) return;
 			let t = e.target.closest("td, th");
@@ -1532,10 +1596,10 @@ var m = {
 		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`;
+			e.setAttribute("width", t), e.style.width = e.style.minWidth = e.style.maxWidth = `${t}px`;
 		});
 		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();
+		o && (o.setAttribute("width", t), o.style.width = o.style.minWidth = o.style.maxWidth = `${t}px`), this.refreshLayout(a), (a === "left" || a === "right") && this.refreshLayout("body"), this.#e.rowManager?.refresh();
 	}
 	#p(e) {
 		if (this.#e.isAutoFitCol) return !0;
@@ -2026,7 +2090,7 @@ var w = class {
 		let s = this.querySelector(".search-box");
 		s.value = "", this.classList.add("active"), this.classList.add("loading"), setTimeout(() => {
 			try {
-				this.#c(), this.#r.rowManager.scrollToDataRow(0), s.focus();
+				this.#c(), this.#r.rowManager.scrollToDataRow(0), s.focus({ preventScroll: !0 });
 			} finally {
 				this.classList.remove("loading");
 			}
@@ -2312,7 +2376,7 @@ var k = class {
 		if (e < 0 || e >= n.length) return null;
 		let r = n[e];
 		if (t != null) {
-			let e = this.#t.data.getHostFields().indexOf(t);
+			let e = this.#t.fields.get().indexOf(t);
 			return e >= 0 && r.v ? r.v[e] : null;
 		}
 		return r;
@@ -2351,10 +2415,10 @@ var k = class {
 			let i = e.m?._?.[r.META.INDEX.FILTER];
 			i && i[this.#e.index] === !1 || t.push(n);
 		}), this.#n.length > 0 && (t = this.#o(t, e)), this.#r = t;
-		let n = t.map((t) => e[t]), i = this.#e.grouping?.columns || [];
-		if (i.length > 0) {
-			let e = g.apply(n, i, this.#t.data.getHostFields());
-			this.#i = e.renderItems, this.#e.grouping.setGroupMap(e.groupMap);
+		let n = t.map((t) => e[t]), i = this.#e.grouping, a = i?.columns || [];
+		if (a.length > 0) {
+			let e = i.collapsedMap || /* @__PURE__ */ new Map(), t = h.apply(n, a, this.#t.data.getHostFields(), e);
+			this.#i = t.renderItems, i.setGroupMap(t.groupMap);
 		} else this.#i = n;
 	};
 	setSorting = (e) => {
@@ -2457,13 +2521,16 @@ var k = class {
 			let n = e.getAttribute("width") || parseInt(e.style.width, 10) || r;
 			e.setAttribute("width", n);
 			let i = String(n).includes("px") ? n : `${n}px`;
-			e.style.width = i;
+			e.style.width = e.style.minWidth = e.style.maxWidth = i;
 		});
 	}
 	static #a(e) {
-		if (e.querySelector("thead")) return;
-		let t = document.createElement("thead"), n = e.querySelector("colgroup");
+		let t = e.querySelector("thead:not(.foot)");
+		t ||= document.createElement("thead");
+		let n = e.querySelector("colgroup");
 		n ? n.after(t) : e.prepend(t);
+		let r = e.querySelector("thead.foot");
+		r || (r = document.createElement("thead"), r.classList.add("foot"), t.after(r));
 	}
 	static #o(e) {
 		e.querySelectorAll("thead th, thead td").forEach((e) => {
@@ -2490,8 +2557,8 @@ var k = class {
 				let i = `__ds_${Date.now()}_${++r}`;
 				e && (e[i] = () => n), t.setAttribute("data-source", `host.${i}()`), a.remove();
 			}
-			let o = t.dataset.expr;
-			o && t.setAttribute("data-expr", e.exprEngine.precompile(o)), Array.from(t.attributes).forEach((n) => {
+			let o = t.closest("tr"), s = t.dataset.expr;
+			s && t.setAttribute("data-expr", e.exprEngine.precompile(s, o.getAttribute("grouping") === "true")), Array.from(t.attributes).forEach((n) => {
 				[
 					"data-bind",
 					"data-expr",
@@ -2525,18 +2592,37 @@ var k = class {
 				let i = Math.max(10, Math.floor(16 / r));
 				if (!isNaN(n)) for (let t = 0; t < r; t++) {
 					let r = e.querySelector(`colgroup col[data-col="${n + t}"]`);
-					r && (r.setAttribute("width", i), r.style.width = `${i}px`);
+					r && (r.setAttribute("width", i), r.style.width = r.style.minWidth = r.style.maxWidth`${i}px`);
 				}
 			} else o.classList.remove("collapsed"), o.classList.add("expand"), o.setAttribute("collapsed", "false"), t.style.color = "";
 		});
 	}
 	static #u(e, t) {
-		let n = e.getAttribute("row-indicator") === "true" ? 48 : 4, r = e.querySelector("colgroup"), i = document.createElement("col");
-		i.setAttribute("fixed", "left"), i.setAttribute("width", n), i.style.width = `${n}px`, r.prepend(i), e.querySelectorAll("thead, tbody, tfoot").forEach((e) => {
+		let n = e.getAttribute("row-indicator") === "true" ? 48 : 4, r = e.querySelector("colgroup");
+		if (r && !r.querySelector(".row-indicator-col")) {
+			let e = document.createElement("col");
+			e.className = "row-indicator-col", e.setAttribute("fixed", "left"), e.setAttribute("width", n), e.style.width = e.style.minWidth = e.style.maxWidth = `${n}px`, r.prepend(e);
+		}
+		e.querySelectorAll("thead, tbody, tfoot").forEach((e) => {
 			let t = Array.from(e.querySelectorAll("tr"));
 			if (t.length === 0) return;
-			let n = t[0], r = document.createElement("th");
-			r.className = "row-indicator", r.setAttribute("cell-type", "row-indicator"), t.length > 1 && (r.rowSpan = t.length), n.insertBefore(r, n.firstElementChild);
+			let n = [], r = null;
+			t.forEach((e) => {
+				e.classList.contains("col-indicator-rowgroup") || (e.getAttribute("grouping") === "true" ? (n.push({
+					isGrouping: !0,
+					rows: [e]
+				}), r = null) : !r || r.isGrouping !== !1 ? (r = {
+					isGrouping: !1,
+					rows: [e]
+				}, n.push(r)) : r.rows.push(e));
+			}), n.forEach((e) => {
+				let t = e.rows;
+				if (t.length === 0) return;
+				let n = t[0];
+				if (n.querySelector(":scope > th.row-indicator")) return;
+				let r = document.createElement("th");
+				r.className = "row-indicator", r.setAttribute("cell-type", "row-indicator"), !e.isGrouping && t.length > 1 && (r.rowSpan = t.length), n.insertBefore(r, n.firstElementChild);
+			});
 		});
 	}
 	static #d(e) {
@@ -2548,15 +2634,75 @@ var k = class {
 				let r = n + t, a = e.querySelector(`colgroup col[data-col="${r}"]`);
 				a && (i += parseInt(a.getAttribute("width"), 10) || 100);
 			}
-			i > 0 && `${i}`;
 		});
 	}
 }, M = class {
 	#e;
 	#t;
+	#n;
 	constructor(e) {
 		this.#e = e, this.#t = e.getRootNode().host;
 	}
+	#r = () => {
+		this.#n = {
+			viewport: this.#e.querySelector(".ng-sheet-body"),
+			thead: this.#e.querySelector("thead"),
+			tbody: this.#e.querySelector("tbody.body"),
+			tfoot: this.#e.querySelector("tfoot"),
+			thead_foot: this.#e.querySelector("thead.foot"),
+			tbody_head: this.#e.querySelector("tbody.head"),
+			tbody_foot: this.#e.querySelector("tbody.foot")
+		};
+	};
+	get elem() {
+		return this.#n?.tbody_foot || (this.#n = {
+			viewport: this.#e.querySelector(".ng-sheet-body"),
+			thead: this.#e.querySelector("thead"),
+			tbody: this.#e.querySelector("tbody.body"),
+			tfoot: this.#e.querySelector("tfoot"),
+			thead_foot: this.#e.querySelector("thead.foot"),
+			tbody_head: this.#e.querySelector("tbody.head"),
+			tbody_foot: this.#e.querySelector("tbody.foot")
+		}), this.#n;
+	}
+	get viewport() {
+		let e = this;
+		return {
+			get tr() {
+				return {
+					get length() {
+						return Math.ceil(e.#e.querySelector(".ng-container-body tbody.body tr:last-child").sectionRowIndex / e.#e.template.length);
+					},
+					count() {
+						return this.length;
+					}
+				};
+			},
+			get group() {
+				return {
+					get length() {
+						return e.#e.source.table.querySelectorAll("tbody tr[grouping='true']").length;
+					},
+					count() {
+						return this.length;
+					}
+				};
+			},
+			get fixedHeight() {
+				let t = () => (e.elem.thead?.offsetHeight || 0) + (e.elem.thead_foot?.offsetHeight || 0) + (e.elem.tfoot?.offsetHeight || 0) + (e.elem.tbody_head?.offsetHeight || 0), n = t();
+				return n === 0 && (e.#r(), n = t()), n;
+			},
+			get height() {
+				return e.elem.viewport.offsetHeight;
+			},
+			get innerHeight() {
+				return e.elem.viewport.clientHeight - this.fixedHeight;
+			},
+			get outerHeight() {
+				return e.elem.viewport.offsetHeight;
+			}
+		};
+	}
 	col = {
 		setWidth: (e, t, n = null) => {
 			Array.from(this.#e.querySelectorAll(`table colgroup col[data-col="${e}"]`)).forEach((e) => {
@@ -2651,7 +2797,12 @@ var k = class {
 	#h = {
 		length: 0,
 		height: 0,
-		heights: []
+		heights: [],
+		group: {
+			length: 0,
+			height: 0,
+			heights: []
+		}
 	};
 	static SCROLLBAR_SIZE = 16;
 	constructor() {
@@ -2737,7 +2888,7 @@ var k = class {
 	}
 	#_ = () => {
 		let e = this.querySelector(".ng-container-body thead"), t = this.querySelector(".nodata-overlay");
-		t.style.top = `${e?.offsetHeight}px`;
+		t && (t.style.top = `${e?.offsetHeight}px`);
 	};
 	get view() {
 		return !this.#f && this.#t?.data && (this.#f = new A(this)), this.#f;
@@ -2819,9 +2970,22 @@ var k = class {
 		if (n(!0), this.#e = t, this.#p = {
 			table: v.compile(e),
 			tbody: { tr: e.querySelectorAll("tbody tr") }
-		}, this.querySelector(".ng-container-body").appendChild(this.#p.table), this.#h.height = this.#h.length = 0, this.#h.heights = [], this.querySelectorAll(".ng-container-body tbody.body tr").forEach((e) => {
-			this.#h.height += Math.max(e.offsetHeight || 0, 28), this.#h.heights.push(e.offsetHeight || 0);
-		}), this.#h.length = this.#h.heights.length, this.#e === 0) {
+		}, this.querySelector(".ng-container-body").appendChild(this.#p.table), this.#h = {
+			height: 0,
+			heights: [],
+			length: 0,
+			group: {
+				height: 0,
+				heights: [],
+				length: 0
+			}
+		}, this.querySelectorAll(".ng-container-body tbody.body tr").forEach((e) => {
+			let t = Math.max(e.offsetHeight || 0, 28);
+			this.#h.height += t, this.#h.heights.push(t);
+		}), this.querySelectorAll(".ng-container-body tbody.body tr[grouping=\"true\"]").forEach((e) => {
+			let t = Math.max(e.offsetHeight || 0, 28);
+			this.#h.group.height += t, this.#h.group.heights.push(t);
+		}), this.#h.length = this.#h.heights.length, this.#h.group.length = this.#h.group.heights.length, this.#e === 0) {
 			let e = parseInt(this.#t.getAttribute("display-min-rows"), 10), t = parseInt(this.#t.getAttribute("display-max-rows"), 10), n = (this.querySelector("nine-table-toolbar")?.offsetHeight || 0) + (this.querySelector("nine-table-footer")?.offsetHeight || 0) + (this.querySelector("thead")?.offsetHeight || 0) + (this.querySelector("tfoot")?.offsetHeight || 0) + (this.querySelector("tbody.head")?.offsetHeight || 0);
 			this.#t.getAttribute("auto-height") !== "true" && isNaN(e) && isNaN(t) || this.#t.setAttribute("scroll-bar", "none"), isNaN(e) || (this.#t.style.minHeight = n + this.#h.height * e + "px"), isNaN(t) || (this.#t.style.maxHeight = n + this.#h.height * t + "px");
 		}
@@ -2909,7 +3073,7 @@ var k = class {
 		t && (t.scrollTop = e);
 	};
 	#S = () => {
-		this.#C(), this.#r = new y(this), this.#i = new b(this), this.#a = new S(this), this.#o = new w(this), this.#s = new T(this), this.#f = new A(this), this.#l = new O(this), this.#u = new h(this), this.#g || (this.#c = new k(this)), this.#m.mainBody.addEventListener("scroll", (e) => {
+		this.#C(), this.#r = new y(this), this.#i = new b(this), this.#a = new S(this), this.#o = new w(this), this.#s = new T(this), this.#f = new A(this), this.#l = new O(this), this.#u = new m(this), this.#g || (this.#c = new k(this)), this.#m.mainBody.addEventListener("scroll", (e) => {
 			this.querySelectorAll("nine-table-filter-panel,cell-combo-panel").forEach((e) => {
 				e.classList.remove("active");
 			}), this.querySelector("nine-table-hscrollbar").refresh();
@@ -2990,10 +3154,14 @@ var P = class {
 		e ? this.#e.classList.add("loading") : this.#e.classList.remove("loading");
 	}
 	#n = () => {
-		let e = Array.from(this.#e.children).filter((e) => e.tagName.toUpperCase() === "TABLE"), t = e.length, n = e.map((e, n) => {
+		let e = Array.from(this.#e.children).filter((e) => e.tagName.toUpperCase() === "TABLE"), t = e.length;
+		e.forEach((e) => {
+			j.initializeTable(this.#e, e);
+		});
+		let n = e.map((e, n) => {
 			let r = n === 0 ? "active" : "", i = e.id || `sheet${n + 1}`;
 			return `<nine-table-sheet class="${r}" data-index="${n}" data-sheet-id="${i}" id="${i}"></nine-table-sheet>` + (n < t - 1 ? `<nine-splitter class="h" data-split-index="${n}"></nine-splitter>` : "");
-		}).join(""), r = ["@import \"https://cdn.jsdelivr.net/npm/@ninebone/datagrid@0.1.3/dist/css/nine-table.css\";"];
+		}).join(""), r = ["@import \"https://cdn.jsdelivr.net/npm/@ninebone/datagrid@0.2.1/dist/css/nine-table.css\";"];
 		nine["nine-table"] && nine["nine-table"].cssFile && r.push(`@import "${nine["nine-table"].cssFile}";`), this.#e.shadowRoot.innerHTML = `
             <style>
                 ${r.join("\n")}
@@ -3014,9 +3182,7 @@ var P = class {
                 <nine-table-analysis></nine-table-analysis>
             </nine-table-body>
             <nine-table-footer></nine-table-footer>
-        `, e.forEach((e) => {
-			j.initializeTable(this.#e, e);
-		}), this.#e.shadowRoot.querySelectorAll("nine-table-sheet").forEach((t, n) => {
+        `, this.#e.shadowRoot.querySelectorAll("nine-table-sheet").forEach((t, n) => {
 			t.classList.add("active"), t.generateTemplate(e[n], n);
 		}), this.#e.shadowRoot.querySelectorAll("nine-table-sheet").forEach((e) => {
 			setTimeout(() => {
@@ -3064,24 +3230,59 @@ var P = class {
 			return n >= 0 ? `rowItem.v[${n}]` : e;
 		});
 	}
-	precompile(e) {
-		return e && this.rewriteExpr(e);
+	rewriteExprGroup(e) {
+		return e;
+	}
+	precompile(e, t) {
+		return e && (t ? this.rewriteExprGroup(e) : this.rewriteExpr(e));
 	}
-	evaluate(e, t, n = 0) {
+	evaluate(e, t, n = 0, r = !1) {
 		if (e == null) return "";
 		try {
-			let r = String(e).trim(), i = this.rewriteExpr(r);
-			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};
-                    `), this.#n.set(i, e)), e(t, n, this.#e);
+			let i = String(e).trim(), a = r ? this.rewriteExprGroup(i) : this.rewriteExpr(i);
+			if (a.includes("provider.") || a.includes("host.") || a.includes("data.") || a.includes("rowItem.v") || a.includes("(")) {
+				let e = this.#n.get(a);
+				return r ? e || (e = Function("childrenItems", "row", "host", `
+                            const children = childrenItems || [];
+                            const fields = ${JSON.stringify(this.#t)};
+                            
+                            const data = new Proxy(children, {
+                                get(target, prop) {
+                                    if (prop in target || typeof prop === 'symbol') return target[prop];
+                
+                                    const idx = fields.indexOf(prop);
+                                    if (idx >= 0) {
+                                        return target.map(r => r.v ? r.v[idx] : r[prop]);
+                                    }
+                
+                                    return target[prop];
+                                }
+                            });
+                
+                            const provider = host;
+                
+                            // 💡 1. 수식 안에서 바로 쓸 수 있는 집계 함수들 선언
+                            
+                            const sum = (arr) => Array.isArray(arr) ? arr.reduce((a, b) => a + (Number(b) || 0), 0) : 0;
+                            const avg = (arr) => Array.isArray(arr) && arr.length > 0 ? sum(arr) / arr.length : 0;
+                            const max = (arr) => Array.isArray(arr) && arr.length > 0 ? Math.max(...arr.map(Number)) : 0;
+                            const min = (arr) => Array.isArray(arr) && arr.length > 0 ? Math.min(...arr.map(Number)) : 0;
+                            
+                            // 만약 꼭 'Math.sum' 형태로 쓰고 싶다면 아래처럼 Math 객체에 잠시 붙여줄 수도 있습니다.
+                            if (!Math.sum) Math.sum = sum;
+                            if (!Math.avg) Math.avg = avg;
+                
+                            if (!data && !host) return "";
+                            return ${a};
+                        `), this.#n.set(a, e)) : e || (e = Function("rowItem", "row", "host", `
+                            const data = rowItem;
+                            const provider = host;
+    
+                            if (!data && !host) return "";
+                            return ${a};
+                        `), this.#n.set(a, e)), e(t, n, this.#e);
 			}
-			return i;
+			return a;
 		} catch {
 			return e;
 		}
@@ -3106,7 +3307,11 @@ var P = class {
 }, L = class {
 	#e;
 	constructor(e) {
-		this.#e = e, ["col", "row"].forEach((e) => {
+		this.#e = e, [
+			"col",
+			"row",
+			"viewport"
+		].forEach((e) => {
 			this[e] = new Proxy({}, { get: (t, n) => {
 				let r = this.#t();
 				if (!r || !r[e]) return;
@@ -3130,7 +3335,7 @@ var P = class {
 	#i;
 	#a = 0;
 	constructor() {
-		super(), ["NINE-TABLE"].includes(this.tagName) && n.log("Welcome nine-table", "0.1.3"), this.#e = this.attachShadow({ mode: "open" }), this.#t = new o(this), this.#r = new I(this), this.#i = new L(this), this.#c();
+		super(), ["NINE-TABLE"].includes(this.tagName) && n.log("Welcome nine-table", "0.2.1"), this.#e = this.attachShadow({ mode: "open" }), this.#t = new o(this), this.#r = new I(this), this.#i = new L(this), this.#c();
 	}
 	connectedCallback() {
 		setTimeout(() => {
@@ -3252,7 +3457,7 @@ var z = class extends HTMLElement {
 		super();
 	}
 	get #a() {
-		return this.#r.getAttribute("update-row-state") === "false";
+		return this.#r.getAttribute("update-row-state") !== "false";
 	}
 	get host() {
 		return this.#e;
@@ -3355,14 +3560,21 @@ var z = class extends HTMLElement {
 		return !this.isValid();
 	}
 	getDisplayText = (e = "") => {
-		if (!this.#r || !this.#r.closest("tbody") || !this.#n.data) return e;
+		if (!this.#r || !this.#r.closest("tbody") && !this.#r.closest("thead.foot") && !this.#r.closest("tfoot") || !this.#n.data) return e;
 		let t = this.#r.dataset.expr, n = this.#r.dataset.bind, r = parseInt(this.#r.dataset.row, 10);
 		if (t) try {
-			return this.#n.getAttribute("grouping") === "true" ? this.getGroupExprValue(t, this.#n.data, r, this.#r) : this.#e.exprEngine.evaluate(t, this.#n.data, r);
+			return this.#e.exprEngine.evaluate(t, this.#n.data, r, this.#n.getAttribute("grouping") === "true");
 		} catch {
 			return e;
 		}
-		return n ? this.value ?? e : e;
+		if (n) {
+			if (this.#n.getAttribute("grouping") === "true") {
+				let e = this.#e.fields.get().indexOf(n);
+				return this.#n.data[0].v[e];
+			}
+			return this.value ?? e;
+		}
+		return e;
 	};
 	refresh() {
 		if (!this.#r || !this.#n) return;
@@ -3377,7 +3589,7 @@ var z = class extends HTMLElement {
 		].forEach((e) => {
 			let t = this.#i[e];
 			if (t) {
-				let n = this.#e.exprEngine.evaluate(t, this.#n.data, parseInt(this.#r.dataset.row, 10));
+				let n = this.#e.exprEngine.evaluate(t, this.#n.data, parseInt(this.#r.dataset.row, 10), this.#n.getAttribute("grouping") === "true");
 				e === "validator" ? n || this.#r.classList.add("invalid") : e === "visible" ? this.style.display = n ? "" : "none" : e === "enable" ? (this.querySelectorAll("input, button, textarea, select").forEach((e) => {
 					e.disabled = !n;
 				}), n ? this.#r.removeAttribute("disabled") : this.#r.setAttribute("disabled", "true")) : this.#r.style[e] = n;
@@ -3385,7 +3597,7 @@ var z = class extends HTMLElement {
 		}), e;
 	}
 	getExprValue(e, t, n) {
-		return !this.#e || !this.#e.exprEngine || e == null || e === "" ? e : this.#e.exprEngine.evaluate(e, t, n);
+		return !this.#e || !this.#e.exprEngine || e == null || e === "" ? e : this.#e.exprEngine.evaluate(e, t, n, this.#n.getAttribute("grouping") === "true");
 	}
 	getGroupExprValue = (e, t, n, r) => {
 		if (!e) return "";
@@ -3465,8 +3677,8 @@ var z = class extends HTMLElement {
 	get attr() {
 		return super.attr;
 	}
-	getExprValue(e, t, n, r) {
-		return super.getExprValue(e, t, n, r);
+	getExprValue(e, t, n) {
+		return super.getExprValue(e, t, n);
 	}
 	constructor() {
 		super();
@@ -3786,6 +3998,8 @@ var q = class extends H {
 			super.sheet.querySelector(`tbody.body [data-col="${super.cell.dataset.col}"] cell-checkbox`)?.selectAll(e.target.checked);
 		}), this.#e.addEventListener("change", (e) => {
 			this.closest("tbody") && (this.#s ? (this.selectAll(!1), this.value = this.trueValue) : this.value = e.target.checked ? this.trueValue : this.falseValue, this.sheet.rowManager.refresh(!0));
+		}), this.cell.addEventListener("keydown", (e) => {
+			this.cell.hasAttribute("readonly") || this.cell.classList.contains("readonly") || this.cell.getAttribute("disabled") !== "true" && this.style.display !== "none" && e.code === "Space" && (e.preventDefault(), this.value = this.#e.checked ? this.falseValue : this.trueValue, this.sheet.rowManager.refresh(!0));
 		});
 	};
 	#r = () => {
@@ -3850,7 +4064,7 @@ var J = class extends H {
 	}
 	#r = () => {
 		this.cell.addEventListener("keydown", (e) => {
-			if (!(this.cell.hasAttribute("readonly") || this.cell.classList.contains("readonly")) && this.cell.getAttribute("disabled") !== "true" && e.code === "Space") {
+			if (!(this.cell.hasAttribute("readonly") || this.cell.classList.contains("readonly")) && this.cell.getAttribute("disabled") !== "true" && this.style.display !== "none" && e.code === "Space") {
 				e.preventDefault();
 				let t = -1;
 				this.#t.forEach((e, n) => {
@@ -3904,180 +4118,173 @@ var J = class extends H {
 customElements.get("cell-radio") || customElements.define("cell-radio", J);
 // src/cell/cell-combo-panel.js
 var Y = class extends HTMLElement {
-	#e;
+	#e = 10;
 	#t;
 	#n;
-	#r = !1;
-	#i;
-	#a;
-	#o;
+	#r;
 	constructor() {
 		super();
 	}
 	connectedCallback() {
-		this.#x(), this.#i = this.querySelector("nine-table-simple"), setTimeout(() => {
-			this.#a = this.#i.shadowRoot.querySelector("nine-table-sheet"), this.#b();
+		this.#v(), this.#n = this.querySelector("nine-table-simple"), setTimeout(() => {
+			this.#r = this.#n.shadowRoot.querySelector("nine-table-sheet"), this.#_();
 		});
 	}
-	#s = (e, t, n, i) => {
-		let a = this.querySelector("nine-table-simple");
-		if (!a || !e || e.length === 0) return;
-		let o = this.#e.closest("th,td").getAttribute("items"), s = [];
-		s = o ? o.split(",").map((e) => e.trim()) : [n].filter(Boolean);
-		let c = s.length, l = a.shadowRoot.querySelector("nine-table-sheet");
-		l.source.table.querySelectorAll("colgroup col, tbody td").forEach((e, t) => {
-			let n = parseInt(e.dataset.col, 10);
-			n >= 2 && (e.style.display = n - 2 >= c ? "none" : "");
-		}), a.shadowRoot.querySelectorAll("table colgroup col").forEach((e, t) => {
-			let n = parseInt(e.dataset.col, 10);
-			n >= 2 && (e.style.display = n - 2 >= c ? "none" : "");
-		});
-		let u = e.map((e) => {
-			let n = {
-				CHK: "N",
-				k: t && e[t] !== void 0 ? e[t] : e[0] === void 0 ? "" : e[0]
-			};
-			return s.forEach((t, r) => {
-				n[`tmp${r + 1}`] = e[t] === void 0 ? e[r] === void 0 ? "" : e[r] : e[t];
-			}), n;
-		});
-		a.addEventListener(r.EVENT.ROW_ADDED, () => {
+	#i = (e) => {
+		if (!this.#n || !this.#t.dataSource || this.#t.dataSource.length === 0) return;
+		let t = this.#t.items.length || 1;
+		this.#r.source.table.querySelectorAll("colgroup col, tbody td").forEach((e, n) => {
+			let r = parseInt(e.dataset.col, 10);
+			r >= 2 && (e.style.display = r - 2 >= t ? "none" : "");
+		}), this.#r.querySelectorAll("table colgroup col").forEach((e, n) => {
+			let r = parseInt(e.dataset.col, 10);
+			r >= 2 && (e.style.display = r - 2 >= t ? "none" : "");
+		}), this.#n.addEventListener(r.EVENT.ROW_ADDED, () => {
 			setTimeout(() => {
-				this.style.opacity = "", this.classList.add("active"), a.shadowRoot.querySelectorAll("colgroup col").forEach((e, t) => {
+				this.style.opacity = "", this.classList.add("active"), this.#r.querySelectorAll("colgroup col").forEach((e, t) => {
 					let n = parseInt(e.dataset.col, 10);
-					n >= 2 && e.style.display !== "none" && l.col.autoFit(n);
+					n >= 2 && e.style.display !== "none" && this.#r.col.autoFit(n);
 				});
-				let e = this.#i.fields.get();
-				if (i) {
-					let t = this.#e.value ? String(this.#e.value).split(this.#o).map((e) => e.trim()) : [], n = e.indexOf("k"), r = e.indexOf("CHK");
-					this.#i.data.getArray().forEach((e) => {
+				let e = this.#n.fields.get();
+				if (this.#t.multi) {
+					let t = this.#t.value ? String(this.#t.value).split(this.#t.separator).map((e) => e.trim()) : [], n = e.indexOf("k"), r = e.indexOf("CHK");
+					this.#n.data.getArray().forEach((e) => {
 						e.v[r] = t.includes(String(e.v[n])) ? "Y" : "N";
 					});
-					let i = this.#a.view.getArray().findIndex((e, r) => e.v[n] === t[0]);
-					this.#_(i);
+					let i = this.#r.view.getArray().findIndex((e, r) => e.v[n] === t[0]);
+					this.#m(i);
 				} else {
-					let t = this.#e.value, n = e.indexOf("k"), r = this.#a.view.getArray().findIndex((e, r) => e.v[n] === t);
-					this.#_(r);
+					let t = this.#t.value, n = e.indexOf("k"), r = this.#r.view.getArray().findIndex((e, r) => e.v[n] === t);
+					this.#m(r);
 				}
 			});
-		}, { once: !0 }), i && this.#e.value, u.length * this.#a.template.height >= this.offsetHeight ? this.classList.add("expand") : this.classList.remove("expand"), a.data.set(u);
+		}, { once: !0 }), e.length > this.#e ? this.classList.add("expand") : this.classList.remove("expand"), this.#n.data.set(e);
 	};
-	#c = (e) => {
+	#a = (e) => {
 		let t = e.closest(".ng-sheet-body"), n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
 		return r.bottom - n.bottom >= n.top - r.top;
 	};
-	#l = (e, t = 0) => {
-		let n = e.closest(".ng-sheet-body"), r = e.getBoundingClientRect(), i = n.getBoundingClientRect();
-		return (t ? i.bottom - r.bottom : r.top - i.top) - 5;
+	#o = (e, t, n) => {
+		let r = e.closest(".ng-sheet-body"), i = e.getBoundingClientRect(), a = r.getBoundingClientRect(), o = (t ? a.bottom - i.bottom : i.top - a.top) - 5, s = n * this.#r.template.height + (n > this.#e ? 32 : 0) + 2;
+		return Math.min(o, s);
 	};
-	#u = (e) => {
+	#s = (e) => {
 		let t = e.closest("th,td"), n = t.closest(".ng-sheet-body"), r = t.getBoundingClientRect(), i = n.getBoundingClientRect(), a = r.left - i.left, o = this.offsetWidth;
 		return a + o > i.width && (a = Math.max(0, i.width - o - 2)), a < 0 && (a = 5), a;
 	};
-	open = (e, t, n, r, i, a) => {
-		this.#e = e, this.#t = n, this.#n = r, this.#r = !0, this.#o = a, this.classList.add("active"), this.style.opacity = "0", setTimeout(() => {
-			if (!this.querySelector("nine-table-simple") || !t) return;
+	open = (e) => {
+		this.#t = e, this.classList.add("active"), this.style.opacity = "0";
+		let t = this.#t.items;
+		t.length === 0 && t.push(this.#t.valueName);
+		let n = this.#t.dataSource.map((e) => {
+			let n = {
+				CHK: "N",
+				k: this.#t.keyName && e[this.#t.keyName] !== void 0 ? e[this.#t.keyName] : e[0] === void 0 ? "" : e[0]
+			};
+			return t.forEach((t, r) => {
+				n[`tmp${r + 1}`] = e[t] === void 0 ? e[r] === void 0 ? "" : e[r] : e[t];
+			}), n;
+		});
+		setTimeout(() => {
+			if (!this.#n || !this.#t.dataSource) return;
 			this.querySelector(".search-input").value = "", this.querySelector("#chkAll").checked = !0;
-			let a = e.closest(".ng-sheet-body"), o = e.getBoundingClientRect(), s = a.getBoundingClientRect(), c = this.#c(e), l = this.#l(e, c), u = this.#u(e), d = c ? o.bottom - s.top : o.top - s.top - l;
-			this.style.height = `${l}px`, this.style.left = `${u}px`, this.style.top = `${d}px`, i ? (this.classList.add("multi"), this.#i.classList.add("multi")) : (this.classList.remove("multi"), this.#i.classList.remove("multi")), this.#s(t, n, r, i);
+			let t = e.closest(".ng-sheet-body"), r = e.getBoundingClientRect(), i = t.getBoundingClientRect(), a = this.#a(e), o = this.#o(e, a, n.length), s = this.#s(e), c = a ? r.bottom - i.top : r.top - i.top - o;
+			this.style.height = `${o}px`, this.style.left = `${s}px`, this.style.top = `${c}px`, this.#t.multi ? (this.classList.add("multi"), this.#n.classList.add("multi")) : (this.classList.remove("multi"), this.#n.classList.remove("multi")), this.#i(n);
 		}, 100);
 	};
 	close = () => {
-		this.classList.remove("active"), this.#r = !1, this.#e && this.#e.cell && this.#e.cell.focus();
+		this.classList.remove("active"), this.#t && this.#t.cell && this.#t.cell.focus({ preventScroll: !0 });
 	};
-	#d = (e) => {
+	#c = (e) => {
 		let t = e.target.closest("th,td");
-		if (this.#i.classList.contains("multi")) {
+		if (this.#n.classList.contains("multi")) {
 			let e = parseInt(t?.dataset.index, 10);
-			this.#g(e);
-		} else parseInt(t?.dataset.col, 10) >= 2 && this.#h();
+			this.#p(e);
+		} else parseInt(t?.dataset.col, 10) >= 2 && this.#f();
 	};
-	#f = (e) => {
+	#l = (e) => {
 		switch (e.code) {
 			case "Enter":
 			case "ArrowDown":
-				let e = this.#i.row.at();
-				e < 0 ? this.#_(0) : this.#_(e);
+				let e = this.#n.row.at();
+				e < 0 ? this.#m(0) : this.#m(e);
 				break;
-			case "Tab": this.#_(this.#i.row.at());
+			case "Tab": this.#m(this.#n.row.at());
 		}
 	};
-	#p = (e) => {
+	#u = (e) => {
 		let t;
 		switch (e.code) {
 			case "Escape":
 				this.close();
 				break;
 			case "Enter":
-				this.classList.contains("multi") ? this.#m() : this.#h();
+				this.classList.contains("multi") ? this.#d() : this.#f();
 				break;
 			case "Tab":
-				this.classList.contains("expand") && (e.preventDefault(), this.querySelector("input[type='text']").focus());
+				this.classList.contains("expand") && (e.preventDefault(), this.querySelector("input[type='text']").focus({ preventScroll: !0 }));
 				break;
 			case "ArrowDown":
-				t = this.#i.row.at(), t < 0 && this.#_(0);
+				t = this.#n.row.at(), t < 0 && this.#m(0);
 				break;
-			case "Space": e.preventDefault(), ["TH", "TD"].includes(e.target.tagName) && this.#g(this.#i.row.at());
+			case "Space": e.preventDefault(), ["TH", "TD"].includes(e.target.tagName) && this.#p(this.#n.row.at());
 		}
 	};
-	#m = () => {
-		let e = this.#i.fields.get(), t = e.indexOf("k"), n = e.indexOf("CHK"), r = [];
-		this.#a.view.getArray().forEach((e) => {
+	#d = () => {
+		let e = this.#n.fields.get(), t = e.indexOf("k"), n = e.indexOf("CHK"), r = [];
+		this.#r.view.getArray().forEach((e) => {
 			e.v[n] === "Y" && r.push(e.v[t]);
-		}), this.#e.value = r.join(this.#o), this.#e.sheet.rowManager.refresh(!0), this.close();
+		}), this.#t.value = r.join(this.#t.separator), this.#t.sheet.rowManager.refresh(!0), this.close();
 	};
-	#h = () => {
-		let e = this.#i.row.at();
+	#f = () => {
+		let e = this.#n.row.at();
 		if (e >= 0) {
-			let t = this.#a.view.get(e);
-			this.#e.value = t.k, this.#e.sheet.rowManager.refresh(!0), this.close();
+			let t = this.#r.view.get(e);
+			this.#t.value = t.k, this.#t.sheet.rowManager.refresh(!0), this.close();
 		}
 	};
-	#g = (e) => {
-		if (this.#i.classList.contains("multi") && e >= 0) {
-			let t = this.#a.view.get(e);
-			this.#i.data.setValue(t.m._[r.META.INDEX.ROWID], "CHK", t.CHK === "Y" ? "N" : "Y"), this.#i.refresh();
+	#p = (e) => {
+		if (this.#n.classList.contains("multi") && e >= 0) {
+			let t = this.#r.view.get(e);
+			this.#n.data.setValue(t.m._[r.META.INDEX.ROWID], "CHK", t.CHK === "Y" ? "N" : "Y"), this.#n.refresh();
 		}
 	};
-	#_ = (e) => {
-		e === -1 ? (this.#a.row.focus(-1, () => {}), setTimeout(() => {
-			this.#a.selection.clear(), this.#a.navigation.currentCell = this.#a.querySelector("tr[data-index=\"0\"] td[data-col=\"2\"]"), this.#a.focus(), this.#a.invalidate();
-		})) : this.#a.row.focus(e, () => {
+	#m = (e) => {
+		e === -1 ? (this.#r.row.focus(-1, () => {}), setTimeout(() => {
+			this.#r.selection.clear(), this.#r.navigation.currentCell = this.#r.querySelector("tr[data-index=\"0\"] td[data-col=\"2\"]"), this.#r.focus({ preventScroll: !0 }), this.#r.invalidate();
+		})) : this.#r.row.focus(e, () => {
 			setTimeout(() => {
-				let t = this.#a.querySelector(`tr[data-index="${e}"] td[data-col="2"]`);
-				this.#a.navigation.currentCell = t, t.focus(), this.#a.invalidate();
+				let t = this.#r.querySelector(`tr[data-index="${e}"] td[data-col="2"]`);
+				this.#r.navigation.currentCell = t, t.focus({ preventScroll: !0 }), this.#r.invalidate();
 			});
 		});
 	};
-	#v = (e) => {
-		let t = this.#i.fields.get().indexOf("CHK");
-		this.#i.data.getArray().forEach((n) => {
+	#h = (e) => {
+		let t = this.#n.fields.get().indexOf("CHK");
+		this.#n.data.getArray().forEach((n) => {
 			n.v[t] = e.target.checked ? "Y" : "N";
-		}), this.#a.invalidate();
+		}), this.#r.invalidate();
 	};
-	#y = (e) => {
+	#g = (e) => {
 		let t = e.target.value.toLowerCase().trim();
-		if (!t) this.#a.filtering.clear();
+		if (!t) this.#r.filtering.clear();
 		else {
-			let e = this.#i.data.getArray(), n = this.#i.fields.get(), r = "tmp1", i = n.indexOf(r), a = [];
+			let e = this.#n.data.getArray(), n = this.#n.fields.get(), r = "tmp1", i = n.indexOf(r), a = [];
 			e.forEach((e) => {
 				let n = i >= 0 && e.v ? e.v[i] : "";
 				String(n).replace(/<[^>]*>?/gm, "").toLowerCase().includes(t) && a.push(n);
-			}), this.#a.filtering.set({ [r]: [...new Set(a)] });
+			}), this.#r.filtering.set({ [r]: [...new Set(a)] });
 		}
 	};
-	get isOpen() {
-		return this.#r;
-	}
 	get targetCell() {
-		return this.#e;
+		return this.#t;
 	}
-	#b = () => {
-		this.querySelector(".search-input").addEventListener("input", this.#y), this.querySelector(".search-input").addEventListener("keydown", this.#f), this.querySelector("#btnOk").addEventListener("click", this.#m), this.querySelector("#chkAll").addEventListener("change", this.#v), this.#a.addEventListener("keydown", this.#p), this.#a.addEventListener("click", this.#d), document.addEventListener("mousedown", (e) => {
+	#_ = () => {
+		this.querySelector(".search-input").addEventListener("input", this.#g), this.querySelector(".search-input").addEventListener("keydown", this.#l), this.querySelector("#btnOk").addEventListener("click", this.#d), this.querySelector("#chkAll").addEventListener("change", this.#h), this.#r.addEventListener("keydown", this.#u), this.#r.addEventListener("click", this.#c), document.addEventListener("mousedown", (e) => {
 			(e.composedPath ? e.composedPath() : []).includes(this) || this.close();
 		});
 	};
-	#x = () => {
+	#v = () => {
 		this.innerHTML = "\n            <input type=\"text\" class=\"search-input\" placeholder=\"Search...\" />\n            \n            <nine-table-simple class=\"combo-list\" theme=\"simple\">\n                <table auto-fit-col=\"true\">\n                    <colgroup>\n                        <col width=\"30\" fixed=\"left\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"0\" />\n                    </colgroup>\n                    <tbody>\n                        <tr>\n                            <td cell-type=\"checkbox\" data-bind=\"CHK\"></td>\n                            <td data-bind=\"tmp1\" />\n                            <td data-bind=\"tmp2\" />\n                            <td data-bind=\"tmp3\" />\n                            <td data-bind=\"tmp4\" />\n                            <td data-bind=\"tmp5\" />\n                            <td data-bind=\"tmp6\" />\n                            <td data-bind=\"tmp7\" />\n                            <td data-bind=\"tmp8\" />\n                            <td data-bind=\"tmp9\" />\n                            <td data-bind=\"tmp10\" />\n                            <td data-bind=\"k\" />\n                        </tr>\n                    </tbody>\n                </table>\n            </nine-table-simple>\n            \n            <div class=\"footer\">\n                <label for=\"chkAll\"><input id=\"chkAll\" type=\"checkbox\" checked><span>Select All</span></label>\n                <button id=\"btnOk\">OK</button>\n            </div>\n        ";
 	};
 };
@@ -4087,68 +4294,80 @@ var X = class extends H {
 	#e;
 	#t = [];
 	#n;
-	#r;
-	#i;
-	#a;
-	#o;
 	constructor() {
 		super();
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.#l();
+		super.connectedCallback(), this.#a();
 	}
 	rerenderer = () => {
-		this.#u(), this.refresh();
+		this.#o(), this.refresh();
 	};
 	refresh = () => {
-		let e = super.refresh();
-		return this.#e && (this.#e.textContent = this.#s() || "Select", this.#c()), e;
+		super.refresh(), this.#e.textContent = this.#r() || "Select", this.#i();
 	};
-	#s = () => {
+	#r = () => {
 		if (!this.value || !Array.isArray(this.#t)) return "";
-		if (this.#i) {
-			let e = String(this.value).split(this.#a);
-			return this.#t.filter((t) => e.includes(String(t[this.#n]))).map((e) => e[this.#r]).join(this.#a);
+		if (this.multi) {
+			let e = String(this.value).split(this.multiSeparator);
+			return this.#t.filter((t) => e.includes(String(t[this.keyName]))).map((e) => e[this.valueName]).join(this.multiSeparator);
 		}
 		{
-			let e = this.#t.find((e) => String(e[this.#n]) === String(this.value));
-			return e ? e[this.#r] : this.value;
+			let e = this.#t.find((e) => String(e[this.keyName]) === String(this.value));
+			return e ? e[this.valueName] : this.value;
 		}
 	};
-	#c = () => {
+	#i = () => {
 		if (!super.cell || (super.cell.classList.remove("invalid"), this.value === null || this.value === void 0 || this.value === "" || !Array.isArray(this.#t))) return;
-		let e = this.#i ? String(this.value).split(this.#a) : [this.value];
-		for (let t of e) if (this.#t.findIndex((e) => String(t) === String(e[this.#n])) < 0) {
+		let e = this.multi ? String(this.value).split(this.multiSeparator) : [this.value];
+		for (let t of e) if (this.#t.findIndex((e) => String(t) === String(e[this.keyName])) < 0) {
 			super.cell.classList.add("invalid");
 			break;
 		}
 	};
-	#l = () => {
-		this.#d(), this.#n = this.cell.getAttribute("key-name") || "k", this.#r = this.cell.getAttribute("value-name") || "v", this.#i = this.cell.getAttribute("multi") === "true", this.#a = this.cell.getAttribute("multi-separator") || ",", this.#u(), this.#f();
+	#a = () => {
+		this.#s(), this.#o(), this.#c();
 	};
-	#u = () => {
-		if (!super.sheet || !super.cell) return;
-		let e = super.cell?.getAttribute("data-source");
+	#o = () => {
+		let e = this.cell.getAttribute("data-source");
 		e && (this.#t = super.getExprValue(e, super.tr.data, super.tr.dataset.row));
 	};
-	#d = () => {
+	#s = () => {
 		this.innerHTML = "\n            <button class=\"btn1\" type=\"button\" tabindex=\"-1\">Select</button>\n            <button class=\"btn2\" type=\"button\" tabindex=\"-1\"></button>\n        ", this.#e = this.querySelector(".btn1");
 	};
-	#f = () => {
+	#c = () => {
 		this.querySelectorAll("button").forEach((e) => {
 			e.addEventListener("click", (e) => {
-				e.stopPropagation(), this.#p();
+				e.stopPropagation(), this.#l();
 			});
 		}), this.cell.addEventListener("keydown", (e) => {
-			["Space"].includes(e.code) && this.#p();
+			["Space"].includes(e.code) && this.#l();
 		});
 	};
-	#p = () => {
-		this.#o || (this.#o = super.sheet.querySelector("cell-combo-panel"), this.#o || (this.#o = document.createElement("cell-combo-panel"), super.sheet.appendChild(this.#o))), this.#o.isOpen && this.#o.targetCell === this ? this.#o.close() : this.#o.open(this, this.#t, this.#n, this.#r, this.#i, this.#a);
+	#l = () => {
+		this.#n || (this.#n = this.sheet.querySelector("cell-combo-panel"), this.#n || (this.#n = document.createElement("cell-combo-panel"), this.sheet.appendChild(this.#n))), this.#n.classList.contains("active") && this.#n.targetCell === this ? this.#n.close() : this.#n.open(this, this.#t, this.keyName, this.valueName, this.multi, this.multiSeparator);
 	};
 	get dataSource() {
 		return this.#t;
 	}
+	get keyName() {
+		return this.cell.getAttribute("key-name") || "k";
+	}
+	get valueName() {
+		return this.cell.getAttribute("value-name") || "v";
+	}
+	get multi() {
+		return this.cell.getAttribute("multi") === "true";
+	}
+	get multiSeparator() {
+		return this.cell.getAttribute("multi-separator") || ",";
+	}
+	get items() {
+		return this.cell.getAttribute("items")?.split(",").map((e) => e.trim()) || [];
+	}
+	get separator() {
+		return this.multiSeparator;
+	}
 };
 customElements.get("cell-combo") || customElements.define("cell-combo", X);
 // src/cell/cell-renderer.js
@@ -4203,8 +4422,45 @@ var Q = class extends V {
 	};
 };
 customElements.get("cell-button") || customElements.define("cell-button", Q);
-// src/cell/cell-row-indicator.js
+// src/cell/cell-tree.js
 var $ = class extends V {
+	#e;
+	#t;
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.#i();
+	}
+	refresh() {
+		if (this.tr.style.display === "none") return;
+		let e = this.tr.dataset.groupId, t = this.data;
+		if (!t) return;
+		let n = e ? e?.split("_").length - 2 : this.sheet.grouping.columns.length;
+		this.style.setProperty("--tree-level", n), this.#t.textContent = this.getDisplayText(), this.#n(t);
+	}
+	#n(e) {
+		let t = this.#r(e), n = this.sheet.grouping.isCollapsed(this.tr.dataset.groupId);
+		this.#e.className = "icon", this.#e.classList.remove("expand-on,expand-off"), t ? this.#e.classList.add(n ? "expand-off" : "expand-on") : this.#e.classList.add("node");
+	}
+	#r(e) {
+		return this.tr.data.length > 0;
+	}
+	#i = () => {
+		this.#a(), this.#o();
+	};
+	#a = () => {
+		this.innerHTML = "\n	        <div class=\"item\">\n                <div class=\"icon\"></div>\n                <span class=\"tree-text\"></span>\n            </div>\n        ", this.#e = this.querySelector(".icon"), this.#t = this.querySelector(".tree-text");
+	};
+	#o = () => {
+		this.#e.addEventListener("click", (e) => {
+			e.stopPropagation(), this.sheet.grouping.toggleGroup(this.tr.dataset.groupId);
+		});
+	};
+};
+customElements.get("cell-tree") || customElements.define("cell-tree", $);
+// src/cell/cell-row-indicator.js
+var ee = class extends V {
 	#e;
 	#t;
 	#n;
@@ -4220,10 +4476,8 @@ var $ = class extends V {
 	refresh = () => {
 		if (!this.cell || !this.tr) return;
 		this.classList.remove("is-insert", "is-update", "is-delete");
-		let e = this.row;
-		if (isNaN(e)) return;
-		let t = this.tr.data;
-		if (t) switch (t.m._[r.META.INDEX.ROW_STATE]) {
+		let e = this.tr.data;
+		if (e && e.m !== void 0) switch (e.m._[r.META.INDEX.ROW_STATE]) {
 			case r.ROW_STATE.INSERT:
 				this.classList.add("is-insert");
 				break;
@@ -4232,22 +4486,22 @@ var $ = class extends V {
 				break;
 			case r.ROW_STATE.DELETE: this.classList.add("is-delete");
 		}
-		let n = this.index + 1, i = n.toLocaleString();
-		if (n >= 1e4) {
-			let e = i.length - 4, t = i.substring(0, e + 1), n = i.substring(e + 1);
+		let t = this.index + 1, n = t.toLocaleString();
+		if (t >= 1e4) {
+			let e = n.length - 4, t = n.substring(0, e + 1), r = n.substring(e + 1);
 			this.#e.innerHTML = `
             	<span class="ng-row-prefix">${t}</span>
-            	<span class="ng-row-suffix">${n}</span>
+            	<span class="ng-row-suffix">${r}</span>
             	<div class="row-status"></div>
         	`;
-		} else this.#e.innerHTML = `${i}`;
-		let a = !!this.sheet.querySelector("thead .asc,thead .desc"), o = !!this.sheet.querySelector("thead nine-table-filter-button.filtered");
-		this.#t.innerHTML = e, this.#t.style.display = a || o ? "" : "none";
+		} else this.#e.innerHTML = `${n}`;
+		let i = !!this.sheet.querySelector("thead .asc,thead .desc"), a = !!this.sheet.querySelector("thead nine-table-filter-button.filtered");
+		this.#t.innerHTML = this.row, this.#t.style.display = i || a ? "" : "none";
 	};
 };
-customElements.get("cell-row-indicator") || customElements.define("cell-row-indicator", $);
+customElements.get("cell-row-indicator") || customElements.define("cell-row-indicator", ee);
 // src/col/col-expand.js
-var ee = class extends HTMLElement {
+var te = class extends HTMLElement {
 	#e;
 	#t;
 	constructor() {
@@ -4295,9 +4549,9 @@ var ee = class extends HTMLElement {
 		this.removeEventListener("click", this.#n);
 	}
 };
-customElements.get("nine-table-col-expand") || customElements.define("nine-table-col-expand", ee);
+customElements.get("nine-table-col-expand") || customElements.define("nine-table-col-expand", te);
 // src/menu/nine-table-menu.js
-var te = class extends HTMLElement {
+var ne = class extends HTMLElement {
 	#e;
 	#t;
 	connectedCallback() {
@@ -4466,9 +4720,9 @@ var te = class extends HTMLElement {
 		this.#e?.removeEventListener("contextmenu", this.#n);
 	}
 };
-customElements.get("nine-table-menu") || customElements.define("nine-table-menu", te);
+customElements.get("nine-table-menu") || customElements.define("nine-table-menu", ne);
 // src/menu/nine-table-menu-panel.js
-var ne = class extends HTMLElement {
+var re = class extends HTMLElement {
 	#e;
 	#t = null;
 	constructor() {
@@ -4545,7 +4799,7 @@ var ne = class extends HTMLElement {
 		this.close();
 	}
 };
-customElements.get("nine-table-menu-panel") || customElements.define("nine-table-menu-panel", ne);
+customElements.get("nine-table-menu-panel") || customElements.define("nine-table-menu-panel", re);
 export { r as NINE_TABLE };
 
 //# sourceMappingURL=nine-table.js.map