@ninebone/datagrid 0.0.15 → 0.0.21

package/dist/nine-table.js

@@ -69,6 +69,8 @@ var n = new class extends e.constructor {
 	},
 	EVENT: {
 		LOAD: "load",
+		ROW_ADDED: "row-added",
+		ROW_REMOVED: "row-removed",
 		CELL_BUTTON_CLICK: "cell-button-click"
 	}
 }, i = class {
@@ -234,13 +236,19 @@ var n = new class extends e.constructor {
 	#u = (e) => this.#t.rawRecords.findIndex((t) => !t || !t.m || !t.m._ ? !1 : t.m._[r.META.INDEX.ROWID] === e);
 	add = (e, t = !0) => {
 		e === void 0 && (e = {});
-		let n = this.#c(e);
-		this.#t.rawRecords = this.#t.rawRecords.concat(this.#l(n));
-		let i = this.count() - 1;
+		let n = this.#c(e), i = this.#l(n);
+		this.#t.rawRecords = this.#t.rawRecords.concat(i);
+		let a = this.count() - 1;
 		return t && n.forEach((e, t) => {
 			let n = this.#t.rawRecords[this.#t.rawRecords.length - 1 - t];
 			n && (n.m._[r.META.INDEX.ROW_STATE] = r.ROW_STATE.INSERT);
-		}), this.#o(), i;
+		}), this.#o(), this.#e.dispatchEvent(new CustomEvent(r.EVENT.ROW_ADDED, {
+			bubbles: !0,
+			detail: {
+				target: this.#e,
+				rowid: i.length > 0 ? i[0].m._[r.META.INDEX.ROWID] : null
+			}
+		})), a;
 	};
 	insert = (e, t, n = !0) => {
 		t === void 0 && (t = {});
@@ -250,7 +258,13 @@ var n = new class extends e.constructor {
 		return this.#t.rawRecords.splice(a, 0, ...o), n && o.forEach((e, t) => {
 			let n = this.#t.rawRecords[a + t];
 			n && n.m && n.m._ && (n.m._[r.META.INDEX.ROW_STATE] = r.ROW_STATE.INSERT);
-		}), this.#o(), o[0].m._[r.META.INDEX.ROWID];
+		}), this.#o(), this.#e.dispatchEvent(new CustomEvent(r.EVENT.ROW_ADDED, {
+			bubbles: !0,
+			detail: {
+				target: this.#e,
+				rowid: o.length > 0 ? o[0].m._[r.META.INDEX.ROWID] : null
+			}
+		})), o[0].m._[r.META.INDEX.ROWID];
 	};
 	remove = (e) => {
 		let t = [];
@@ -265,7 +279,13 @@ var n = new class extends e.constructor {
 			i[e].m._[r.META.INDEX.ROW_STATE] === r.ROW_STATE.INSERT ? this.#t.rawRecords = this.#t.rawRecords.filter((e) => e.m._[r.META.INDEX.ROWID] !== t) : this.#t.rawRecords.forEach((e) => {
 				e.m._[r.META.INDEX.ROWID] === t && (e.m._[r.META.INDEX.ROW_STATE] = r.ROW_STATE.DELETE);
 			});
