@ninebone/datagrid 0.0.24 → 0.1.2

package/dist/nine-table.js

@@ -287,12 +287,12 @@ var n = new class extends e.constructor {
 			}
 		}));
 	};
-	setValue = (e, t, n) => {
+	setValue = (e, t, n, i = !0) => {
 		e = parseInt(e, 10);
-		let i = this.getHostFields().indexOf(t);
-		if (i < 0) return;
-		let a = this.#u(e), o = this.#t.rawRecords[a];
-		o && (o.v[i] !== n && o.m._[r.META.INDEX.ROW_STATE] !== r.ROW_STATE.INSERT && (o.m._[r.META.INDEX.ROW_STATE] = r.ROW_STATE.UPDATE), o.v[i] = n);
+		let a = this.getHostFields().indexOf(t);
+		if (a < 0) return;
+		let o = this.#u(e), s = this.#t.rawRecords[o];
+		s && (s.v[a] !== n && i && s.m._[r.META.INDEX.ROW_STATE] !== r.ROW_STATE.INSERT && (s.m._[r.META.INDEX.ROW_STATE] = r.ROW_STATE.UPDATE), s.v[a] = n);
 	};
 	getChangedData = (e) => {
 		let t = this.#t.rawRecords;
@@ -1004,7 +1004,9 @@ var m = {
 		});
 		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) => {
-			if (this.#c) return;
+			if (this.#n.querySelectorAll("cell-combo-panel").forEach((e) => {
+				e.classList.remove("active");
+			}), 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 }));
@@ -1027,7 +1029,9 @@ var m = {
 	destroy = () => {
 		this.#a &&= (this.#a.disconnect(), null);
 	};
-	#m = () => {};
+	#m = () => {
+		this.#h();
+	};
 	#h = () => {
 		if (this.#o > 0 && this.#n.template.height > 0) {
 			let e = Math.ceil(this.#o / this.#n.template.height), t = this.#e;
@@ -1063,7 +1067,6 @@ var m = {
 		});
 		if (n.length === 0) return;
 		let r = e.querySelector("tbody.body");
-		if (!r) return;
 		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)));
@@ -1125,16 +1128,17 @@ var m = {
 	}
 }, y = class {
 	#e;
-	#t = {
+	#t;
+	#n = {
 		startRow: -1,
 		startCol: -1,
 		endRow: -1,
 		endCol: -1
 	};
 	constructor(e) {
-		this.#e = e, this.#r();
+		this.#e = e, this.#t = e.getRootNode().host, this.#i();
 	}
