ninegrid2 6.246.0 → 6.248.0

package/dist/bundle.cjs.js

@@ -18114,12 +18114,7 @@ class ngFilterPanel extends HTMLElement
 
 		grd.data.resetRecords();
 		
-		if (this.#timer) {
-			console.log("-------------", this.#timer);
-			clearTimeout(this.#timer);
-			console.log("===============", this.#timer);
-			this.#timer = null;
-		}
+		clearTimeout(this.#timer);
 		this.#timer = setTimeout(() => {
 			grd.dataManager.viewRecords.reset();
 			grd.dataManager.viewRecords.touch();
@@ -18133,108 +18128,68 @@ class ngFilterPanel extends HTMLElement
 
 	open = (filterButton) => {
 
-		//const owner = this.shadow.closest("nine-grid");
-
 		/** 위치 */
 		const cell = filterButton.closest("th,td");
 
-		const filterButtonRect = filterButton.getBoundingClientRect();
-		const ownerRect = this.#owner.getBoundingClientRect();
-		const cellRect = cell.getBoundingClientRect();
-		const targetRect = this.getBoundingClientRect();
-
-		let l = filterButtonRect.left - ownerRect.left;
-		if (l < 0) l = 0;
-		if (l + targetRect.width > ownerRect.width) l = ownerRect.width - targetRect.width - 5;
-
-		const t = cellRect.top + cellRect.height - ownerRect.top;
+		const { left: btnLeft } = filterButton.getBoundingClientRect();
+		const { left: ownerLeft, width: ownerWidth, top: ownerTop } = this.#owner.getBoundingClientRect();
+		const { top: cellTop, height: cellHeight } = cell.getBoundingClientRect();
+		const { width: targetWidth } = this.getBoundingClientRect();
 
-		this.style.left = `${l}px`; // ✅ 위치 설정
-		this.style.top = `${t}px`;
+		let l = Math.max(0, btnLeft - ownerLeft);
+		l = Math.min(l, ownerWidth - targetWidth - 5);
 
-		
-
-		//console.log(this, owner, filterButton.filterOptions, colnms);
-		
-		var col = filterButton.closest('th,td').dataset.col;
-		this.col = col;
+		const t = cellTop + cellHeight - ownerTop;
 
-		this.#button = filterButton;
-		
-		this.style.display = 'flex';
+		Object.assign(this.style, { left: `${l}px`, top: `${t}px`, display: "flex" });
 		this.classList.add("loading");
 
-		
 		this.shadowRoot.querySelector("input[type=text]").value = "";
 
-
-		//$(this.shadowRoot).find("input[type=text]").val("");
-
 		setTimeout(() => {
-
+			const data = this.#owner.data.getValidDataNF();
+			const col = cell.dataset.col;
+			this.col = col;
+			this.#button = filterButton;
 			
-			let data = this.#owner.data.getValidDataNF();
-			
-			var ds = [];
-			filterButton.filterOptions.forEach((filterOption,i) => {
-
-				ds.push({
-					LVL: 1,
-					CHK: 'N',
-					DATA2: '<span class="group">' + $(filterButton).closest('th,td').text() + (filterButton.filterOptions.length > 1 ? ` #${i+1} (${filterOption.colnm})` : '') + '</span>',
-				});
+			const ds = filterButton.filterOptions.map((filterOption, i) => {
+				const groupLabel = `<span class="group">${cell.textContent}${filterButton.filterOptions.length > 1 ? ` #${i + 1} (${filterOption.colnm})` : ""}</span>`;
 
-				/**
-				var cell = $(`[data-col=${col}][data-bind=${filterOption.colnm}]`, this.#owner.template);
-				var expr = cell.attr("data-expr");
-				var exprFunc = (expr) ? this.#owner.exprFunction(expr) : null;
-				*/
-				
-				const cell = ninegrid.j.querySelectorAll(`[data-col="${col}"][data-bind="${filterOption.colnm}"]`, this.#owner.tmpl).elem();
-				const expr = cell.getAttribute("data-expr");
-				const exprFunc = (expr) ? this.#owner.exprFunction(expr) : null;
+				const cellEl = this.#owner.activeTmpl.querySelector(`[data-col="${col}"][data-bind="${filterOption.colnm}"]`);
+				const expr = cellEl?.getAttribute("data-expr");
+				const exprFunc = expr ? this.#owner.exprFunction(expr) : null;
 
-				var data2 = [];
-				for (var rowData of data) {
-					var idx = this.#owner.fields.indexOf(filterOption.colnm);
-					
-					if (expr) {
-						var o = this.#owner.data.conv(rowData);
-						data2.push({v:o[filterOption.colnm],v2:exprFunc(o, rowData.__ng.rowidx, this.#owner.data)});
-					}
-					else {
-						data2.push({v:rowData.v[idx],v2:rowData.v[idx]});
-					}
-				}
-
-				console.log(data, data2);
-
-				[...new Set(data2.sort( (a,b) => { return (a.v2||'') > (b.v2||'') ? 1 : ((a.v2||'') < (b.v2||'') ? -1 : 0); } ).map((m) => JSON.stringify(m)))].map((m) => JSON.parse(m)).forEach(o => {
-					console.log(filterOption, o);
-					ds.push({
-						LVL		: 2,
-						DATA	: o.v,
-						DATA2	: o.v2 || ` <span class="empty">(empty)</span> ${o.v}`,
-						COLNM	: filterOption.colnm,
-						CHK		: filterOption.data.length == 0 || filterOption.data.nineBinarySearch(o.v || '') >= 0 ? "Y" : "N",
-					});
+				const data2 = data.map(rowData => {
+					const idx = this.#owner.fields.indexOf(filterOption.colnm);
+					return expr ? { v: rowData.v[idx], v2: exprFunc(this.#owner.data.conv(rowData), rowData.__ng.rowidx, this.#owner.data) } : { v: rowData.v[idx], v2: rowData.v[idx] };
 				});
-			});
+
+				return [
+					{ LVL: 1, CHK: "N", DATA2: groupLabel },
+					...[...new Set(data2.map(JSON.stringify))]
+						.map(JSON.parse)
+						.sort((a, b) => (a.v2 || "") > (b.v2 || "") ? 1 : (a.v2 || "") < (b.v2 || "") ? -1 : 0)
+						.map(o => ({
+							LVL: 2,
+							DATA: o.v,
+							DATA2: o.v2 || ` <span class="empty">(empty)</span> ${o.v}`,
+							COLNM: filterOption.colnm,
+							CHK: filterOption.data.length === 0 || filterOption.data.nineBinarySearch(o.v || "") >= 0 ? "Y" : "N",
+						}))
+				];
+			}).flat();
 			
 			const grd = this.shadowRoot.querySelector("nine-grid");
 			//grd.dataSource = ds;
 			grd.fields.add(["DATA","DATA2","COLNM"]);
-			
 			grd.data.set(ds);
 			
 			// ✅ 데이터 필터링 및 체크 상태 결정
 			const checkbox = this.shadowRoot.querySelector("input[type=checkbox]");
-			checkbox.checked = grd.data.getValidData().filter(item => item.LVL == 2 && item.CHK != "Y").length === 0; // ✅ 체크 상태 설정
+			checkbox.checked = grd.data.getValidData().every(item => !(item.LVL === 2 && item.CHK !== "Y"));
 
 			this.shadowRoot.querySelector("input").focus();
-			
 			this.classList.remove("loading");
-			//ninegrid.j.querySelectorAll(this).removeClass("loading");
 		});
 	};
 }

package/dist/bundle.esm.js

@@ -18112,12 +18112,7 @@ class ngFilterPanel extends HTMLElement
 
 		grd.data.resetRecords();
 		
-		if (this.#timer) {
-			console.log("-------------", this.#timer);
-			clearTimeout(this.#timer);
-			console.log("===============", this.#timer);
-			this.#timer = null;
-		}
+		clearTimeout(this.#timer);
 		this.#timer = setTimeout(() => {
 			grd.dataManager.viewRecords.reset();
 			grd.dataManager.viewRecords.touch();
@@ -18131,108 +18126,68 @@ class ngFilterPanel extends HTMLElement
 
 	open = (filterButton) => {
 
-		//const owner = this.shadow.closest("nine-grid");
-
 		/** 위치 */
 		const cell = filterButton.closest("th,td");
 
-		const filterButtonRect = filterButton.getBoundingClientRect();
-		const ownerRect = this.#owner.getBoundingClientRect();
-		const cellRect = cell.getBoundingClientRect();
-		const targetRect = this.getBoundingClientRect();
-
-		let l = filterButtonRect.left - ownerRect.left;
-		if (l < 0) l = 0;
-		if (l + targetRect.width > ownerRect.width) l = ownerRect.width - targetRect.width - 5;
-
-		const t = cellRect.top + cellRect.height - ownerRect.top;
+		const { left: btnLeft } = filterButton.getBoundingClientRect();
+		const { left: ownerLeft, width: ownerWidth, top: ownerTop } = this.#owner.getBoundingClientRect();
+		const { top: cellTop, height: cellHeight } = cell.getBoundingClientRect();
+		const { width: targetWidth } = this.getBoundingClientRect();
 
-		this.style.left = `${l}px`; // ✅ 위치 설정
-		this.style.top = `${t}px`;
+		let l = Math.max(0, btnLeft - ownerLeft);
+		l = Math.min(l, ownerWidth - targetWidth - 5);
 
-		
-
-		//console.log(this, owner, filterButton.filterOptions, colnms);
-		
-		var col = filterButton.closest('th,td').dataset.col;
-		this.col = col;
+		const t = cellTop + cellHeight - ownerTop;
 
-		this.#button = filterButton;
-		
-		this.style.display = 'flex';
+		Object.assign(this.style, { left: `${l}px`, top: `${t}px`, display: "flex" });
 		this.classList.add("loading");
 
-		
 		this.shadowRoot.querySelector("input[type=text]").value = "";
 
-
-		//$(this.shadowRoot).find("input[type=text]").val("");
-
 		setTimeout(() => {
-
+			const data = this.#owner.data.getValidDataNF();
+			const col = cell.dataset.col;
+			this.col = col;
+			this.#button = filterButton;
 			
-			let data = this.#owner.data.getValidDataNF();
-			
-			var ds = [];
-			filterButton.filterOptions.forEach((filterOption,i) => {
-
-				ds.push({
-					LVL: 1,
-					CHK: 'N',
-					DATA2: '<span class="group">' + $(filterButton).closest('th,td').text() + (filterButton.filterOptions.length > 1 ? ` #${i+1} (${filterOption.colnm})` : '') + '</span>',
-				});
+			const ds = filterButton.filterOptions.map((filterOption, i) => {
+				const groupLabel = `<span class="group">${cell.textContent}${filterButton.filterOptions.length > 1 ? ` #${i + 1} (${filterOption.colnm})` : ""}</span>`;
 
-				/**
-				var cell = $(`[data-col=${col}][data-bind=${filterOption.colnm}]`, this.#owner.template);
-				var expr = cell.attr("data-expr");
-				var exprFunc = (expr) ? this.#owner.exprFunction(expr) : null;
-				*/
-				
-				const cell = ninegrid.j.querySelectorAll(`[data-col="${col}"][data-bind="${filterOption.colnm}"]`, this.#owner.tmpl).elem();
-				const expr = cell.getAttribute("data-expr");
-				const exprFunc = (expr) ? this.#owner.exprFunction(expr) : null;
+				const cellEl = this.#owner.activeTmpl.querySelector(`[data-col="${col}"][data-bind="${filterOption.colnm}"]`);
+				const expr = cellEl?.getAttribute("data-expr");
+				const exprFunc = expr ? this.#owner.exprFunction(expr) : null;
 
-				var data2 = [];
-				for (var rowData of data) {
-					var idx = this.#owner.fields.indexOf(filterOption.colnm);
-					
-					if (expr) {
-						var o = this.#owner.data.conv(rowData);
-						data2.push({v:o[filterOption.colnm],v2:exprFunc(o, rowData.__ng.rowidx, this.#owner.data)});
-					}
-					else {
-						data2.push({v:rowData.v[idx],v2:rowData.v[idx]});
-					}
-				}
-
-				console.log(data, data2);
-
-				[...new Set(data2.sort( (a,b) => { return (a.v2||'') > (b.v2||'') ? 1 : ((a.v2||'') < (b.v2||'') ? -1 : 0); } ).map((m) => JSON.stringify(m)))].map((m) => JSON.parse(m)).forEach(o => {
-					console.log(filterOption, o);
-					ds.push({
-						LVL		: 2,
-						DATA	: o.v,
-						DATA2	: o.v2 || ` <span class="empty">(empty)</span> ${o.v}`,
-						COLNM	: filterOption.colnm,
-						CHK		: filterOption.data.length == 0 || filterOption.data.nineBinarySearch(o.v || '') >= 0 ? "Y" : "N",
-					});
+				const data2 = data.map(rowData => {
+					const idx = this.#owner.fields.indexOf(filterOption.colnm);
+					return expr ? { v: rowData.v[idx], v2: exprFunc(this.#owner.data.conv(rowData), rowData.__ng.rowidx, this.#owner.data) } : { v: rowData.v[idx], v2: rowData.v[idx] };
 				});
-			});
+
+				return [
+					{ LVL: 1, CHK: "N", DATA2: groupLabel },
+					...[...new Set(data2.map(JSON.stringify))]
+						.map(JSON.parse)
+						.sort((a, b) => (a.v2 || "") > (b.v2 || "") ? 1 : (a.v2 || "") < (b.v2 || "") ? -1 : 0)
+						.map(o => ({
+							LVL: 2,
+							DATA: o.v,
+							DATA2: o.v2 || ` <span class="empty">(empty)</span> ${o.v}`,
+							COLNM: filterOption.colnm,
+							CHK: filterOption.data.length === 0 || filterOption.data.nineBinarySearch(o.v || "") >= 0 ? "Y" : "N",
+						}))
+				];
+			}).flat();
 			
 			const grd = this.shadowRoot.querySelector("nine-grid");
 			//grd.dataSource = ds;
 			grd.fields.add(["DATA","DATA2","COLNM"]);
-			
 			grd.data.set(ds);
 			
 			// ✅ 데이터 필터링 및 체크 상태 결정
 			const checkbox = this.shadowRoot.querySelector("input[type=checkbox]");
-			checkbox.checked = grd.data.getValidData().filter(item => item.LVL == 2 && item.CHK != "Y").length === 0; // ✅ 체크 상태 설정
+			checkbox.checked = grd.data.getValidData().every(item => !(item.LVL === 2 && item.CHK !== "Y"));
 
 			this.shadowRoot.querySelector("input").focus();
-			
 			this.classList.remove("loading");
-			//ninegrid.j.querySelectorAll(this).removeClass("loading");
 		});
 	};
 }

package/dist/etc/ngFiltering.js

@@ -291,12 +291,7 @@ class ngFilterPanel extends HTMLElement
 
 		grd.data.resetRecords();
 		
-		if (this.#timer) {
-			console.log("-------------", this.#timer);
-			clearTimeout(this.#timer);
-			console.log("===============", this.#timer);
-			this.#timer = null;
-		}
+		clearTimeout(this.#timer);
 		this.#timer = setTimeout(() => {
 			grd.dataManager.viewRecords.reset();
 			grd.dataManager.viewRecords.touch();
@@ -310,108 +305,68 @@ class ngFilterPanel extends HTMLElement
 
 	open = (filterButton) => {
 
-		//const owner = this.shadow.closest("nine-grid");
-
 		/** 위치 */
 		const cell = filterButton.closest("th,td");
 
-		const filterButtonRect = filterButton.getBoundingClientRect();
-		const ownerRect = this.#owner.getBoundingClientRect();
-		const cellRect = cell.getBoundingClientRect();
-		const targetRect = this.getBoundingClientRect();
-
-		let l = filterButtonRect.left - ownerRect.left;
-		if (l < 0) l = 0;
-		if (l + targetRect.width > ownerRect.width) l = ownerRect.width - targetRect.width - 5;
-
-		const t = cellRect.top + cellRect.height - ownerRect.top;
+		const { left: btnLeft } = filterButton.getBoundingClientRect();
+		const { left: ownerLeft, width: ownerWidth, top: ownerTop } = this.#owner.getBoundingClientRect();
+		const { top: cellTop, height: cellHeight } = cell.getBoundingClientRect();
+		const { width: targetWidth } = this.getBoundingClientRect();
 
-		this.style.left = `${l}px`; // ✅ 위치 설정
-		this.style.top = `${t}px`;
-
-		
+		let l = Math.max(0, btnLeft - ownerLeft);
+		l = Math.min(l, ownerWidth - targetWidth - 5);
 
-		//console.log(this, owner, filterButton.filterOptions, colnms);
-		
-		var col = filterButton.closest('th,td').dataset.col;
-		this.col = col;
+		const t = cellTop + cellHeight - ownerTop;
 
-		this.#button = filterButton;
-		
-		this.style.display = 'flex';
+		Object.assign(this.style, { left: `${l}px`, top: `${t}px`, display: "flex" });
 		this.classList.add("loading");
 
-		
 		this.shadowRoot.querySelector("input[type=text]").value = "";
 
-
-		//$(this.shadowRoot).find("input[type=text]").val("");
-
 		setTimeout(() => {
-
-			
-			let data = this.#owner.data.getValidDataNF();
+			const data = this.#owner.data.getValidDataNF();
+			const col = cell.dataset.col;
+			this.col = col;
+			this.#button = filterButton;
 			
-			var ds = [];
-			filterButton.filterOptions.forEach((filterOption,i) => {
+			const ds = filterButton.filterOptions.map((filterOption, i) => {
+				const groupLabel = `<span class="group">${cell.textContent}${filterButton.filterOptions.length > 1 ? ` #${i + 1} (${filterOption.colnm})` : ""}</span>`;
 
-				ds.push({
-					LVL: 1,
-					CHK: 'N',
-					DATA2: '<span class="group">' + $(filterButton).closest('th,td').text() + (filterButton.filterOptions.length > 1 ? ` #${i+1} (${filterOption.colnm})` : '') + '</span>',
-				});
-
-				/**
-				var cell = $(`[data-col=${col}][data-bind=${filterOption.colnm}]`, this.#owner.template);
-				var expr = cell.attr("data-expr");
-				var exprFunc = (expr) ? this.#owner.exprFunction(expr) : null;
-				*/
-				
-				const cell = ninegrid.j.querySelectorAll(`[data-col="${col}"][data-bind="${filterOption.colnm}"]`, this.#owner.tmpl).elem();
-				const expr = cell.getAttribute("data-expr");
-				const exprFunc = (expr) ? this.#owner.exprFunction(expr) : null;
-
-				var data2 = [];
-				for (var rowData of data) {
-					var idx = this.#owner.fields.indexOf(filterOption.colnm);
-					
-					if (expr) {
-						var o = this.#owner.data.conv(rowData);
-						data2.push({v:o[filterOption.colnm],v2:exprFunc(o, rowData.__ng.rowidx, this.#owner.data)});
-					}
-					else {
-						data2.push({v:rowData.v[idx],v2:rowData.v[idx]});
-					}
-				}
+				const cellEl = this.#owner.activeTmpl.querySelector(`[data-col="${col}"][data-bind="${filterOption.colnm}"]`);
+				const expr = cellEl?.getAttribute("data-expr");
+				const exprFunc = expr ? this.#owner.exprFunction(expr) : null;
 
-				console.log(data, data2);
-
-				[...new Set(data2.sort( (a,b) => { return (a.v2||'') > (b.v2||'') ? 1 : ((a.v2||'') < (b.v2||'') ? -1 : 0); } ).map((m) => JSON.stringify(m)))].map((m) => JSON.parse(m)).forEach(o => {
-					console.log(filterOption, o);
-					ds.push({
-						LVL		: 2,
-						DATA	: o.v,
-						DATA2	: o.v2 || ` <span class="empty">(empty)</span> ${o.v}`,
-						COLNM	: filterOption.colnm,
-						CHK		: filterOption.data.length == 0 || filterOption.data.nineBinarySearch(o.v || '') >= 0 ? "Y" : "N",
-					});
+				const data2 = data.map(rowData => {
+					const idx = this.#owner.fields.indexOf(filterOption.colnm);
+					return expr ? { v: rowData.v[idx], v2: exprFunc(this.#owner.data.conv(rowData), rowData.__ng.rowidx, this.#owner.data) } : { v: rowData.v[idx], v2: rowData.v[idx] };
 				});
-			});
+
+				return [
+					{ LVL: 1, CHK: "N", DATA2: groupLabel },
+					...[...new Set(data2.map(JSON.stringify))]
+						.map(JSON.parse)
+						.sort((a, b) => (a.v2 || "") > (b.v2 || "") ? 1 : (a.v2 || "") < (b.v2 || "") ? -1 : 0)
+						.map(o => ({
+							LVL: 2,
+							DATA: o.v,
+							DATA2: o.v2 || ` <span class="empty">(empty)</span> ${o.v}`,
+							COLNM: filterOption.colnm,
+							CHK: filterOption.data.length === 0 || filterOption.data.nineBinarySearch(o.v || "") >= 0 ? "Y" : "N",
+						}))
+				];
+			}).flat();
 			
 			const grd = this.shadowRoot.querySelector("nine-grid");
 			//grd.dataSource = ds;
 			grd.fields.add(["DATA","DATA2","COLNM"]);
-			
 			grd.data.set(ds);
 			
 			// ✅ 데이터 필터링 및 체크 상태 결정
 			const checkbox = this.shadowRoot.querySelector("input[type=checkbox]");
-			checkbox.checked = grd.data.getValidData().filter(item => item.LVL == 2 && item.CHK != "Y").length === 0; // ✅ 체크 상태 설정
+			checkbox.checked = grd.data.getValidData().every(item => !(item.LVL === 2 && item.CHK !== "Y"));
 
 			this.shadowRoot.querySelector("input").focus();
-			
 			this.classList.remove("loading");
-			//ninegrid.j.querySelectorAll(this).removeClass("loading");
 		});
 	};
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ninegrid2",
   "type": "module",
-  "version": "6.246.0",
+  "version": "6.248.0",
   "main": "dist/index.js",
   "exports": {
     "import": "./dist/index.js",

package/src/etc/ngFiltering.js

@@ -291,12 +291,7 @@ class ngFilterPanel extends HTMLElement
 
 		grd.data.resetRecords();
 		
-		if (this.#timer) {
-			console.log("-------------", this.#timer);
-			clearTimeout(this.#timer);
-			console.log("===============", this.#timer);
-			this.#timer = null;
-		}
+		clearTimeout(this.#timer);
 		this.#timer = setTimeout(() => {
 			grd.dataManager.viewRecords.reset();
 			grd.dataManager.viewRecords.touch();
@@ -310,108 +305,68 @@ class ngFilterPanel extends HTMLElement
 
 	open = (filterButton) => {
 
-		//const owner = this.shadow.closest("nine-grid");
-
 		/** 위치 */
 		const cell = filterButton.closest("th,td");
 
-		const filterButtonRect = filterButton.getBoundingClientRect();
-		const ownerRect = this.#owner.getBoundingClientRect();
-		const cellRect = cell.getBoundingClientRect();
-		const targetRect = this.getBoundingClientRect();
-
-		let l = filterButtonRect.left - ownerRect.left;
-		if (l < 0) l = 0;
-		if (l + targetRect.width > ownerRect.width) l = ownerRect.width - targetRect.width - 5;
-
-		const t = cellRect.top + cellRect.height - ownerRect.top;
+		const { left: btnLeft } = filterButton.getBoundingClientRect();
+		const { left: ownerLeft, width: ownerWidth, top: ownerTop } = this.#owner.getBoundingClientRect();
+		const { top: cellTop, height: cellHeight } = cell.getBoundingClientRect();
+		const { width: targetWidth } = this.getBoundingClientRect();
 
-		this.style.left = `${l}px`; // ✅ 위치 설정
-		this.style.top = `${t}px`;
-
-		
+		let l = Math.max(0, btnLeft - ownerLeft);
+		l = Math.min(l, ownerWidth - targetWidth - 5);
 
-		//console.log(this, owner, filterButton.filterOptions, colnms);
-		
-		var col = filterButton.closest('th,td').dataset.col;
-		this.col = col;
+		const t = cellTop + cellHeight - ownerTop;
 
-		this.#button = filterButton;
-		
-		this.style.display = 'flex';
+		Object.assign(this.style, { left: `${l}px`, top: `${t}px`, display: "flex" });
 		this.classList.add("loading");
 
-		
 		this.shadowRoot.querySelector("input[type=text]").value = "";
 
-
-		//$(this.shadowRoot).find("input[type=text]").val("");
-
 		setTimeout(() => {
-
-			
-			let data = this.#owner.data.getValidDataNF();
+			const data = this.#owner.data.getValidDataNF();
+			const col = cell.dataset.col;
+			this.col = col;
+			this.#button = filterButton;
 			
-			var ds = [];
-			filterButton.filterOptions.forEach((filterOption,i) => {
+			const ds = filterButton.filterOptions.map((filterOption, i) => {
+				const groupLabel = `<span class="group">${cell.textContent}${filterButton.filterOptions.length > 1 ? ` #${i + 1} (${filterOption.colnm})` : ""}</span>`;
 
-				ds.push({
-					LVL: 1,
-					CHK: 'N',
-					DATA2: '<span class="group">' + $(filterButton).closest('th,td').text() + (filterButton.filterOptions.length > 1 ? ` #${i+1} (${filterOption.colnm})` : '') + '</span>',
-				});
-
-				/**
-				var cell = $(`[data-col=${col}][data-bind=${filterOption.colnm}]`, this.#owner.template);
-				var expr = cell.attr("data-expr");
-				var exprFunc = (expr) ? this.#owner.exprFunction(expr) : null;
-				*/
-				
-				const cell = ninegrid.j.querySelectorAll(`[data-col="${col}"][data-bind="${filterOption.colnm}"]`, this.#owner.tmpl).elem();
-				const expr = cell.getAttribute("data-expr");
-				const exprFunc = (expr) ? this.#owner.exprFunction(expr) : null;
-
-				var data2 = [];
-				for (var rowData of data) {
-					var idx = this.#owner.fields.indexOf(filterOption.colnm);
-					
-					if (expr) {
-						var o = this.#owner.data.conv(rowData);
-						data2.push({v:o[filterOption.colnm],v2:exprFunc(o, rowData.__ng.rowidx, this.#owner.data)});
-					}
-					else {
-						data2.push({v:rowData.v[idx],v2:rowData.v[idx]});
-					}
-				}
+				const cellEl = this.#owner.activeTmpl.querySelector(`[data-col="${col}"][data-bind="${filterOption.colnm}"]`);
+				const expr = cellEl?.getAttribute("data-expr");
+				const exprFunc = expr ? this.#owner.exprFunction(expr) : null;
 
-				console.log(data, data2);
-
-				[...new Set(data2.sort( (a,b) => { return (a.v2||'') > (b.v2||'') ? 1 : ((a.v2||'') < (b.v2||'') ? -1 : 0); } ).map((m) => JSON.stringify(m)))].map((m) => JSON.parse(m)).forEach(o => {
-					console.log(filterOption, o);
-					ds.push({
-						LVL		: 2,
-						DATA	: o.v,
-						DATA2	: o.v2 || ` <span class="empty">(empty)</span> ${o.v}`,
-						COLNM	: filterOption.colnm,
-						CHK		: filterOption.data.length == 0 || filterOption.data.nineBinarySearch(o.v || '') >= 0 ? "Y" : "N",
-					});
+				const data2 = data.map(rowData => {
+					const idx = this.#owner.fields.indexOf(filterOption.colnm);
+					return expr ? { v: rowData.v[idx], v2: exprFunc(this.#owner.data.conv(rowData), rowData.__ng.rowidx, this.#owner.data) } : { v: rowData.v[idx], v2: rowData.v[idx] };
 				});
-			});
+
+				return [
+					{ LVL: 1, CHK: "N", DATA2: groupLabel },
+					...[...new Set(data2.map(JSON.stringify))]
+						.map(JSON.parse)
+						.sort((a, b) => (a.v2 || "") > (b.v2 || "") ? 1 : (a.v2 || "") < (b.v2 || "") ? -1 : 0)
+						.map(o => ({
+							LVL: 2,
+							DATA: o.v,
+							DATA2: o.v2 || ` <span class="empty">(empty)</span> ${o.v}`,
+							COLNM: filterOption.colnm,
+							CHK: filterOption.data.length === 0 || filterOption.data.nineBinarySearch(o.v || "") >= 0 ? "Y" : "N",
+						}))
+				];
+			}).flat();
 			
 			const grd = this.shadowRoot.querySelector("nine-grid");
 			//grd.dataSource = ds;
 			grd.fields.add(["DATA","DATA2","COLNM"]);
-			
 			grd.data.set(ds);
 			
 			// ✅ 데이터 필터링 및 체크 상태 결정
 			const checkbox = this.shadowRoot.querySelector("input[type=checkbox]");
-			checkbox.checked = grd.data.getValidData().filter(item => item.LVL == 2 && item.CHK != "Y").length === 0; // ✅ 체크 상태 설정
+			checkbox.checked = grd.data.getValidData().every(item => !(item.LVL === 2 && item.CHK !== "Y"));
 
 			this.shadowRoot.querySelector("input").focus();
-			
 			this.classList.remove("loading");
-			//ninegrid.j.querySelectorAll(this).removeClass("loading");
 		});
 	};
 }