-		}), this.#o();
+		}), this.#o(), this.#e.dispatchEvent(new CustomEvent(r.EVENT.ROW_REMOVED, {
+			bubbles: !0,
+			detail: {
+				target: this.#e,
+				rowid: t.length > 0 ? t[0] : null
+			}
+		}));
 	};
 	setValue = (e, t, n) => {
 		e = parseInt(e, 10);
@@ -826,63 +846,61 @@ var m = {
 	#n;
 	#r;
 	#i = /* @__PURE__ */ new Map();
-	#a = [];
-	#o = null;
-	#s = null;
-	#c = 0;
-	#l;
-	#u = !1;
-	#d = !1;
+	#a = null;
+	#o = 0;
+	#s;
+	#c = !1;
+	#l = !1;
 	constructor(e) {
-		this.#t = e.getRootNode().host, this.#n = e, this.#x();
+		this.#t = e.getRootNode().host, this.#n = e, this.#y();
 	}
 	getRowHeight() {
-		return this.#a.reduce((e, t) => e + t, 0);
+		return this.#n.template.height;
 	}
 	refresh = (e = !1) => {
 		if (!this.#n.classList.contains("active")) return;
 		let t = this.#n.querySelector(".ng-sheet-body");
-		t && ((!this.#o || this.#o <= 0) && (this.#g(), this.#o && this.#o > 0 && this.#v()), this.#f(t.scrollTop, e), this.#n.querySelector("nine-table-vscrollbar")?.refresh());
+		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());
 	};
-	#f = (e, t = !1) => {
-		if (this.#d) {
-			this.#p(e, t);
+	#u = (e, t = !1) => {
+		if (this.#l) {
+			this.#d(e, t);
 			return;
 		}
-		let n = this.#o;
+		let n = this.#n.template.height;
 		if (!n || n <= 0) return;
 		let i = this.#n.view.getArray(), a = i.length;
 		if (a === 0) {
 			this.#n.elements.scrollHolder.style.height = "0px";
 			return;
 		}
-		let o = this.#n.templateLength, s = (this.#n.elements.body.thead?.offsetHeight || 0) + (this.#n.elements.body.tfoot?.offsetHeight || 0) + this.#n.elements.body.tbody.head.offsetHeight, c = this.#n.querySelector(".ng-sheet-body").offsetHeight || 0, l = Math.max(a * n - (c - s - n), 0), u = 15e6, d = l > u, f = 1, p = l;
-		d && (f = u / l, p = u), this.#n.elements.scrollHolder.style.height = `${p}px`;
-		let m = d ? e / f : e, h = Math.max(0, a - 1), g = Math.min(m, l), _ = Math.max(0, Math.min(Math.floor(g / n), h));
-		this.#n.elements.left.tbody.body.style.transform = this.#n.elements.body.tbody.body.style.transform = this.#n.elements.right.tbody.body.style.transform = `translate3d(0px, -${g % n}px, 0px)`;
-		let v = this.#r.firstTr, y = v && v.dataset.row !== void 0 ? parseInt(v.dataset.row, 10) : -1;
-		(t || y !== _) && ([
+		let o = (this.#n.elements.body.thead?.offsetHeight || 0) + (this.#n.elements.body.tfoot?.offsetHeight || 0) + this.#n.elements.body.tbody.head.offsetHeight, s = this.#n.querySelector(".ng-sheet-body").offsetHeight || 0, c = Math.max(a * n - (s - o - n) - n, 0), l = 15e6, u = c > l, d = 1, f = c;
+		u && (d = l / c, f = l), this.#n.elements.scrollHolder.style.height = `${f}px`;
+		let p = u ? e / d : e, m = Math.max(0, a - 1), h = Math.min(p, c), g = Math.max(0, Math.min(Math.floor(h / n), m));
+		this.#n.elements.left.tbody.body.style.transform = this.#n.elements.body.tbody.body.style.transform = this.#n.elements.right.tbody.body.style.transform = `translate3d(0px, -${h % n}px, 0px)`;
+		let _ = this.#r.firstTr, v = _ && _.dataset.row !== void 0 ? parseInt(_.dataset.row, 10) : -1;
+		(t || v !== g) && ([
 			this.#n.elements.left.tbody.body,
 			this.#n.elements.body.tbody.body,
 			this.#n.elements.right.tbody.body
 		].forEach((e, t) => {
 			e && e.querySelectorAll("tbody.body tr").forEach((e, t) => {
-				let n = _ + Math.floor(t / o);
+				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;
 					return;
 				}
-				let s = i[n];
-				if (!s) {
+				let o = i[n];
+				if (!o) {
 					e.style.display = "none";
 					return;
 				}
-				let c = s.m._[r.META.INDEX.ROWID];
-				e.style.display = "", this.#h(e, s, c, n);
+				let s = o.m._[r.META.INDEX.ROWID];
+				e.style.display = "", this.#p(e, o, s, n);
 			});
 		}), this.#n.selection.refresh());
 	};
-	#p = (e, t = !1) => {
+	#d = (e, t = !1) => {
 		let n = this.#n.view.getArray() || [], r = n.length;
 		if (r === 0) {
 			this.#n.elements.scrollHolder.style.height = "0px";
@@ -891,12 +909,12 @@ var m = {
 		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 / a;
+				return this.#n.template.height[t] || this.#n.template.height / 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;
+				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;
 			}
 		}, s = 0, c = Array(r);
 		for (let e = 0; e < r; e++) {
@@ -919,7 +937,7 @@ var m = {
 		});
 		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);
+		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",
@@ -941,18 +959,18 @@ var m = {
 					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 && 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);
+					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);
 					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.#h(e, i.record, t, a);
+						this.#p(e, i.record, t, a);
 					}
 				});
 			}
 		}), this.#n.selection.refresh();
 	};