-	#n(e) {
+	#r(e) {
 		if (!e) return {
 			dataRow: -1,
 			subRowIndex: -1,
@@ -1163,45 +1167,57 @@ var m = {
 		n && (n.classList.add("selected-start"), n.closest("tr")?.classList.add("selected-start"));
 	}
 	setRange(e, t, n, r) {
-		let i = Math.min(e, n), a = Math.max(e, n), o = Math.min(t, r), s = Math.max(t, r), c = this.#e.querySelectorAll(".ng-container-left, .ng-container-body, .ng-container-right"), l = !0, u = 0;
+		let i = Math.min(e, n), a = Math.max(e, n), o = Math.min(t, r), s = Math.max(t, r);
+		this.#t.tagName === "NINE-TABLE-SIMPLE" && (o = 1, s = 10);
+		let c = this.#e.querySelectorAll(".ng-container-left, .ng-container-body, .ng-container-right"), l = !0, u = 0;
 		for (; l && u < 5;) l = !1, u++, c.forEach((e) => {
 			Array.from(e.querySelectorAll("tbody tr")).filter((e) => e.style.display !== "none").forEach((e) => {
-				let { matrixRow: t } = this.#n(e);
+				let { matrixRow: t } = this.#r(e);
 				t < 0 || e.querySelectorAll("td, th").forEach((e) => {
 					let n = parseInt(e.dataset.col, 10);
-					if (isNaN(n)) return;
-					let r = parseInt(e.rowSpan || 1, 10), c = parseInt(e.colSpan || 1, 10), u = t + r - 1, d = n + c - 1;
-					if (u >= i && t <= a && d >= o && n <= s) {
-						let e = Math.min(i, t), r = Math.max(a, u), c = Math.min(o, n), f = Math.max(s, d);
-						(e !== i || r !== a || c !== o || f !== s) && (i = e, a = r, o = c, s = f, l = !0);
+					if (!isNaN(n) && this.#e.querySelector(`col[data-col="${n}"]`).style.display !== "none") {
+						let r = parseInt(e.rowSpan || 1, 10), c = parseInt(e.colSpan || 1, 10), u = t + r - 1, d = n + c - 1;
+						if (u >= i && t <= a && d >= o && n <= s) {
+							let e = Math.min(i, t), r = Math.max(a, u), c = Math.min(o, n), f = Math.max(s, d);
+							(e !== i || r !== a || c !== o || f !== s) && (i = e, a = r, o = c, s = f, l = !0);
+						}
 					}
 				});
 			});
 		});
-		this.#t = {
-			startRow: i,
-			startCol: o,
-			endRow: a,
-			endCol: s
+		let d = (e) => Number.isFinite(e) ? e : -1;
+		this.#n = {
+			startRow: d(i),
+			startCol: d(o),
+			endRow: d(a),
+			endCol: d(s)
 		}, this.render();
 	}
+	clear = () => {
+		this.#n = {
+			startRow: -1,
+			startCol: -1,
+			endRow: -1,
+			endCol: -1
+		};
+	};
 	get minRow() {
-		return this.#t.startRow;
+		return this.#n.startRow;
 	}
 	get maxRow() {
-		return this.#t.endRow;
+		return this.#n.endRow;
 	}
 	get minCol() {
-		return this.#t.startCol;
+		return this.#n.startCol;
 	}
 	get maxCol() {
-		return this.#t.endCol;
+		return this.#n.endCol;
 	}
 	refresh = () => {
 		this.render();
 	};
 	render = () => {
-		let { startRow: e, startCol: t, endRow: n, endCol: r } = this.#t, i = this.#e.querySelectorAll(".ng-container-left, .ng-container-body, .ng-container-right");
+		let { startRow: e, startCol: t, endRow: n, endCol: r } = this.#n, i = this.#e.querySelectorAll(".ng-container-left, .ng-container-body, .ng-container-right");
 		i.forEach((e) => {
 			e.querySelectorAll(".selected, .selected-top, .selected-bottom, .selected-left, .selected-right, .selected-start").forEach((e) => {
 				e.classList.remove("selected", "selected-top", "selected-bottom", "selected-left", "selected-right", "selected-start");
@@ -1210,7 +1226,7 @@ var m = {
 			});
 		}), e < 0 || t < 0 || i.forEach((i) => {
 			Array.from(i.querySelectorAll("tbody tr")).filter((e) => e.style.display !== "none").forEach((a) => {
-				let { matrixRow: o } = this.#n(a);
+				let { matrixRow: o } = this.#r(a);
 				o < 0 || (o >= e && o <= n && i.querySelectorAll(`tbody tr[data-index="${a.dataset.index}"]`).forEach((e) => {
 					e.classList.add("selected");
 				}), a.querySelectorAll("td, th").forEach((i) => {
@@ -1222,14 +1238,14 @@ var m = {
 			});
 		});
 	};
-	#r() {
+	#i() {
 		let e = this.#e.querySelector(".ng-sheet-body");
 		e && e.addEventListener("mousedown", (e) => {
 			if (e.button !== 0) return;
 			let t = e.target.closest("td, th");
 			if (!t || t.dataset.row === void 0 || t.dataset.col === void 0) return;
 			this.#e.style.userSelect = "none", this.#e.style.webkitUserSelect = "none";
-			let n = t.closest("tr"), { matrixRow: r } = this.#n(n), i = parseInt(t.dataset.col, 10);
+			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;
@@ -1248,7 +1264,7 @@ var m = {
 					}
 				}
 				if (!t || t.dataset.row === void 0 || t.dataset.col === void 0) return;
-				let n = t.closest("tr"), { matrixRow: s } = this.#n(n), c = parseInt(t.dataset.col, 10);
+				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);
@@ -1286,7 +1302,7 @@ var m = {
 					});
 					break;
 				case "ArrowRight":
-					this.#m(t) || t.scrollIntoView({
+					this.#m(t) && this.#p(t) || t.scrollIntoView({
 						inline: "nearest",
 						block: "nearest"
 					});
@@ -1449,14 +1465,20 @@ var m = {
 			let t = e.target.closest("td, th");
 			t && t.dataset.index !== void 0 && t.dataset.col !== void 0 && (t.querySelector("cell-row-indicator") ? this.#e.row.focus(t.dataset.index) : this.currentCell = t);
 		}), this.#e.addEventListener("keydown", (e) => {
-			[
+			let t = e.target.closest("td,th");
+			t && this.#e.contains(t) && (this.#t.tagName === "NINE-TABLE-SIMPLE" ? [
+				"ArrowUp",
+				"ArrowDown",
+				"ArrowLeft",
+				"ArrowRight"
+			].includes(e.code) && this.moveCell(e) : [
 				"Enter",
 				"Tab",
 				"ArrowUp",
 				"ArrowDown",
 				"ArrowLeft",
 				"ArrowRight"
-			].includes(e.code) && this.moveCell(e);
+			].includes(e.code) ? this.moveCell(e) : ["Space"].includes(e.code) && e.preventDefault());
 		});
 	}
 }, x = 2, S = class {
@@ -1495,9 +1517,7 @@ var m = {
 						e.style.width = `${r}px`;
 					}) : (t.style.flex = `0 0 ${r}px`, t.style.width = `${r}px`, t.style.minWidth = `${r}px`, t.style.maxWidth = `${r}px`, n.forEach((e) => {
 						e.style.width = `${r}px`, e.style.minWidth = `${r}px`, e.style.maxWidth = `${r}px`, Object.entries(i).forEach(([t, n]) => {
-							e.querySelectorAll(`th[data-col="${t}"], td[data-col="${t}"]`).forEach((e) => {
-								e.style.width = `${n}px`, e.style.minWidth = `${n}px`, e.style.maxWidth = `${n}px`;
-							});
+							e.querySelectorAll(`th[data-col="${t}"], td[data-col="${t}"]`).forEach((e) => {});
 						});
 					}));
 				});