-	#m = (e, t, n, r) => {
+	#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;
@@ -960,14 +978,14 @@ var m = {
 			t !== void 0 && typeof t.refresh == "function" && t?.refresh();
 		});
 	};
-	#h = (e, t, n, r) => {
+	#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();
 		});
 	};
 	initialize = () => {
-		this.#d = !!this.#n.sourceTable.querySelector("tbody tr[grouping='true']"), this.#o = null, this.#i.clear(), this.#r = {
+		this.#l = !!this.#n.sourceTable.querySelector("tbody tr[grouping='true']"), this.#i.clear(), this.#r = {
 			scrollTables: this.#n.querySelectorAll(".ng-sheet-body table"),
 			firstTr: this.#n.querySelector(".ng-sheet-body .ng-container-body tbody.body tr")
 		}, [
@@ -985,62 +1003,52 @@ var m = {
 			this.#i.set(e, i);
 		});
 		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 n = this.#o || 0;
-			(this.#n.view.getArray()?.length || 0) * n <= e.clientHeight || (this.#f(e.scrollTop), this.#n.querySelector("nine-table-vscrollbar").refresh());
+		e && (this.#o = e.clientHeight, this.#m(), this.#g(), this.#u(e.scrollTop, !0), e.addEventListener("scroll", (t) => {
+			if (this.#c) 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());
 		}, { 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.#d) {
+		if (this.#l) {
 			let e = Math.max(r.scrollHeight - r.clientHeight, 1);
 			o = a / Math.max(i - 1, 1) * e;
 		} else {
-			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;
+			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;
 		}
-		this.#u = !0, r.scrollTop = o, this.#f(o), requestAnimationFrame(() => {
+		this.#c = !0, r.scrollTop = o, this.#u(o), requestAnimationFrame(() => {
 			requestAnimationFrame(() => {
-				this.#u = !1, typeof n == "function" && n();
+				this.#c = !1, typeof n == "function" && n();
 			});
 		});
 	}
 	destroy = () => {
-		this.#s &&= (this.#s.disconnect(), null);
-	};
-	#g = () => {
-		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 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));
-		}), r.forEach((e) => e.remove()), this.#o = this.#a.reduce((e, t) => e + t, 0), this.#_();
+		this.#a &&= (this.#a.disconnect(), null);
 	};
-	#_ = () => {
-		if (this.#c > 0 && this.#o > 0) {
-			let e = Math.ceil(this.#c / this.#o), t = this.#e;
-			if (this.#d && this.#n.grouping) {
+	#m = () => {};
+	#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.#l = e + t;
+			this.#s = e + t;
 		}
 	};
-	#v = () => {
+	#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.#y(t);
-		}), this.#b();
+			t && t.querySelector("tbody") && this.#_(t);
+		}), this.#v();
 	};
-	#y = (e) => {
+	#_ = (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) => {
@@ -1058,10 +1066,10 @@ var m = {
 		if (!r) return;
 		r.querySelectorAll("tr").forEach((e) => e.remove());
 		let i = document.createDocumentFragment();
-		for (let e = 0; e < this.#l; e++) n.forEach((e) => i.appendChild(e.cloneNode(!0)));
+		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"));
 	};
-	#b = () => {
+	#v = () => {
 		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);
@@ -1075,14 +1083,14 @@ var m = {
 			}
 		}
 	};
-	#x = () => {
-		this.#n && this.#n instanceof HTMLElement && (this.#s = new ResizeObserver((e) => {
+	#y = () => {
+		this.#n && this.#n instanceof HTMLElement && (this.#a = 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.#c !== e && (this.#c = e, this.#_(), this.#o !== null && (this.#v(), this.refresh()));
+				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()));
 			}
-		}), this.#s.observe(this.#n));
+		}), this.#a.observe(this.#n));
 	};
 }, v = class e {
 	static compile(t) {
@@ -2585,12 +2593,20 @@ var k = class {
 	#f;
 	#p = { table: null };
 	#m;
+	#h = {
+		length: 0,
+		height: 0,
+		heights: []
+	};
 	static SCROLLBAR_SIZE = 16;
 	constructor() {
-		super(), this.#t = this.getRootNode().host, this.#n = new _(this), this.#d = new M(this), this.#E();
+		super(), this.#t = this.getRootNode().host, this.#n = new _(this), this.#d = new M(this), this.#D();
 	}
 	connectedCallback() {
-		this.#x();
+		this.#S();
+	}
+	get template() {
+		return this.#h;
 	}
 	get index() {
 		return this.#e;
@@ -2625,12 +2641,6 @@ var k = class {
 	get elements() {
 		return this.#m;
 	}
-	get template() {
-		return {
-			length: this.#p?.tbody?.tr?.length || 0,
-			trs: this.#p?.tbody?.tr || []
-		};
-	}
 	get isAutoFitCol() {
 		let e = this.getAttribute("auto-fit-col") === "true" || this.#t?.getAttribute("auto-fit-col") === "true", t = this.#p.table?.getAttribute("auto-fit-col") === "true";
 		return e || t;
@@ -2641,7 +2651,7 @@ var k = class {
 	get source() {
 		return this.#p;
 	}
-	get #h() {
+	get #g() {
 		return this.#t.hasAttribute("simple") || this.#t.getAttribute("theme") === "simple";
 	}
 	scrollTo = (e, t) => {
@@ -2661,18 +2671,18 @@ var k = class {
 				let n = this.querySelector(`.ng-sheet-${t} .ng-container-${e}`);
 				n && n.querySelectorAll("table").forEach((e) => e.remove());
 			});
-		}), this.#y(), this.#v(), this.#n.initialize(), this.isAutoFitCol ? this.autoFit(!0) : this.querySelector("nine-table-hscrollbar")?.refresh(), requestAnimationFrame(() => {
-			this.#v(), this.#n?.refresh();
+		}), this.#b(), this.#y(), this.#n.initialize(), this.isAutoFitCol ? this.autoFit(!0) : this.querySelector("nine-table-hscrollbar")?.refresh(), requestAnimationFrame(() => {
+			this.#y(), this.#n?.refresh();
 		}));
 	}
 	refreshLayout() {
 		requestAnimationFrame(() => {
-			this.classList.contains("active") && this.#p.table && (this.#v(), this.isAutoFitCol ? this.autoFit(!0) : this.querySelector("nine-table-hscrollbar")?.refresh(), this.#g(), this.#a?.refreshLayout(), this.#n?.refresh());
+			this.classList.contains("active") && this.#p.table && (this.#y(), this.isAutoFitCol ? this.autoFit(!0) : this.querySelector("nine-table-hscrollbar")?.refresh(), this.#_(), this.#a?.refreshLayout(), this.#n?.refresh());
 		});
 	}
-	#g = () => {
+	#_ = () => {
 		let e = this.querySelector(".ng-container-body thead"), t = this.querySelector(".nodata-overlay");
-		t.style.top = `${e.offsetHeight}px`;
+		t.style.top = `${e?.offsetHeight}px`;
 	};
 	get view() {
 		return !this.#f && this.#t?.data && (this.#f = new A(this)), this.#f;
@@ -2682,10 +2692,10 @@ var k = class {
 	};
 	autoFit = (e = !0) => {
 		requestAnimationFrame(() => {
-			this.#_?.(e);
+			this.#v?.(e);
 		});
 	};
-	#_ = (e = !0) => {
+	#v = (e = !0) => {
 		let t = this.querySelector(".ng-sheet-body .ng-container-body");
 		if (!t) return;
 		let n = this.querySelector(".ng-container-body table colgroup");
@@ -2744,11 +2754,22 @@ var k = class {
 			this.querySelector("nine-table-hscrollbar")?.refresh();
 		}
 	};