@@ -2187,7 +2207,7 @@ var w = class {
 				}
 			}
 			e.m._[r.META.INDEX.FILTER][n] = o;
-		}), this.#e.invalidate();
+		}), this.#e.selection.clear(), this.#e.invalidate();
 	}
 };
 customElements.get("nine-table-filter-panel") || customElements.define("nine-table-filter-panel", E), customElements.get("nine-table-filter-button") || customElements.define("nine-table-filter-button", D);
@@ -2511,7 +2531,7 @@ var k = class {
 		});
 	}
 	static #u(e, t) {
-		let n = e.getAttribute("row-indicator") === "true" ? 48 : 0, r = e.querySelector("colgroup"), i = document.createElement("col");
+		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 t = Array.from(e.querySelectorAll("tr"));
 			if (t.length === 0) return;
@@ -2528,10 +2548,7 @@ var k = class {
 				let r = n + t, a = e.querySelector(`colgroup col[data-col="${r}"]`);
 				a && (i += parseInt(a.getAttribute("width"), 10) || 100);
 			}
-			if (i > 0) {
-				let e = `${i}px`;
-				t.style.width = e, t.style.minWidth = e, t.style.maxWidth = e;
-			}
+			i > 0 && `${i}`;
 		});
 	}
 }, M = class {
@@ -2540,16 +2557,52 @@ var k = class {
 	constructor(e) {
 		this.#e = e, this.#t = e.getRootNode().host;
 	}
+	col = {
+		setWidth: (e, t, n = null) => {
+			Array.from(this.#e.querySelectorAll(`table colgroup col[data-col="${e}"]`)).forEach((e) => {
+				e.setAttribute("width", t), e.style.width = `${t}px`;
+			});
+		},
+		getWidth: (e) => {
+			let t = this.#e.querySelector(`table colgroup col[data-col="${e}"]`);
+			return t && parseInt(t.getAttribute("width") || t.style.width, 10) || 0;
+		},
+		measureAutoFitColumnWidth: (e, t) => {
+			let n = this.#t.fields.get().indexOf(t.dataset.bind), r = window.getComputedStyle(t).font || "12px sans-serif", i = 32;
+			return this.#e.view.getArray().forEach((e, a) => {
+				let o = String(t.dataset.expr ? this.#t.exprEngine.evaluate(t.dataset.expr, e, a) : e.v[n] ?? "").trim(), s = nine.measureTextSize(o, r);
+				s.width && s.width > i && (i = s.width);
+			}), i;
+		},
+		autoFit: (e) => {
+			let t = this.#e.querySelector(`thead th[data-col="${e}"]`), n = this.#e.querySelector(`tbody.body [data-col="${e}"]`);
+			t && n && this.#t.execute(() => {
+				let r = this.col.measureAutoFitColumnWidth(t, n);
+				r !== null && this.col.setWidth(e, r);
+			});
+		},
+		setVisible: (e, t) => {
+			this.#e.querySelectorAll(`table colgroup col[data-col="${e}"], th[data-col="${e}"], td[data-col="${e}"]`).forEach((e) => {
+				e.style.display = t ? "" : "none";
+			}), this.#e.rowManager?.refresh();
+		}
+	};
 	row = {
-		at: () => Math.floor(this.#e.selection.minRow / this.#e.template.length),
-		focus: (e) => {
-			this.#e.row.isVisible(e) || this.#e.row.moveTo(e);
-			let t = this.#e.querySelectorAll(`tbody.body tr[data-index="${e}"]`), n = Array.from(t, (e) => parseInt(e.dataset.matrixRow, 10)).filter((e) => !isNaN(e)), r = [];
-			return t.forEach((e) => {
+		at: () => this.#e.selection.minRow < 0 ? -1 : Math.floor(this.#e.selection.minRow / this.#e.template.length),
+		focus: async (e, t) => {
+			this.#e.row.isVisible(e) ? await new Promise((e) => requestAnimationFrame(e)) : await new Promise((t) => {
+				this.#e.row.moveTo(e, () => {
+					t();
+				});
+			});
+			let n = this.#e.querySelectorAll(`tbody.body tr[data-index="${e}"]`), r = Array.from(n, (e) => parseInt(e.dataset.matrixRow, 10)).filter((e) => !isNaN(e)), i = [];
+			if (n.forEach((e) => {
 				e.querySelectorAll("td, th").forEach((e) => {
-					parseInt(e.dataset.col, 10) != 0 && r.push(parseInt(e.dataset.col, 10));
+					parseInt(e.dataset.col, 10) != 0 && i.push(parseInt(e.dataset.col, 10));
 				});
-			}), this.#e.selection.setRange(Math.min(...n), Math.min(...r), Math.max(...n), Math.max(...r));
+			}), r.length === 0 || i.length === 0) return;
+			let a = this.#e.selection.setRange(Math.min(...r), Math.min(...i), Math.max(...r), Math.max(...i));
+			return typeof t == "function" && t(), a;
 		},
 		isVisible: (e) => {
 			let t = this.#e.querySelector(".ng-sheet-body"), n = t.querySelectorAll(`.ng-container-body tbody.body tr[data-index="${e}"]`);
@@ -2566,7 +2619,9 @@ var k = class {
 		},
 		add: (e, t) => this.#t.data.add(e, t),
 		moveTo: (e, t) => {
-			this.#e.row.isVisible(e) || this.#e.scrollTo(e, t);
+			this.#e.row.isVisible(e) ? typeof t == "function" && t() : this.#e.scrollTo(e, () => {
+				typeof t == "function" && t();
+			});
 		},
 		insert: (e, t, n = !0) => {
 			let i = this.#e.view.get(e).m._[r.META.INDEX.ROWID], a = this.#t.data.insert(i, t, n);
@@ -2755,18 +2810,24 @@ var k = class {
 		}
 	};
 	generateTemplate = (e, t) => {
-		if (this.#e = t, this.#p = {
+		let n = (e) => {
+			if (["NINE-TABLE-SIMPLE"].includes(this.#t.tagName)) {
+				let t = this.#t.closest("nine-table-filter-panel, cell-combo-panel");
+				t && (e ? t.classList.add("active") : t.classList.remove("active"));
+			}
+		};
+		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 += e.offsetHeight || 0, this.#h.heights.push(e.offsetHeight || 0);
+			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) {
 			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();
+		}), this.querySelector(".ng-container-body table").remove(), n(!1);
 	};
 	generate = () => {
 		this.#b(), this.#y(), this.#w(), this.#E(), [
@@ -2787,7 +2848,7 @@ var k = class {
 		}), this.#n.initialize(), this.isAutoFitCol ? this.autoFit(!0) : this.querySelector("nine-table-hscrollbar").refresh(), this.#u.initialize(), this.loaded = !0;
 	};
 	#y = () => {