-	generate = (e, t) => {
-		e.style.display = "none", this.#e = t, j.initializeTable(this.#t, e), e.style.display = "", this.#p = {
+	generateTemplate = (e, t) => {
+		if (this.#e = t, this.#p = {
 			table: v.compile(e),
 			tbody: { tr: e.querySelectorAll("tbody tr") }
-		}, this.#y(), this.#v(), this.#C(), this.#T(), [
+		}, 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 += e.offsetHeight || 0, this.#h.heights.push(e.offsetHeight || 0);
+		}), this.#h.length = this.#h.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");
+		}
+		this.querySelectorAll("tbody.body tr").forEach((e) => {
+			e.style.display = "none";
+		}), this.querySelector(".ng-container-body table").remove();
+	};
+	generate = () => {
+		this.#b(), this.#y(), this.#w(), this.#E(), [
 			"left",
 			"body",
 			"right"
@@ -2765,7 +2786,7 @@ var k = class {
 			};
 		}), this.#n.initialize(), this.isAutoFitCol ? this.autoFit(!0) : this.querySelector("nine-table-hscrollbar").refresh(), this.#u.initialize(), this.loaded = !0;
 	};
-	#v = () => {
+	#y = () => {
 		[
 			"left",
 			"right",
@@ -2784,7 +2805,7 @@ var k = class {
 			});
 		});
 	};
-	#y = () => {
+	#b = () => {
 		[
 			{
 				selector: ".ng-container-left",
@@ -2799,10 +2820,10 @@ var k = class {
 				type: "right"
 			}
 		].forEach(({ selector: e, type: t }) => {
-			this.querySelector(`.ng-sheet-body ${e}`).appendChild(this.#b(t));
+			this.querySelector(`.ng-sheet-body ${e}`).appendChild(this.#x(t));
 		});
 	};
-	#b = (e) => {
+	#x = (e) => {
 		let t = this.#p.table.cloneNode(!0);
 		return e === "left" ? t.querySelectorAll("col, th, td").forEach((e) => {
 			e.getAttribute("fixed") !== "left" && e.remove();
@@ -2826,13 +2847,13 @@ var k = class {
 		let t = this.querySelector(".ng-sheet-body");
 		t && (t.scrollTop = e);
 	};
-	#x = () => {
-		this.#S(), 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.#h || (this.#c = new k(this)), this.#m.mainBody.addEventListener("scroll", () => {
+	#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", () => {
 			this.querySelector("nine-table-hscrollbar").refresh();
 		});
 	};
-	#S = () => {
-		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.#m = {
+	#C = () => {
+		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\">\n                    \n                    </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.#m = {
 			mainBody: this.querySelector(".ng-sheet-body .ng-container-body"),
 			hscrollbar: this.querySelector("nine-table-hscrollbar"),
 			vscrollbar: this.querySelector("nine-table-vscrollbar"),
@@ -2840,13 +2861,13 @@ var k = class {
 			scrollHolder: this.querySelector(".ng-sheet-body .ng-virtual-height-holder")
 		};
 	};
-	#C = () => {
+	#w = () => {
 		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.#w(r, i, a);
+		this.#T(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.#w(o, s, c);
+		this.#T(o, s, c);
 	};
-	#w = (e, t, n) => {
+	#T = (e, t, n) => {
 		setTimeout(() => {
 			let r = Math.max(e.length, t.length, n.length);
 			for (let i = 0; i < r; i++) {
@@ -2859,7 +2880,7 @@ var k = class {
 			}
 		});
 	};
-	#T = () => {
+	#E = () => {
 		let e = this.querySelector(".ng-sheet-body");
 		if (!e) return;
 		let t = null;
@@ -2879,7 +2900,7 @@ var k = class {
 			}), t = null);
 		});
 	};