-		[
+		this.#t.classList.contains("combo-list") || [
 			"left",
 			"right",
 			"body"
@@ -2848,12 +2909,14 @@ 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", () => {
-			this.querySelector("nine-table-hscrollbar").refresh();
+		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.querySelectorAll("nine-table-filter-panel,cell-combo-panel").forEach((e) => {
+				e.classList.remove("active");
+			}), this.querySelector("nine-table-hscrollbar").refresh();
 		});
 	};
 	#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 = {
+		this.setAttribute("tabindex", "0"), 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            \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"),
@@ -2930,7 +2993,7 @@ var P = class {
 		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.24/dist/css/nine-table.css\";"];
+		}).join(""), r = ["@import \"https://cdn.jsdelivr.net/npm/@ninebone/datagrid@0.1.2/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")}
@@ -2980,9 +3043,8 @@ var P = class {
 	#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";
+				let t = (e.querySelector("thead")?.offsetHeight || 0) + (e.querySelector("tfoot")?.offsetHeight || 0) + (e.querySelector("tbody.head")?.offsetHeight || 0), n = this.#e.offsetHeight - e.offsetHeight + t, r = Math.min(e.template.height * e.view.count(), window.innerHeight * .8);
+				this.#e.style.height = n + r + "px";
 			}
 		});
 	};