-	#E = () => {
+	#D = () => {
 		[this.#d].forEach((e) => {
 			(/* @__PURE__ */ new Set([...Reflect.ownKeys(e), ...Reflect.ownKeys(Object.getPrototypeOf(e))])).forEach((t) => {
 				if (t === "constructor" || String(t).startsWith("#")) return;
@@ -2900,28 +2921,20 @@ var P = class {
 		this.#e = e, this.#t();
 	}
 	#t = () => {
-		this.#r(), new ResizeObserver((e) => {
-			for (let t of e) this.#e.getAttribute("auto-height") === "true" && this.#n();
-		}).observe(this.#e);
+		this.#n(), this.#r();
 	};
 	set loading(e) {
 		e ? this.#e.classList.add("loading") : this.#e.classList.remove("loading");
 	}
 	#n = () => {
-		let e = Array.from(this.#e.shadowRoot.querySelectorAll("nine-table-sheet.active"));
-		if (e.length === 0) return;
-		let t = parseInt(this.#e.getAttribute("max-display-row"), 10) || 10, n = Math.max(...e.map((e) => e.getRowHeight())), r = this.#e.shadowRoot.querySelector("nine-table-toolbar"), i = this.#e.shadowRoot.querySelector("nine-table-sheets-footer"), a = r ? r.getBoundingClientRect().height : 0, o = i ? i.getBoundingClientRect().height : 0, s = N.SCROLLBAR_SIZE, c = t * n + a + o + s;
-		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", 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.15/dist/css/nine-table.css\";"];
-		nine["nine-table"] && nine["nine-table"].cssFile && i.push(`@import "${nine["nine-table"].cssFile}";`), this.#e.shadowRoot.innerHTML = `
+		let e = Array.from(this.#e.children).filter((e) => e.tagName.toUpperCase() === "TABLE"), t = e.length, 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.0.21/dist/css/nine-table.css\";"];
+		nine["nine-table"] && nine["nine-table"].cssFile && r.push(`@import "${nine["nine-table"].cssFile}";`), this.#e.shadowRoot.innerHTML = `
             <style>
-                ${i.join("\n")}
-                ${this.#e.customStyle}
+                ${r.join("\n")}
+                ${this.#e.provider.style.value}
             </style>
             
             <nine-table-toolbar></nine-table-toolbar>
@@ -2931,19 +2944,51 @@ var P = class {
                 <div class="ng-loading-bar"></div>
                 <nine-table-sheets>
                     <nine-table-sheets-body>
-                        ${r}
+                        ${n}
                     </nine-table-sheets-body>
                     <nine-table-sheets-footer></nine-table-sheets-footer>
                 </nine-table-sheets>
                 <nine-table-analysis></nine-table-analysis>
             </nine-table-body>
             <nine-table-footer></nine-table-footer>
-        `, this.#e.shadowRoot.querySelectorAll("nine-table-sheet").forEach((n, r) => {
-			e[r] && setTimeout(() => {
-				n.generate(e[r], r), t && this.#n();
+        `, e.forEach((e) => {
+			j.initializeTable(this.#e, e);
+		}), 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(() => {
+				e.generate(), this.#a && this.#i();
 			});
+		}), setTimeout(() => {
+			this.#e.data.clear();
+		});
+	};
+	#r = () => {
+		this.#e.addEventListener(r.EVENT.ROW_ADDED, () => {
+			this.#a && this.#i();
+		}), this.#e.addEventListener(r.EVENT.ROW_REMOVED, () => {
+			this.#a && this.#i();
 		});
+		let e = 0;
+		new ResizeObserver((t) => {
+			for (let n of t) if (n.target.tagName === "NINE-TABLE") {
+				let t = n.contentRect.height;
+				t !== e && (e = t, this.#a && this.#i());
+			}
+		}).observe(this.#e);
 	};
+	#i = () => {
+		this.#e.shadowRoot.querySelectorAll("nine-table-sheet").forEach((e) => {
+			if (e.index === 0) {
+				n.log(e, e.template.height, e.view.count());
+				let t = (e.querySelector("thead")?.offsetHeight || 0) + (e.querySelector("tfoot")?.offsetHeight || 0) + (e.querySelector("tbody.head")?.offsetHeight || 0), r = this.#e.offsetHeight - e.offsetHeight + t, i = Math.min(e.template.height * e.view.count(), window.innerHeight * .8);
+				this.#e.style.height = r + i + "px";
+			}
+		});
+	};
+	get #a() {
+		return this.#e.getAttribute("auto-height") === "true";
+	}
 }, F = class {
 	#e;
 	#t;
@@ -2984,12 +3029,24 @@ var P = class {
 	constructor(e) {
 		this.#e = e;
 	}
+	provider = {
+		style: { value: "" },
+		add: (e) => {
+			if (!e || typeof e != "object") return;
+			let { style: t, ...n } = e;
+			t && typeof t == "string" && (this.provider.style.value = t), Object.keys(n).length > 0 && setTimeout(() => {
+				Object.entries(n).forEach(([e, t]) => {
+					typeof t == "function" && (this.#e[e] = t);
+				}), this.#e.rerenderer();
+			});
+		}
+	};
 }, L = class {
 	#e;
 	constructor(e) {
 		this.#e = e, ["row"].forEach((e) => {
 			this[e] = new Proxy({}, { get: (t, n) => {
-				let r = this.getActiveSheet();
+				let r = this.#t();
 				if (!r || !r[e]) return;
 				let i = r[e][n];
 				return typeof i == "function" ? (...t) => i.apply(r[e], t) : i;
@@ -2999,7 +3056,7 @@ var P = class {
 	getActiveSheets() {
 		return this.#e.shadow.querySelectorAll("nine-table-sheet.active");
 	}
-	getActiveSheet() {
+	#t() {
 		let e = this.getActiveSheets();
 		return e.length > 0 ? e[0] : null;
 	}
@@ -3010,17 +3067,16 @@ var P = class {
 	#r;
 	#i;
 	#a = 0;
-	#o = "";
 	constructor() {
-		super(), ["NINE-TABLE"].includes(this.tagName) && n.log("Welcome nine-table", "0.0.15"), this.#e = this.attachShadow({ mode: "open" }), this.#t = new o(this), this.#r = new I(this), this.#i = new L(this), this.#l();
+		super(), ["NINE-TABLE"].includes(this.tagName) && n.log("Welcome nine-table", "0.0.21"), 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(() => {
-			this.#a = this.querySelectorAll("table")?.length, this.fields = new s(this), this.exprEngine = new F(this), this.#c(), this.#n = new P(this), this.#s();
+			this.#a = this.querySelectorAll("table")?.length, this.fields = new s(this), this.exprEngine = new F(this), this.#s(), this.#n = new P(this), this.#o();
 		});
 	}
 	disconnectedCallback() {}
-	#s = () => {
+	#o = () => {
 		let e = 0, t = setInterval(() => {
 			e++;
 			let n = this.shadow.querySelectorAll("nine-table-sheet");
@@ -3044,23 +3100,6 @@ var P = class {
 	get data() {
 		return this.#t.data;
 	}
-	get customStyle() {
-		return this.#o;
-	}
-	addProvider(e) {
-		if (!e || typeof e != "object") return;
-		let { style: t, ...n } = e;
-		if (t && typeof t == "string") {
-			this.#o = t;
-			let e = this.#e.getElementById("nine-table-scoped-custom-style");
-			e && (e.textContent = t);
-		}
-		Object.keys(n).length > 0 && setTimeout(() => {
-			Object.entries(n).forEach(([e, t]) => {
-				typeof t == "function" && (this[e] = t);
-			}), this.rerenderer();
-		});
-	}
 	setData(e) {
 		this.#t.data.set(e), this.refresh();
 	}
@@ -3086,7 +3125,7 @@ var P = class {
 	get activeSheet() {
 		return this.shadow.querySelector("nine-table-sheet.active") || null;
 	}
-	#c() {
+	#s() {
 		let e = /* @__PURE__ */ new Set();
 		this.querySelectorAll("[data-source]").forEach((t) => {
 			let n = t.getAttribute("data-source");
@@ -3119,8 +3158,8 @@ var P = class {
 			});
 		});
 	};
-	#l() {
-		[this.#i].forEach((e) => {
+	#c() {
+		[this.#r, this.#i].forEach((e) => {
 			(/* @__PURE__ */ new Set([...Reflect.ownKeys(e), ...Reflect.ownKeys(Object.getPrototypeOf(e))])).forEach((t) => {
 				if (t === "constructor" || String(t).startsWith("#")) return;
 				let n = e[t];