@@ -3044,7 +3106,7 @@ var P = class {
 }, L = class {
 	#e;
 	constructor(e) {
-		this.#e = e, ["row"].forEach((e) => {
+		this.#e = e, ["col", "row"].forEach((e) => {
 			this[e] = new Proxy({}, { get: (t, n) => {
 				let r = this.#t();
 				if (!r || !r[e]) return;
@@ -3068,7 +3130,7 @@ var P = class {
 	#i;
 	#a = 0;
 	constructor() {
-		super(), ["NINE-TABLE"].includes(this.tagName) && n.log("Welcome nine-table", "0.0.24"), 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.1.2"), 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(() => {
@@ -3189,6 +3251,9 @@ var z = class extends HTMLElement {
 	constructor() {
 		super();
 	}
+	get #a() {
+		return this.#r.getAttribute("update-row-state") === "false";
+	}
 	get host() {
 		return this.#e;
 	}
@@ -3275,7 +3340,7 @@ var z = class extends HTMLElement {
 	set value(e) {
 		if (!this.#r || !this.#e?.data) return;
 		let t = parseInt(this.#n.dataset.row, 10), n = this.#r.dataset.bind;
-		!isNaN(t) && n && this.#e.data.setValue(t, n, e);
+		!isNaN(t) && n && this.#e.data.setValue(t, n, e, this.#a);
 	}
 	get row() {
 		return parseInt(this.#r?.dataset?.row, 10);
@@ -3843,23 +3908,31 @@ var Y = class extends HTMLElement {
 	#t;
 	#n;
 	#r = !1;
+	#i;
+	#a;
+	#o;
 	constructor() {
 		super();
 	}
 	connectedCallback() {
-		this.#u(), this.#l();
+		this.#x(), this.#i = this.querySelector("nine-table-simple"), setTimeout(() => {
+			this.#a = this.#i.shadowRoot.querySelector("nine-table-sheet"), this.#b();
+		});
 	}
-	#i = (e, t, n, r, i) => {
+	#s = (e, t, n, i) => {
 		let a = this.querySelector("nine-table-simple");
 		if (!a || !e || e.length === 0) return;
-		let o = this.#e.getAttribute("items"), s = [];
+		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;
-		a.shadowRoot.querySelector(".ng-container-left").style.display = r ? "" : "none", a.shadowRoot.querySelectorAll("table colgroup col, tbody td").forEach((e, t) => {
+		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 l = e.map((e) => {
+		let u = e.map((e) => {
 			let n = {
 				CHK: "N",
 				k: t && e[t] !== void 0 ? e[t] : e[0] === void 0 ? "" : e[0]
@@ -3868,58 +3941,130 @@ var Y = class extends HTMLElement {
 				n[`tmp${r + 1}`] = e[t] === void 0 ? e[r] === void 0 ? "" : e[r] : e[t];
 			}), n;
 		});
-		if (a.data.set(l), r && this.#e.value) {
-			let e = String(this.#e.value).split(i || ",");
-			a.data.getValidData().forEach((t) => {
-				e.includes(String(t.v[1])) && (t.v[0] = "Y");
-			}), a.refreshData();
-		}
+		a.addEventListener(r.EVENT.ROW_ADDED, () => {
+			setTimeout(() => {
+				this.style.opacity = "", this.classList.add("active"), a.shadowRoot.querySelectorAll("colgroup col").forEach((e, t) => {
+					let n = parseInt(e.dataset.col, 10);
+					n >= 2 && e.style.display !== "none" && l.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) => {
+						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);
+				} else {
+					let t = this.#e.value, n = e.indexOf("k"), r = this.#a.view.getArray().findIndex((e, r) => e.v[n] === t);
+					this.#_(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);
+	};
+	#c = (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;
+	};
+	#u = (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.classList.add("active");
-		let o = this.querySelector("nine-table-simple");
-		if (!o || !t) return;
-		this.querySelector(".search-input").value = "", this.querySelector("#chkAll").checked = !0, t.length > 10 ? this.classList.add("expand") : this.classList.remove("expand"), i ? this.classList.add("multi") : this.classList.remove("multi");
-		let s = e.closest("nine-table-sheet"), c = e.querySelector(".btn1");
-		if (!c || !s) return;
-		let l = c.getBoundingClientRect(), u = s.getBoundingClientRect(), d = l.left - u.left, f = l.bottom - u.top + 2, p = this.offsetWidth || 250, m = this.offsetHeight || 250;
-		if (d + p > u.width && (d = Math.max(0, u.width - p - 5)), d < 0 && (d = 5), f + m > u.height) {
-			let e = l.top - u.top - m - 2;
-			f = e >= 0 ? e : Math.max(0, u.height - m - 5);
-		}
-		this.style.left = `${d}px`, this.style.top = `${f}px`, setTimeout(() => {
-			this.#i(t, n, r, i, a);
-			let e = o.shadowRoot.querySelector(".ng-container-body table tbody.body");
-			e.__hasClickEvent ||= (e.addEventListener("mousedown", (e) => {
-				e.target.closest("tr") && (i || this.#a(e));
-			}), !0);
+		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;
+			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);
 		}, 100);
 	};
 	close = () => {
 		this.classList.remove("active"), this.#r = !1, this.#e && this.#e.cell && this.#e.cell.focus();
 	};
-	#a = (e) => {
-		let t = e.target.closest("nine-table-sheet"), n = e.target.closest("tr"), r = parseInt(n.dataset.row, 10), i = t.view.get(r);
-		this.#e.value = i.k, this.#e.sheet.rowManager.refresh(!0), this.close();
+	#d = (e) => {
+		let t = e.target.closest("th,td");
+		if (this.#i.classList.contains("multi")) {
+			let e = parseInt(t?.dataset.index, 10);
+			this.#g(e);
+		} else parseInt(t?.dataset.col, 10) >= 2 && this.#h();
 	};
-	#o = () => {
-		let e = this.querySelector("nine-table-simple").data.getValidData(), t = [];
-		e.forEach((e) => {
-			e.v[0] === "Y" && t.push(e.v[1]);
-		}), this.#e.value = t.join(this.#e.getAttribute("multi-separator") || ","), this.#e.sheet.rowManager.refresh(!0), this.close();
+	#f = (e) => {
+		switch (e.code) {
+			case "Enter":
+			case "ArrowDown":
+				let e = this.#i.row.at();
+				e < 0 ? this.#_(0) : this.#_(e);
+				break;
+			case "Tab": this.#_(this.#i.row.at());
+		}
 	};
-	#s = (e) => {
-		let t = this.querySelector("nine-table-simple"), n = e.target.checked ? "Y" : "N";
-		t.data.getValidData().forEach((e) => {
-			e.v[0] = n;
-		}), t.refreshData();
+	#p = (e) => {
+		let t;
+		switch (e.code) {
+			case "Escape":
+				this.close();
+				break;
+			case "Enter":
+				this.classList.contains("multi") ? this.#m() : this.#h();
+				break;
+			case "Tab":
+				this.classList.contains("expand") && (e.preventDefault(), this.querySelector("input[type='text']").focus());
+				break;
+			case "ArrowDown":
+				t = this.#i.row.at(), t < 0 && this.#_(0);
+				break;
+			case "Space": e.preventDefault(), ["TH", "TD"].includes(e.target.tagName) && this.#g(this.#i.row.at());
+		}
 	};
-	#c = (e) => {
-		let t = e.target.value.toLowerCase(), n = this.querySelector("nine-table-simple");
-		n.data.getValidDataNF().forEach((e) => {
-			let n = Object.values(e.v).some((e) => e != null && String(e).toLowerCase().includes(t));
-			e.__ng.filtered = !n;
-		}), n.data.resetRecords(), n.dataManager.viewRecords.reset();
+	#m = () => {
+		let e = this.#i.fields.get(), t = e.indexOf("k"), n = e.indexOf("CHK"), r = [];
+		this.#a.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();
+	};
+	#h = () => {
+		let e = this.#i.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();
+		}
+	};
+	#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();
+		}
+	};
+	#_ = (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, () => {
+			setTimeout(() => {
+				let t = this.#a.querySelector(`tr[data-index="${e}"] td[data-col="2"]`);
+				this.#a.navigation.currentCell = t, t.focus(), this.#a.invalidate();
+			});
+		});
+	};
+	#v = (e) => {
+		let t = this.#i.fields.get().indexOf("CHK");
+		this.#i.data.getArray().forEach((n) => {
+			n.v[t] = e.target.checked ? "Y" : "N";
+		}), this.#a.invalidate();
+	};
+	#y = (e) => {
+		let t = e.target.value.toLowerCase().trim();
+		if (!t) this.#a.filtering.clear();
+		else {
+			let e = this.#i.data.getArray(), n = this.#i.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)] });
+		}
 	};
 	get isOpen() {
 		return this.#r;
@@ -3927,13 +4072,13 @@ var Y = class extends HTMLElement {
 	get targetCell() {
 		return this.#e;
 	}
-	#l = () => {
-		this.querySelector(".search-input").addEventListener("input", this.#c), this.querySelector("#btnOk").addEventListener("click", this.#o), this.querySelector("#chkAll").addEventListener("change", this.#s), document.addEventListener("mousedown", (e) => {
+	#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) => {
 			(e.composedPath ? e.composedPath() : []).includes(this) || this.close();
 		});
 	};
-	#u = () => {
-		this.innerHTML = "\n            <div class=\"head\">\n                <input type=\"text\" class=\"search-input\" placeholder=\"Search...\" />\n            </div>\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                <div>\n                    <input id=\"chkAll\" type=\"checkbox\" checked>\n                    <label for=\"chkAll\">Select All</label>\n                </div>\n                <button id=\"btnOk\">OK</button>\n            </div>\n        ";
+	#x = () => {
+		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        ";
 	};
 };
 customElements.get("cell-combo-panel") || customElements.define("cell-combo-panel", Y);
@@ -3950,34 +4095,16 @@ var X = class extends H {
 		super();
 	}
 	connectedCallback() {
-		this.#u(), super.connectedCallback(), this.#n = super.cell.getAttribute("key-name") || "k", this.#r = super.cell.getAttribute("value-name") || "v", this.#i = super.cell.getAttribute("multi") === "true", this.#a = super.cell.getAttribute("multi-separator") || ",", this.#s(), this.#c();
+		super.connectedCallback(), this.#l();
 	}
 	rerenderer = () => {
-		this.#s(), this.refresh();
-	};
-	#s = () => {
-		if (!super.sheet || !super.cell) return;
-		let e = super.cell?.getAttribute("data-source");
-		e && (this.#t = super.getExprValue(e, super.tr.data, super.tr.dataset.row));
-	};
-	#c = () => {
-		this.querySelectorAll("button").forEach((e) => {
-			e.addEventListener("click", (e) => {
-				e.stopPropagation(), this.#l();
-			});
-		});
-	};
-	#l = () => {
-		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);
-	};
-	#u = () => {
-		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");
+		this.#u(), this.refresh();
 	};
 	refresh = () => {
 		let e = super.refresh();
-		return this.#e && (this.#e.textContent = this.#d() || "Select", this.#f()), e;
+		return this.#e && (this.#e.textContent = this.#s() || "Select", this.#c()), e;
 	};
-	#d = () => {
+	#s = () => {
 		if (!this.value || !Array.isArray(this.#t)) return "";
 		if (this.#i) {
 			let e = String(this.value).split(this.#a);
@@ -3988,7 +4115,7 @@ var X = class extends H {
 			return e ? e[this.#r] : this.value;
 		}
 	};
-	#f = () => {
+	#c = () => {
 		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) {
@@ -3996,6 +4123,29 @@ var X = class extends H {
 			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();
+	};
+	#u = () => {
+		if (!super.sheet || !super.cell) return;
+		let e = super.cell?.getAttribute("data-source");
+		e && (this.#t = super.getExprValue(e, super.tr.data, super.tr.dataset.row));
+	};
+	#d = () => {
+		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 = () => {
+		this.querySelectorAll("button").forEach((e) => {
+			e.addEventListener("click", (e) => {
+				e.stopPropagation(), this.#p();
+			});
+		}), this.cell.addEventListener("keydown", (e) => {
+			["Space"].includes(e.code) && this.#p();
+		});
+	};
+	#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);
+	};
 	get dataSource() {
 		return this.#t;
 	}