ninegrid2 6.315.0 → 6.317.0

package/dist/bundle.esm.js

@@ -11034,6 +11034,18 @@ class ninegrid {
 	static nvl = (v, v2) => {
 		return ninegrid.isNvl(v) ? v2 : v;
 	};
+
+	static isEllipsis = (element) => {
+		const clone = element.cloneNode(true);
+		clone.style.width = "auto";
+		clone.style.visibility = "hidden";
+		document.body.appendChild(clone);
+
+		const isTruncated = clone.scrollWidth > element.clientWidth;
+		document.body.removeChild(clone);
+
+		return isTruncated;
+	}
 	
 	static oppositeColor = (bgColor, lightColor, darkColor) => {
 		var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;
@@ -17822,581 +17834,190 @@ class ngFields
 	};
 }
 
-/**
- * button.filterOptions = [{
- * 	colnm: "userId",
- *  data: [],
- * }]
- * button.
- */
-class ngFiltering
+class ngFoot extends HTMLElement
 {
 	#owner;
-	#isFiltering;
-	
-	constructor(owner) {
-        this.#owner = owner;
-        this.#isFiltering = false;
-
-        const filterPanel = document.createElement("ng-filter-panel"); // ✅ 필터 패널 생성
-        filterPanel.style.display = "none"; // ✅ 숨김 처리
-        this.#owner.shadowRoot.appendChild(filterPanel); // ✅ Shadow DOM 내부에 추가
-    }
-	
-	initialize = () => {
-		/**
-		 * 1. grid attr == filter : on();
-		 */
-		this.#isFiltering = false;
-		this.#owner.data.clearFilter();
-	};
-	
-	isFiltering = () => {
-		return this.#isFiltering;
-	};
 	
-	on = (v) => {
+	constructor () {
+		super();
 		
-		this.#isFiltering = true;
-		const lastRowIndex = this.#getLastRowIndex();
-
-		this.#owner.body.querySelectorAll(".ng-table thead th, .ng-table thead td").forEach((td) => {
-			const rowIndex = td.closest("tr")?.sectionRowIndex;
-			if (rowIndex !== undefined && rowIndex + td.rowSpan - 1 === lastRowIndex) {
-				const options = Array.from(this.#owner.activeTmpl.querySelectorAll(`[data-col="${td.dataset.col}"]`))
-					.map(el => el.dataset.bind ? { colnm: el.dataset.bind, data: [] } : null)
-					.filter(Boolean); // ✅ `null` 제거
-
-				if (options.length > 0) {
-					td.querySelector("ng-filter-button")?.remove();
-
-					const filterButton = document.createElement("ng-filter-button");
-					td.appendChild(filterButton);
-					filterButton.filterOptions = options;
-				}
-			}
-		});
-	};
-
-	off = () => {
-		this.#isFiltering = false;
-
-		this.#owner.body.querySelectorAll(".ng-table ng-filter-button").forEach((el) => {
-			el.remove(); // ✅ 요소 삭제
-		});
-	};
-
-	/**
-	clear = () => {
-		console.log(this.#owner.dataManager.rawRecords);
-		this.#owner.dataManager.rawRecords.map(item => { item.__ng.filtered = false; });
-
-
-		this.#records = this.#owner.dataManager.rawRecords.filter(item => { return !item.__ng.deleted && !item.__ng.filtered; } );
-		return this.#records;
+		this.attachShadow({ mode: 'open' });
 	}
 	
-	refresh = () => {
-		this.#records = this.#owner.dataManager.rawRecords.filter(item => { return !item.__ng.deleted && !item.__ng.filtered; } );
-		//this.#records.forEach((o,i) => { o.__ng.rowidx = i; });
-		//this.getValidData().forEach((o,i) => { o.__ng._[ninegrid.ROW.ORDER] = i + 1; });
-		this.#resetOrder();
-		return this.#records;
-	} */
-	
-	
-	/**
-	 * oFilter : {
-	 * 	col1 : [],
-	 *  col2 : []
-	 * }
-	 */
-	set = (oFilter) => {
-
-		this.on();
-
-		// ✅ JSON 변환 (배열 → 객체)
-		let jsonFilter = Array.isArray(oFilter)
-			? Object.fromEntries(Object.keys(oFilter[0]).map(key => [key, [...new Set(oFilter.map(item => item[key]))]]))
-			: oFilter;
-		
-		this.#owner.data.clearFilter();
-		
-		Object.entries(jsonFilter).forEach(([key, arr]) => {
-			const idx = this.#owner.fields.indexOf(key);
-
-			// ✅ 숫자 판별 및 변환
-			if (this.#owner.data.getValidData().some(o => typeof o.v[idx] === "number")) {
-				arr = arr.map(Number);
-			}
-
-			// ✅ 필터 적용
-			this.#owner.data.getValidData()
-				.filter(m => arr.nineBinarySearch(m.v[idx] || '') < 0)
-				.forEach(m => { m.__ng.filtered = true; });
-		});
-		
-		
-		this.#owner.data.refreshFilter();
-		
-		// ✅ 필터 버튼 초기화
-		this.#owner.shadowRoot.querySelectorAll("ng-filter-button").forEach(el => {
-			el.filterOptions.forEach(opt => { opt.data = []; });
-		});
-		
-		Object.entries(jsonFilter).forEach(([key, arr]) => {
-			this.#owner.shadowRoot.querySelectorAll("ng-filter-button").forEach(el => {
-
-				let options = el.filterOptions;
-
-				options.forEach(opt => {
-					if (opt.colnm === key) opt.data = arr;
-				});
-
-				el.filterOptions = options;
-			});
-		});
+	connectedCallback() {
 		
+		this.#owner = this.getRootNode().host;//this.closest("nine-grid");
 		
-		this.#owner.scrollTo_V1(0);
+		this.shadowRoot.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ngFoot.css";
+				${ninegrid.getCustomPath(this,"ngFoot.css")}
+			</style>
+			
+			<ng-layout></ng-layout>
+			<ng-paging></ng-paging>
+		`;
 		
-		this.#owner.paging.reset();
 	};
-	
-	#getLastRowIndex = (v = "thead") => 
-		[...this.#owner.body.querySelectorAll(`.ng-table ${v}`)]
-			.reduce((maxIndex, el) => Math.max(el.rows.length - 1, maxIndex), 0);
-
 }
 
-class ngFilterButton extends HTMLElement
+class ngLayout extends HTMLElement
 {
 	#owner;
-	#filterOptions;
+	#tables;
+	#wrap;
+	#at;
 	
 	constructor () {
 		super();
+		
+		this.#tables = [];
+		this.#at = 0;
 	}
-
+	
 	connectedCallback() {
-		this.#owner = this.getRootNode().host;//this.closest("nine-grid");
+		this.#owner = this.getRootNode().host.getRootNode().host;//this.closest("nine-grid");
+
+		this.innerHTML =`<div class="ng-wrap"></div>`;
+		this.#wrap = this.querySelector(".ng-wrap");
+	};
+	
+	add = (arr) => {
 		
-		this.removeEventListener("click", this.#onClick);
-		this.addEventListener("click", this.#onClick);
+		this.#tables.push(...arr);
+		
+		var i = 0;
+		for (const tbl of this.#tables) {
+			i++;
+			const caption = tbl.querySelector("caption");
+			const sheetName = caption ? caption.innerHTML : `Sheet${i}`;
+			
+			$(this.#wrap).append(`<button class="ng-button" value="${i-1}" title="${sheetName.replaceAll('"', "'")}">${sheetName}</button>`);
+		}
+		
+		if (this.#tables.length <= 1) $(this.#wrap).hide();
+
+		//$("button", this.#wrap).eq(0).addClass("ng-active");
+		ninegrid.j.querySelectorAll(this.#wrap.querySelector("button")).addClass("ng-active");
+		
+		$("button", this.#wrap).on("click", this.#onClick);
 	};
 	
-	get filterOptions() {
-		return this.#filterOptions;
+	get tables() {
+		return this.#tables;
+	};
+	get currentTable() {
+		return this.#tables[this.#at];
 	};
-	set filterOptions(v) {
-		this.#filterOptions = v;
-		this.classList.toggle('filtered', this.#filterOptions.some(item => item.data.length > 0));
-	}
 	
-	#onClick = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        const panel = this.#owner.shadowRoot.querySelector("ng-filter-panel");
-        const col = this.closest("th,td")?.dataset.col; // ✅ `?.` 활용하여 안전한 접근
-
-        panel.col === col ? panel.close() : panel.open(this);
-    };
-}
+	resize = () => {
+		const overflow = $(this.#wrap).width() > $(this).width();
 
-class ngFilterPanel extends HTMLElement
-{
-	#owner;
-	#button;
-	#timer;
+		$(this.#wrap).css({
+			"width": overflow ? "100%" : "unset",
+			"justify-content": overflow ? "space-evenly" : "unset",
+		});
+	};
 	
-	constructor () {
-		super();
-		this.attachShadow({ mode: 'open' });
-	}
-
-	connectedCallback() {
-
-		this.#owner = this.getRootNode().host;
+	#onClick = e => {
+		
+		if (ninegrid.j.querySelectorAll(e.currentTarget).hasClass("ng-active")) return;
+		
+		const oldIndex = this.#at;
+		
+		this.#at = parseInt(e.currentTarget.value);
+		
+		this.#owner.changeRayout(this.#at);
+		
+		ninegrid.j.querySelectorAll("button", this.#wrap).removeClass("ng-active");
+		ninegrid.j.querySelectorAll(e.currentTarget).addClass("ng-active");
+		
+		var customEvent = new CustomEvent(ninegrid.EVENT.LAYOUT_CHANGED, { bubbles: true, detail: {} });
+		customEvent.oldIndex	= oldIndex;
+		customEvent.newIndex	= this.#at;
+		
+		this.#owner.dispatchEvent(customEvent);
+	};
+}
 
-		const cssPath = this.getRootNode().host.closest("nine-grid").getAttribute("css-path") || "";
+customElements.define("ng-layout", ngLayout);
+customElements.define("ng-foot", ngFoot);
 
-		this.shadowRoot.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ngFilterPanel.css";
-				${ninegrid.getCustomPath(this,"ngFilterPanel.css")}
-			</style>
-			
-			<div class="head">
-				<input type="text">
-			</div>
-			<nine-grid class="simple filter" css-path="${cssPath}" select-type="row" auto-fit-col="true" col-indicator-type="collapse">
-				<table style="display: none;">
-					<colgroup>
-						<col width="180" />
-						<col width="30" />
-					</colgroup>
-					<tbody>
-						<tr style="height: 24px;">
-							<td data-bind="LVL" data-expr="data.DATA2">
-								<ng-tree-item />
-							</td>
-							<td data-bind="CHK">
-								<ng-checkbox update-row-state="false" visible="data.LVL!=1" selected-border-color="white" />
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</nine-grid>
-			
-			<div>
-				<label><input type="checkbox" checked>Select All</label>
-				<button id="btnOk">OK</button>
-				<button id="btnCancel">Cancel</button>
-			</div>
-		`;
-		
-		this.shadowRoot.querySelector("input[type=text]").addEventListener("input", this.#onInput);
-		this.shadowRoot.querySelector("input[type=checkbox]").addEventListener("change", this.#onSelectAll);
-		this.shadowRoot.querySelector("#btnOk").addEventListener("click", this.#onOk);
-		this.shadowRoot.querySelector("#btnCancel").addEventListener("click", this.#onCancel);
-	};
-
-	#onOk = (e) => {
-
-		const grd = this.shadowRoot.querySelector("nine-grid");
-
-		this.classList.add("loading");
-		
-		setTimeout(() => {
-			const [LVL_IDX, CHK_IDX, COLNM_IDX, DATA_IDX] = ["LVL", "CHK", "COLNM", "DATA"].map(k => grd.fields.indexOf(k));
-			const checked = grd.data.getValidDataNF().filter(m => m.v[LVL_IDX] === 2 && m.v[CHK_IDX] === "Y");
-			const filterOptions = checked.length > 0 ? [...new Set(checked.map(m => m.v[COLNM_IDX]))].map(v => ({
-				colnm: v,
-				data: [...new Set(grd.data.getValidData().filter(m => m.v[CHK_IDX] === "Y" && m.v[COLNM_IDX] === v).map(m => m.v[DATA_IDX] || ''))].sort()
-			})) : [];
-			
-			
-			this.#button.filterOptions = filterOptions;
-
-			const oParam = Object.fromEntries(
-				[...this.#owner.body.querySelectorAll("ng-filter-button")]
-					.flatMap(el => el.filterOptions)
-					.filter(opt => opt.data.length > 0)
-					.map(opt => [opt.colnm, opt.data])
-			);
-			
-			this.#owner.filtering.set(oParam);
-
-			this.classList.remove("loading");
-			this.style.display = 'none';
-		});
-	};
-	
-	
-	
-	#onCancel = (e) => {
-		this.style.display = 'none';
-	};
-
-	#onSelectAll = (e) => {
-		const grd = this.shadowRoot.querySelector("nine-grid");
-		const idx = grd.fields.indexOf("CHK");
-		const isChecked = e.target.checked; // ✅ jQuery 없이 `checked` 값 가져오기
-
-		grd.data.getValidData().forEach(m => {
-			m.v[idx] = isChecked ? "Y" : "N"; // ✅ `Y` 또는 `N` 값 설정
-		});
-
-		grd.refreshData();
-	};
-
-	
-	
-	#onInput = (e) => {
-		const grd = this.shadowRoot.querySelector("nine-grid");
-		
-		grd.classList.add("loading");
-		
-		const data = grd.dataManager.rawRecords;
-    	data.forEach(m => { m.__ng.filtered = false; });
-		
-		const v = e.target.value.toLowerCase(); // ✅ jQuery 없이 값 가져오기
-		const [LVL_IDX, DATA_IDX] = ["LVL", "DATA"].map(field => grd.fields.indexOf(field));
-
-		data.forEach(m => {
-			m.__ng.filtered = m.v[LVL_IDX] === 2 && !String(m.v[DATA_IDX] || "").toLowerCase().includes(v);
-		});
-
-		grd.data.resetRecords();
-		
-		clearTimeout(this.#timer);
-		this.#timer = setTimeout(() => {
-			grd.dataManager.viewRecords.reset();
-			grd.dataManager.viewRecords.touch();
-		}, 200);
-	};
-	
-	close = () => {
-		this.col = null;
-		this.style.display = 'none';
-	};
-
-	open = (filterButton) => {
-
-		/** 위치 */
-		const cell = filterButton.closest("th,td");
-
-		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();
-
-		let l = Math.max(0, btnLeft - ownerLeft);
-		l = Math.min(l, ownerWidth - targetWidth - 5);
-
-		const t = cellTop + cellHeight - ownerTop;
-
-		Object.assign(this.style, { left: `${l}px`, top: `${t}px`, display: "flex" });
-		this.classList.add("loading");
-
-		this.shadowRoot.querySelector("input[type=text]").value = "";
-
-		setTimeout(() => {
-			const data = this.#owner.data.getValidDataNF();
-			const col = cell.dataset.col;
-			this.col = col;
-			this.#button = filterButton;
-			
-			const ds = filterButton.filterOptions.map((opt, i) => {
-				const groupLabel = `<span class="group">${cell.textContent}${filterButton.filterOptions.length > 1 ? ` #${i + 1} (${opt.colnm})` : ""}</span>`;
-
-				const cellEl = this.#owner.activeTmpl.querySelector(`[data-col="${col}"][data-bind="${opt.colnm}"]`);
-				const expr = cellEl?.getAttribute("data-expr");
-				const exprFunc = expr ? this.#owner.exprFunction(expr) : null;
-
-				const data2 = data.map(rowData => {
-					const idx = this.#owner.fields.indexOf(opt.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: opt.colnm,
-							CHK: opt.data.length === 0 || opt.data.nineBinarySearch(o.v || "") >= 0 ? "Y" : "N",
-						}))
-				];
-			}).flat();
-			
-			const grd = this.shadowRoot.querySelector("nine-grid");
-			grd.fields.add(["DATA","DATA2","COLNM"]);
-			grd.data.set(ds);
-			
-			// ✅ 데이터 필터링 및 체크 상태 결정
-			const checkbox = this.shadowRoot.querySelector("input[type=checkbox]");
-			checkbox.checked = grd.data.getValidData().every(item => !(item.LVL === 2 && item.CHK !== "Y"));
-
-			this.shadowRoot.querySelector("input").focus();
-			this.classList.remove("loading");
-		});
-	};
-}
-
-
-customElements.define("ng-filter-button", ngFilterButton);
-customElements.define("ng-filter-panel", ngFilterPanel);
-
-class ngFoot extends HTMLElement
-{
-	#owner;
-	
-	constructor () {
-		super();
-		
-		this.attachShadow({ mode: 'open' });
-	}
-	
-	connectedCallback() {
-		
-		this.#owner = this.getRootNode().host;//this.closest("nine-grid");
-		
-		this.shadowRoot.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ngFoot.css";
-				${ninegrid.getCustomPath(this,"ngFoot.css")}
-			</style>
-			
-			<ng-layout></ng-layout>
-			<ng-paging></ng-paging>
-		`;
-		
-	};
-}
-
-class ngLayout extends HTMLElement
-{
-	#owner;
-	#tables;
-	#wrap;
-	#at;
-	
-	constructor () {
-		super();
-		
-		this.#tables = [];
-		this.#at = 0;
-	}
-	
-	connectedCallback() {
-		this.#owner = this.getRootNode().host.getRootNode().host;//this.closest("nine-grid");
-
-		this.innerHTML =`<div class="ng-wrap"></div>`;
-		this.#wrap = this.querySelector(".ng-wrap");
-	};
-	
-	add = (arr) => {
-		
-		this.#tables.push(...arr);
-		
-		var i = 0;
-		for (const tbl of this.#tables) {
-			i++;
-			const caption = tbl.querySelector("caption");
-			const sheetName = caption ? caption.innerHTML : `Sheet${i}`;
-			
-			$(this.#wrap).append(`<button class="ng-button" value="${i-1}" title="${sheetName.replaceAll('"', "'")}">${sheetName}</button>`);
-		}
-		
-		if (this.#tables.length <= 1) $(this.#wrap).hide();
-
-		//$("button", this.#wrap).eq(0).addClass("ng-active");
-		ninegrid.j.querySelectorAll(this.#wrap.querySelector("button")).addClass("ng-active");
-		
-		$("button", this.#wrap).on("click", this.#onClick);
-	};
-	
-	get tables() {
-		return this.#tables;
-	};
-	get currentTable() {
-		return this.#tables[this.#at];
-	};
-	
-	resize = () => {
-		const overflow = $(this.#wrap).width() > $(this).width();
-
-		$(this.#wrap).css({
-			"width": overflow ? "100%" : "unset",
-			"justify-content": overflow ? "space-evenly" : "unset",
-		});
-	};
-	
-	#onClick = e => {
-		
-		if (ninegrid.j.querySelectorAll(e.currentTarget).hasClass("ng-active")) return;
-		
-		const oldIndex = this.#at;
-		
-		this.#at = parseInt(e.currentTarget.value);
-		
-		this.#owner.changeRayout(this.#at);
-		
-		ninegrid.j.querySelectorAll("button", this.#wrap).removeClass("ng-active");
-		ninegrid.j.querySelectorAll(e.currentTarget).addClass("ng-active");
-		
-		var customEvent = new CustomEvent(ninegrid.EVENT.LAYOUT_CHANGED, { bubbles: true, detail: {} });
-		customEvent.oldIndex	= oldIndex;
-		customEvent.newIndex	= this.#at;
-		
-		this.#owner.dispatchEvent(customEvent);
-	};
-}
-
-customElements.define("ng-layout", ngLayout);
-customElements.define("ng-foot", ngFoot);
-
-class ngHead extends HTMLElement
-{
-	#owner;
-	
-	constructor () {
-		super();
-
-		this.attachShadow({ mode: 'open' });
-	}
-	
-	connectedCallback() {
-		
-		this.#owner = this.getRootNode().host;
-
-		if (ninegrid.j.querySelectorAll(this.#owner).hasClass("simple")) return;
-		
-		this.shadowRoot.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ngHead.css";
-				${ninegrid.getCustomPath(this,"ngHead.css")}
-			</style>
-			
-			<ng-menu></ng-menu>
-			<ng-title></ng-title>
-			<ng-custom></ng-custom>
-		`;
-	};
-}
-
-class ngTitle extends HTMLElement
-{
-	#owner;
-	
-	constructor () {
-		super();
-	}
-	
-	connectedCallback() {
-		if (!this.getRootNode().host) return;
-		
-		this.#owner = this.getRootNode().host.getRootNode().host;
-		
-		this.innerHTML = `<span>${this.#owner.getAttribute("caption")}</span>`;
-		
-		$("span", this).on("dblclick", e => {
-			const link = '<font color="green">https://www.ninegrid.net</font>';
-			e.currentTarget.innerHTML = e.currentTarget.innerHTML == link ? `<span>${this.#owner.getAttribute("caption")}</span>` : link;
-		});
-	};
-}
-
-class ngCustom extends HTMLElement
-{
-	#owner;
-	
-	constructor () {
-		super();
-	}
-	
-	connectedCallback() {
-		if (!this.getRootNode().host) return;
-		
-		this.#owner = this.getRootNode().host.getRootNode().host;
-		
-		this.innerHTML = `<div></div>`;
-	};
-	
-	add = (element) => {
-		this.querySelector("div:first-child").append(element);
-	};
-}
-
-customElements.define("ng-title", ngTitle);
-customElements.define("ng-custom", ngCustom);
-customElements.define("ng-head", ngHead);
+class ngHead extends HTMLElement
+{
+	#owner;
+	
+	constructor () {
+		super();
+
+		this.attachShadow({ mode: 'open' });
+	}
+	
+	connectedCallback() {
+		
+		this.#owner = this.getRootNode().host;
+
+		if (ninegrid.j.querySelectorAll(this.#owner).hasClass("simple")) return;
+		
+		this.shadowRoot.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ngHead.css";
+				${ninegrid.getCustomPath(this,"ngHead.css")}
+			</style>
+			
+			<ng-menu></ng-menu>
+			<ng-title></ng-title>
+			<ng-custom></ng-custom>
+		`;
+	};
+}
+
+class ngTitle extends HTMLElement
+{
+	#owner;
+	
+	constructor () {
+		super();
+	}
+	
+	connectedCallback() {
+		if (!this.getRootNode().host) return;
+		
+		this.#owner = this.getRootNode().host.getRootNode().host;
+		
+		this.innerHTML = `<span>${this.#owner.getAttribute("caption")}</span>`;
+		
+		$("span", this).on("dblclick", e => {
+			const link = '<font color="green">https://www.ninegrid.net</font>';
+			e.currentTarget.innerHTML = e.currentTarget.innerHTML == link ? `<span>${this.#owner.getAttribute("caption")}</span>` : link;
+		});
+	};
+}
+
+class ngCustom extends HTMLElement
+{
+	#owner;
+	
+	constructor () {
+		super();
+	}
+	
+	connectedCallback() {
+		if (!this.getRootNode().host) return;
+		
+		this.#owner = this.getRootNode().host.getRootNode().host;
+		
+		this.innerHTML = `<div></div>`;
+	};
+	
+	add = (element) => {
+		this.querySelector("div:first-child").append(element);
+	};
+}
+
+customElements.define("ng-title", ngTitle);
+customElements.define("ng-custom", ngCustom);
+customElements.define("ng-head", ngHead);
 
 class ngIcon extends HTMLElement
 {
@@ -23462,596 +23083,987 @@ class ngTreeItem extends ngCellEx
 
 customElements.define("ng-tree-item", ngTreeItem);
 
-//import { ngData } from "./ngData.js";
+//import { ngData } from "./ngData.js";
+
+class ngView
+{
+	#owner;
+	#rawIndex;
+	#height;
+	#ing;
+	#timers = [];
+	
+	constructor(owner) {
+		this.#owner = owner;
+		
+		this.#ing = false;
+		
+		this.init();
+	}
+	
+	/**
+	 * changelayout
+	 * resize
+	 */
+	init = () => {
+		
+		//if (this.#ing) return;
+		
+		this.#height = {
+			body : $(".ng-container-body", this.#owner.body).height() || 0,
+			thead : $(".ng-container-body thead", this.#owner.body).height() || 0,
+			tfoot : $(".ng-container-body tfoot", this.#owner.body).height() || 0,
+		};
+		
+		if (this.#ing) return;
+		
+		$(".ng-container tbody.bindable tr.nodata", this.#owner.body).height(this.#height.body);
+		
+		this.#ing = true;
+	};
+
+	redraw = () => {
+
+		this.#owner.touchEvent.scrollTop();
+		
+		this.init();
+		
+		if (!this.#owner.dataManager) return;
+
+		this.#rawIndex = this.#owner.dataManager.viewRecords.rawIndex || 0;
+
+		this.#resetTR3();
+		
+		this.#r();
+
+		this.#owner.body.querySelector("ng-vscrollbar").refresh();
+	};
+	
+	redrawV2 = () => {
+
+		this.#owner.touchEvent.scrollTop();
+		
+		this.init();
+		
+		this.#rawIndex = this.#owner.dataManager.viewRecords.rawIndex || 0;
+		
+		this.#resetTR3V2();
+
+		this.#r();
+		this.#owner.body.querySelector("ng-vscrollbar").refreshV2();
+	};
+	
+	redrawV3 = () => {
+
+		this.init();
+		
+		this.#rawIndex = this.#owner.dataManager.viewRecords.rawIndex || 0;
+		
+		//this.#resetTR3V2();
+	
+		this.#r();
+		//this.#owner.body.querySelector("ng-vscrollbar").refreshV2();
+	};
+
+	
+	#getPinHeight = () => {
+		var h = 0;
+		
+		$(".ng-container-body tbody.fixed tr", this.#owner.body).each((i, tr) => {
+			if (tr.data && tr.data.__ng) {
+				h += this.#owner.matrix.getHeight(tr.data.__ng.height[parseInt(i % this.#owner.template.length)]);
+			}
+		});
+		
+		return h;
+	}
+	
+	#getTrHeight = () => {
+		var h = this.#getPinHeight();
+		
+		const startRow = parseInt(this.#rawIndex * this.#owner.template.length);
+
+		$(".ng-container-body tbody.bindable tr:not(.nodata)", this.#owner.body).each((i, tr) => {
+			h += this.#owner.matrix.getHeight(startRow + i);
+		});
+		
+		return h;
+	}
+	
+	#getRowCount = () => {
+		
+		const displayRowCount = parseInt(this.#owner.getAttribute("display-row-count"));
+
+		if (this.#owner.closest("dialog") && ninegrid.j.querySelectorAll(this.#owner).hasClass("simple")) return 1;
+		if ([ninegrid.PAGINGTYPE.CLIENT,ninegrid.PAGINGTYPE.SERVER].includes(this.#owner.paging.type)) return this.#owner.paging.linesPerPage;
+		if (!isNaN(displayRowCount)) {
+
+			/**
+			 * 데이타가 적을 경우 rawIndex = 0;
+			 * 마지막 페이지 인경우 rawIndex 계산
+			 */
+			if (this.#rawIndex + displayRowCount > this.#owner.data.count()) {
+				this.#rawIndex = (displayRowCount >= this.#owner.data.count()) ? 0 : this.#owner.data.count() - displayRowCount;
+				this.#owner.dataManager.viewRecords.rawIndex = this.#rawIndex;
+
+			}
+
+			
+			return displayRowCount;
+		}
+
+		const totalHeight = this.#height.body - this.#height.thead - this.#height.tfoot - this.#getPinHeight();
+
+		var rowCount = 0;
+		var h = 0;
+		while (h < totalHeight) {
+			h += this.getRowHeight(this.#rawIndex + rowCount++);
+		}
+
+		if (this.#rawIndex + rowCount > this.#owner.data.count()) {
+
+			rowCount = 0;
+			h = 0;
+			for (var i = this.#owner.data.count() - 1; i >= 0 && h < totalHeight; i--) {
+				h += this.getRowHeight(i);
+				rowCount++;
+			}
+			
+			if  (h > totalHeight) rowCount --;
+			
+			this.#rawIndex = this.#owner.data.count() - rowCount;
+
+			this.#owner.dataManager.viewRecords.rawIndex = this.#rawIndex;
+		}
+		
+
+		return rowCount;
+	};
+	
+	#createTR = () => {
+
+		// 1. 스크린에 보여질 TR 갯수 계산
+		var rowCount = this.#getRowCount();
+
+		// 0. TR 생성여부 판단
+		//if (!this.#owner.body.querySelector(".ng-container-body tbody.bindable tr:not(.nodata)") || this.isLastPage) {
+			// 2. TR 생성
+			var startRow = $(".ng-container-body tbody.bindable tr", this.#owner.body).not('tr.nodata').length / (this.#owner.template.length || 1);
+
+			
+			const leftTmpl	= this.#owner.template.clone();
+			const rightTmpl	= leftTmpl.clone();//this.#owner.template.clone();
+			const bodyTmpl	= leftTmpl.clone();//this.#owner.template.clone();
+			
+			leftTmpl	.find("th,td").not("[fixed=left]").remove();
+			rightTmpl	.find("th,td").not("[fixed=right]").remove();
+			bodyTmpl	.find("th[fixed=left],td[fixed=left],th[fixed=right],td[fixed=right]").remove();
+			
+			const leftNoData	= $("tr.nodata", this.#owner.body.querySelector(".ng-container-left"));
+			const rightNoData	= $("tr.nodata", this.#owner.body.querySelector(".ng-container-right"));
+			const bodyNoData	= $("tr.nodata", this.#owner.body.querySelector(".ng-container-body"));
+			
+			for (var i = startRow; i < rowCount; i++) {
+
+				
+				leftTmpl	.each((i,tr) => { leftNoData	.before(tr.outerHTML); });
+				rightTmpl	.each((i,tr) => { rightNoData	.before(tr.outerHTML); });
+				bodyTmpl	.each((i,tr) => { bodyNoData	.before(tr.outerHTML); });
+			}
+		//}
+		
+			
+		
+		// 3. 불필요 TR 제거
+		/**
+		rowCount = Math.min(rowCount, this.#owner.data.count());// + ($(".ng-container-body tbody.fixed tr", this.#owner.body).length / this.#owner.template.length);
+		$(".ng-container tbody.bindable tr", this.#owner.body).not(".nodata").each((i,tr) => {
+			if (parseInt(tr.sectionRowIndex / this.#owner.template.length) >= rowCount) {
+				$(tr).remove();
+			}
+		}); */
+		
+		return;
+		
+		// 4. row resize
+		var trsBody	= $(".ng-container-body tbody.bindable tr:not(.nodata)", this.#owner.body);
+		
+		if (trsBody.length > 0) {
+			var startRow = parseInt(this.#rawIndex * this.#owner.template.length);
+		}
+	};
+	
+	#removeGarbageTR = () => {
+		
+		var rowCount = Math.min(this.#getRowCount(), this.#owner.data.count());// + this.pin.count();
+
+		
+		$(".ng-container tbody.bindable tr:not(.nodata)", this.#owner.body).each((i,tr) => {
+			if (parseInt(tr.sectionRowIndex / this.#owner.template.length) >= rowCount) {
+				$(tr).remove();
+			}
+		});
+
+		this.#owner.body.querySelectorAll(".ng-container tbody.bindable tr:not(.nodata)").forEach(tr => {
+			const row = this.#rawIndex + parseInt(tr.sectionRowIndex / this.#owner.template.length);
+			if (row >= this.#owner.data.count()) {
+				$(tr).remove();
+			}
+		});
+	};
+	
+	#resetTR3 = () => {
+
+		// 1. TR 생성
+		this.#createTR();
+
+		this.#removeGarbageTR();
+
+		// 5. nodata resize
+
+		var h = this.#height.body - this.#height.thead - this.#height.tfoot - this.#getTrHeight();
+		$(".ng-container tbody.bindable tr.nodata", this.#owner.body).height(h);
+		
+		/**
+		this.#owner.body.querySelector(".ng-container-body .ng-table").style.top = 0;
+		this.#owner.body.querySelector(".ng-container-left .ng-table").style.top = 0;
+		this.#owner.body.querySelector(".ng-container-right .ng-table").style.top = 0;
+		*/
+		
+		//$('.ng-container .ng-table', this.#owner.body).offset({top:$('.ng-container .ng-table', this.#owner.body).offset().top});
+		//$('.ng-container .ng-table', this.#owner.body).offset({top:$('.ng-container .ng-table', this.#owner.body).offset().top});
+		//this.isLastPage = h > 0 ? true : false;
+
+		
+		if (this.#owner.closest("dialog") && ninegrid.j.querySelectorAll(this.#owner).hasClass("simple")) {
+			$("tr.nodata", this.#owner.body).height(0);
+			
+			var h = 47;//this.#getTrHeight();
+			$('.ng-container-body tbody.bindable tr', this.#owner.body).not('.nodata').each((i,tr) => {
+				h += $(tr).height();
+			});
+
+			$(this.#owner.closest("dialog")).height(h);
+		}
+	};
+
+	#resetTR3V2 = () => {
+		
+		// 1. TR 생성
+		//this.#owner.isLastPage = rows[rows.length-1] == this.#owner.data.count() - 1 ? true : false;//this.#isLastPage();
+		
+		//if (this.#owner.isLastPage) {
+		//if (this.#isLastPage) {
+
+		//if (this.#owner.isLastPage) {
+			this.#createTR();
+		//}
+		/**
+		if ($(".ng-container-body tbody.bindable tr.nodata", this.#owner.body).height() > 0) {
+			this.#createTR();
+		} */
+
+		this.#removeGarbageTR();
+
+		
+		// 5. nodata resize
+		/**
+		if (this.#owner.isFirstPage || this.#owner.isLastPage) {
+			var h = this.#owner.body.querySelector("ng-vscrollbar").bodyHeight - $(".ng-container-body .ng-table", this.#owner.body).height() + $('.ng-container-body .ng-table tr.nodata', this.#owner.body).height();
+			$(".ng-container tbody.bindable tr.nodata", this.#owner.body).height(h);
+		}*/
+		//$(".ng-container tbody.bindable tr.nodata", this.#owner.body).height(700);
+		
+		if (this.#owner.isLastPage) ;
+
+		
+		//this.isLastPage = h > 0 ? true : false;
+
+		
+		//this.nodata = h > 0 ? true : false;
+		
+		// 6. 마지막 TR tabindex
+	};
+	
+	#refreshData = () => {
+		
+		for (const v of this.#timers) {
+			clearTimeout(v);
+		}
+		this.#timers = [];
+
+		this.#timers.push(setTimeout(() => {
+			
+			this.#ing = false;
+			
+			// 4. row resize
+			var trsBody	= $(".ng-container-body tbody.bindable tr", this.#owner.body).not(".nodata");
+			var trsLeft	= $(".ng-container-left tbody.bindable tr", this.#owner.body).not(".nodata");
+			var trsRight= $(".ng-container-right tbody.bindable tr", this.#owner.body).not(".nodata");
+			
+			if (trsBody.length > 0) {
+				var startRow = parseInt(trsBody[0].dataset.row * this.#owner.template.length);
+				
+				trsBody.each((i, tr) => {
+					var h = this.#owner.matrix.getHeight(startRow + i);// || 32;
+
+					$("canvas.chart", tr).css({ "height" : h-4 });
+					$("canvas.chart", trsLeft.eq(i)).css({ "height" : h-4 });
+					$("canvas.chart", trsRight.eq(i)).css({ "height" : h-4 });
+
+					$(tr).css({ "height" : h }).height(h);
+					trsLeft.eq(i).css({ "height" : h }).height(h);
+					trsRight.eq(i).css({ "height" : h }).height(h);
+				});
+			}
+			
+			this.#owner.cell.refresh();
+			
+			//row resize
+			$('ng-row-indicator', this.#owner.body).each((i,el) => {
+				el.refresh();
+			});
+			
+			//5. nodata resize
+			var h = this.#height.body - this.#height.thead - this.#height.tfoot - this.#getTrHeight();
+			$(".ng-container tbody.bindable tr.nodata", this.#owner.body).height(h);
+			
+			//this.isLastPage = h > 0 ? true : false;
+
+			
+			this.#owner.refreshBindRows();
+
+			this.#owner.refreshData();
+			
+			this.#owner.paging.totalCount = this.#owner.data.countNF();
+			
+			this.#owner.body.querySelector("ng-vscrollbar").refresh();
 
-class ngView
-{
-	#owner;
-	#rawIndex;
-	#height;
-	#ing;
-	#timers = [];
-	
-	constructor(owner) {
-		this.#owner = owner;
-		
-		this.#ing = false;
+			ninegrid.j.querySelectorAll(".ng-table tbody tr", this.#owner.body).removeClass("hover");
+			ninegrid.j.querySelectorAll(this.#owner).removeClass("loading");
+			ninegrid.j.querySelectorAll("ng-filter-panel").removeClass("loading");
+			
+			/**
+			this.#owner.body.querySelector(".ng-container-left").style.position = "sticky";
+			this.#owner.body.querySelector(".ng-container-right").style.position = "sticky";
+			this.#owner.body.querySelector(".ng-container-body").style.position = "sticky";
+			this.#owner.body.querySelector(".ng-container-left").style.top = "0px";
+			this.#owner.body.querySelector(".ng-container-right").style.top = "0px";
+			this.#owner.body.querySelector(".ng-container-body").style.top = "0px";
+			
+			setTimeout(() => {
+				this.#owner.body.querySelector(".ng-container-left").style.position = "relative";
+				this.#owner.body.querySelector(".ng-container-right").style.position = "relative";
+				this.#owner.body.querySelector(".ng-container-body").style.position = "relative";
+				this.#owner.body.querySelector(".ng-container-left").style.top = "0px";
+				this.#owner.body.querySelector(".ng-container-right").style.top = "0px";
+				this.#owner.body.querySelector(".ng-container-body").style.top = "0px";
+			}, 1000); */
+
+		}, 300));
 		
-		this.init();
+		//if (!this.timers) this.timers = [];
+		this.#timers.push(setTimeout(() => {
+			this.#owner.refreshDataV2();
+		}));
 	}
 	
-	/**
-	 * changelayout
-	 * resize
-	 */
-	init = () => {
-		
-		//if (this.#ing) return;
-		
-		this.#height = {
-			body : $(".ng-container-body", this.#owner.body).height() || 0,
-			thead : $(".ng-container-body thead", this.#owner.body).height() || 0,
-			tfoot : $(".ng-container-body tfoot", this.#owner.body).height() || 0,
-		};
-		
-		if (this.#ing) return;
+	#r = () => {
+
+		var rows = [];
+		this.#owner.body.querySelectorAll(".ng-container-body tbody.bindable tr:not(.nodata)").forEach(tr => {
+			rows.push(this.#rawIndex + parseInt(tr.sectionRowIndex / this.#owner.template.length));
+		});
 		
-		$(".ng-container tbody.bindable tr.nodata", this.#owner.body).height(this.#height.body);
+		rows = [...new Set(rows)];
 		
-		this.#ing = true;
-	};
-
-	redraw = () => {
+		this.#owner.body.querySelectorAll(".ng-container tbody.bindable tr:not(.nodata)").forEach(tr => {
+			const index = parseInt(tr.sectionRowIndex / this.#owner.template.length);
 
-		this.#owner.touchEvent.scrollTop();
-		
-		this.init();
+			tr.dataset.row			= rows[index];
+			tr.dataset.matrixRow	= parseInt(rows[index] * this.#owner.template.length) + parseInt(tr.sectionRowIndex % this.#owner.template.length);
+			
+			for (const cell of tr.cells) {
+				cell.dataset.row		= tr.dataset.row;
+				cell.dataset.matrixRow	= tr.dataset.matrixRow;
+			}
+		});
 		
-		if (!this.#owner.dataManager) return;
 
-		this.#rawIndex = this.#owner.dataManager.viewRecords.rawIndex || 0;
+		rows.forEach(row => {
+			const data = this.#owner.data.get(row);
 
-		this.#resetTR3();
+			this.#owner.body.querySelectorAll(`.ng-container tbody.bindable tr[data-row="${row}"]`).forEach(tr => {
+				tr.data	= data;
+			});
+		});
 		
-		this.#r();
+		this.#rawIndex = parseInt(this.#owner.body.querySelector(".ng-container-body tbody.bindable tr:first-of-type").getAttribute("data-row"));
+		
+		this.#owner.dataManager.viewRecords.rawIndex = this.#rawIndex;
 
-		this.#owner.body.querySelector("ng-vscrollbar").refresh();
-	};
-	
-	redrawV2 = () => {
 
-		this.#owner.touchEvent.scrollTop();
-		
-		this.init();
+		this.#refreshData();
 		
-		this.#rawIndex = this.#owner.dataManager.viewRecords.rawIndex || 0;
+		//this.#owner.isFirstPage = this.#rawIndex == this.#owner.cell.firstRow() ? true : false;
+		this.#owner.isFirstPage = this.#rawIndex == 0 ? true : false;
+		//this.#owner.isLastPage = this.isLastPage;
 		
-		this.#resetTR3V2();
 
-		this.#r();
-		this.#owner.body.querySelector("ng-vscrollbar").refreshV2();
+		this.#owner.isLastPage = rows[rows.length-1] == this.#owner.data.count() - 1 ? true : false;//this.#isLastPage();
+		//this.#owner.lastHidden = (parseInt($(".ng-container-body", this.#owner.body).height() - ($(".ng-container-body tfoot", this.#owner.body).height() || 0) + 2) >= t + h) ? false : true;
+
+		//this.#owner.body.querySelector("ng-vscrollbar").refresh();
 	};
 	
-	redrawV3 = () => {
-
-		this.init();
-		
-		this.#rawIndex = this.#owner.dataManager.viewRecords.rawIndex || 0;
-		
-		//this.#resetTR3V2();
+	getVisibleFirstRow = () => {
+		var tr = this.#owner.body.querySelector(".ng-container-body tbody.bindable tr:first-child");
+		return parseInt(tr.dataset.row);
+	};
 	
-		this.#r();
-		//this.#owner.body.querySelector("ng-vscrollbar").refreshV2();
+	getVisibleLastRow = () => {
+		var trs = this.#owner.body.querySelectorAll(".ng-container-body tbody.bindable tr:not(.nodata)");
+		return (trs.length > 0) ? parseInt(trs[trs.length - 1].dataset.row) : -1;
 	};
-
 	
-	#getPinHeight = () => {
-		var h = 0;
+	getRowHeight = (rowIndex) => {
+		let h = 0;
 		
-		$(".ng-container-body tbody.fixed tr", this.#owner.body).each((i, tr) => {
-			if (tr.data && tr.data.__ng) {
-				h += this.#owner.matrix.getHeight(tr.data.__ng.height[parseInt(i % this.#owner.template.length)]);
-			}
-		});
+		for (var i = 0; i < this.#owner.template.length; i++) {
+			h += this.#owner.matrix.getHeight(parseInt(rowIndex * this.#owner.template.length + i));
+		}
 		
 		return h;
-	}
+	};
 	
-	#getTrHeight = () => {
-		var h = this.#getPinHeight();
-		
-		const startRow = parseInt(this.#rawIndex * this.#owner.template.length);
-
-		$(".ng-container-body tbody.bindable tr:not(.nodata)", this.#owner.body).each((i, tr) => {
-			h += this.#owner.matrix.getHeight(startRow + i);
-		});
+	getTranslateY = () => {
+		const tbody = this.#owner.body.querySelector(".ng-container-body tbody.bindable");
+		return (!tbody || !tbody.style || !tbody.style.transform) ? 0 : parseFloat(tbody.style.transform.replace("translateY(", "").replace(")", ""));
+	};
+	
+	getTotalSpace = () => {
 		
-		return h;
-	}
+		return $(this.#owner.body.querySelector(".ng-container-body")).height()
+					- ($(this.#owner.body.querySelector(".ng-container-body thead")).height() || 0)
+					- ($(this.#owner.body.querySelector(".ng-container-body tfoot")).height() || 0)
+					- ($(this.#owner.body.querySelector(".ng-container-body tbody.fixed")).height() || 0);
+					//- this.getTranslateY();
+	};
 	
-	#getRowCount = () => {
+	fitPage = () => {
+		const lastRow		= this.getVisibleLastRow();
+		const totalSpace	= this.getTotalSpace();
 		
-		const displayRowCount = parseInt(this.#owner.getAttribute("display-row-count"));
-
-		if (this.#owner.closest("dialog") && ninegrid.j.querySelectorAll(this.#owner).hasClass("simple")) return 1;
-		if ([ninegrid.PAGINGTYPE.CLIENT,ninegrid.PAGINGTYPE.SERVER].includes(this.#owner.paging.type)) return this.#owner.paging.linesPerPage;
-		if (!isNaN(displayRowCount)) {
-
-			/**
-			 * 데이타가 적을 경우 rawIndex = 0;
-			 * 마지막 페이지 인경우 rawIndex 계산
-			 */
-			if (this.#rawIndex + displayRowCount > this.#owner.data.count()) {
-				this.#rawIndex = (displayRowCount >= this.#owner.data.count()) ? 0 : this.#owner.data.count() - displayRowCount;
-				this.#owner.dataManager.viewRecords.rawIndex = this.#rawIndex;
-
+		/**
+		 * 마지막 페이지 정리
+		 */
+		if (lastRow == this.#owner.data.count() - 1) {
+			var h = 0;
+			for (var i = lastRow; i >= 0; i--) {
+				h += this.getRowHeight(i);
+				
+				if (h > totalSpace) {
+					this.#owner.scrollTo(i + 1);
+					break;
+				}
 			}
-
-			
-			return displayRowCount;
-		}
-
-		const totalHeight = this.#height.body - this.#height.thead - this.#height.tfoot - this.#getPinHeight();
-
-		var rowCount = 0;
-		var h = 0;
-		while (h < totalHeight) {
-			h += this.getRowHeight(this.#rawIndex + rowCount++);
 		}
+	}
+	/**
+	#isLastPage = () => {
+		const arr = this.#owner.body.querySelectorAll(".ng-container-body tbody.bindable tr:not(.nodata)");
+		if (arr.length <= 0) return null;
 
-		if (this.#rawIndex + rowCount > this.#owner.data.count()) {
-
-			rowCount = 0;
-			h = 0;
-			for (var i = this.#owner.data.count() - 1; i >= 0 && h < totalHeight; i--) {
-				h += this.getRowHeight(i);
-				rowCount++;
-			}
-			
-			if  (h > totalHeight) rowCount --;
+		return arr[arr.length - 1].dataset.row == this.#owner.data.count() - 1 ? true : false;
+	}*/
+	
+	
+	/**
+	 * grid.selectCell(row, colnm, subrow) => scrollTo
+	 * grid.selectCol(fromColNm, toColNm)
+	 * grid.selectRow(row) => scrollTo
+	 * grid.selectArea(row1, col1, row2, col2) => scrollTo
+	 * 
+	 * grid.clearSelect()
+	 * 
+	 * grid.selection.currentCell;
+	 * grid.selection.currentRow;
+	 * grid.selection.currentSubRow;
+	 * grid.selection.currentCol;
+	 * grid.selection.firstRow
+	 * grid.selection.firstCol
+	 * grid.selection.lastRow
+	 * grid.selection.lastCol
+	 */
+	
+	selectArea = (oRow1, oCol1, oRow2, oCol2) => {
 			
-			this.#rawIndex = this.#owner.data.count() - rowCount;
-
-			this.#owner.dataManager.viewRecords.rawIndex = this.#rawIndex;
-		}
+		const row1		= this.#getRowIndex(oRow1);
+		const row2		= this.#getRowIndex(oRow2);
+		const col1		= this.#getColIndex(oCol1);
+		const col2		= this.#getColIndex(oCol2);
+		const matrixRow1= parseInt(row1 * this.#owner.template.length);
+		const matrixRow2= parseInt(row2 * this.#owner.template.length) + this.#owner.template.length - 1;
 		
-
-		return rowCount;
+		this.#owner.row.at = row1;
+		
+		(row1 >= 0 && row2 >= 0) ? this.#owner.selection.selectArea(matrixRow1, col1, matrixRow2, col2) : this.clearSelection();
 	};
 	
-	#createTR = () => {
-
-		// 1. 스크린에 보여질 TR 갯수 계산
-		var rowCount = this.#getRowCount();
-
-		// 0. TR 생성여부 판단
-		//if (!this.#owner.body.querySelector(".ng-container-body tbody.bindable tr:not(.nodata)") || this.isLastPage) {
-			// 2. TR 생성
-			var startRow = $(".ng-container-body tbody.bindable tr", this.#owner.body).not('tr.nodata').length / (this.#owner.template.length || 1);
-
-			
-			const leftTmpl	= this.#owner.template.clone();
-			const rightTmpl	= leftTmpl.clone();//this.#owner.template.clone();
-			const bodyTmpl	= leftTmpl.clone();//this.#owner.template.clone();
-			
-			leftTmpl	.find("th,td").not("[fixed=left]").remove();
-			rightTmpl	.find("th,td").not("[fixed=right]").remove();
-			bodyTmpl	.find("th[fixed=left],td[fixed=left],th[fixed=right],td[fixed=right]").remove();
-			
-			const leftNoData	= $("tr.nodata", this.#owner.body.querySelector(".ng-container-left"));
-			const rightNoData	= $("tr.nodata", this.#owner.body.querySelector(".ng-container-right"));
-			const bodyNoData	= $("tr.nodata", this.#owner.body.querySelector(".ng-container-body"));
+	selectRow = (oRow1, oRow2) => {
 			
-			for (var i = startRow; i < rowCount; i++) {
-
-				
-				leftTmpl	.each((i,tr) => { leftNoData	.before(tr.outerHTML); });
-				rightTmpl	.each((i,tr) => { rightNoData	.before(tr.outerHTML); });
-				bodyTmpl	.each((i,tr) => { bodyNoData	.before(tr.outerHTML); });
-			}
-		//}
+		const row1		= this.#getRowIndex(oRow1);
+		const row2		= ninegrid.isNull(oRow2) ? row1 : this.#getRowIndex(oRow2);
+		const matrixRow1= parseInt(row1 * this.#owner.template.length);
+		const matrixRow2= parseInt(row2 * this.#owner.template.length) + this.#owner.template.length - 1;
 		
-			
+		this.#owner.row.at = row1;
 		
-		// 3. 불필요 TR 제거
-		/**
-		rowCount = Math.min(rowCount, this.#owner.data.count());// + ($(".ng-container-body tbody.fixed tr", this.#owner.body).length / this.#owner.template.length);
-		$(".ng-container tbody.bindable tr", this.#owner.body).not(".nodata").each((i,tr) => {
-			if (parseInt(tr.sectionRowIndex / this.#owner.template.length) >= rowCount) {
-				$(tr).remove();
-			}
-		}); */
+		(row1 >= 0 && row2 >= 0) ? this.#owner.selection.selectArea(matrixRow1, this.#owner.firstCol, matrixRow2, this.#owner.lastCol) : this.clearSelection();
+	};
+	
+	selectCol = (oCol1, oCol2) => {
+		const col1		= this.#getColIndex(oCol1);
+		const col2		= ninegrid.isNull(oCol2) ? col1 : this.#getColIndex(oCol2);
+		const matrixRow1= 0;
+		const matrixRow2= parseInt(this.#owner.data.count() * this.#owner.template.length - 1);
+
+		(col1 >= 0 && col2 >= 0) ? this.#owner.selection.selectArea(matrixRow1, col1, matrixRow2, col2) : this.clearSelection();
+	};
+	
+	selectCell = (oRow, oCol, subrow) => {
 		
-		return;
+		const row		= this.#getRowIndex(oRow);
+		const col		= this.#getColIndex(oCol);
+		const matrixRow	= parseInt(row * this.#owner.template.length) + ninegrid.nvl(subrow, 0);
 		
-		// 4. row resize
-		var trsBody	= $(".ng-container-body tbody.bindable tr:not(.nodata)", this.#owner.body);
+		this.#owner.row.at = row;
 		
-		if (trsBody.length > 0) {
-			var startRow = parseInt(this.#rawIndex * this.#owner.template.length);
+		(row >= 0) ? this.#owner.selection.selectArea(matrixRow, col, matrixRow, col) : this.clearSelection();
+	};
+	
+	#getRowIndex = (oRow) => {
+		if (typeof oRow === "number") {
+			return oRow;
+		}
+		else if (typeof oRow === "function") {
+			return this.#owner.data.findIndex(oRow);
+		}
+		else {
+			throw `invalid ${oRow}`;
 		}
 	};
 	
-	#removeGarbageTR = () => {
-		
-		var rowCount = Math.min(this.#getRowCount(), this.#owner.data.count());// + this.pin.count();
+	#getColIndex = (oCol) => {
+		if (typeof oCol === "number") {
+			return oCol;
+		}
+		else if (typeof oCol === "string" && this.#owner.fields.includes(oCol)) {
+			return  parseInt($(`[data-bind="${oCol}"]`, this.#owner.template)[0].dataset.col);
+		}
+		else {
+			throw `invalid ${oCol}`;
+		}
+	};
+	
+	
+	
+	moveTo = (at) => {
+		this.#owner.scrollTo(at);
+	}
+}
 
-		
-		$(".ng-container tbody.bindable tr:not(.nodata)", this.#owner.body).each((i,tr) => {
-			if (parseInt(tr.sectionRowIndex / this.#owner.template.length) >= rowCount) {
-				$(tr).remove();
-			}
-		});
+/**
+ * button.filterOptions = [{
+ * 	colnm: "userId",
+ *  data: [],
+ * }]
+ * button.
+ */
+class ngFiltering
+{
+	#owner;
+	#isFiltering;
+	
+	constructor(owner) {
+        this.#owner = owner;
+        this.#isFiltering = false;
 
-		this.#owner.body.querySelectorAll(".ng-container tbody.bindable tr:not(.nodata)").forEach(tr => {
-			const row = this.#rawIndex + parseInt(tr.sectionRowIndex / this.#owner.template.length);
-			if (row >= this.#owner.data.count()) {
-				$(tr).remove();
-			}
-		});
+        const filterPanel = document.createElement("ng-filter-panel"); // ✅ 필터 패널 생성
+        filterPanel.style.display = "none"; // ✅ 숨김 처리
+        this.#owner.shadowRoot.appendChild(filterPanel); // ✅ Shadow DOM 내부에 추가
+    }
+	
+	initialize = () => {
+		/**
+		 * 1. grid attr == filter : on();
+		 */
+		this.#isFiltering = false;
+		this.#owner.data.clearFilter();
 	};
 	
-	#resetTR3 = () => {
-
-		// 1. TR 생성
-		this.#createTR();
+	isFiltering = () => {
+		return this.#isFiltering;
+	};
+	
+	on = (v) => {
+		
+		this.#isFiltering = true;
+		const lastRowIndex = this.#getLastRowIndex();
 
-		this.#removeGarbageTR();
+		this.#owner.body.querySelectorAll(".ng-table thead th, .ng-table thead td").forEach((td) => {
+			const rowIndex = td.closest("tr")?.sectionRowIndex;
+			if (rowIndex !== undefined && rowIndex + td.rowSpan - 1 === lastRowIndex) {
+				const options = Array.from(this.#owner.activeTmpl.querySelectorAll(`[data-col="${td.dataset.col}"]`))
+					.map(el => el.dataset.bind ? { colnm: el.dataset.bind, data: [] } : null)
+					.filter(Boolean); // ✅ `null` 제거
 
-		// 5. nodata resize
+				if (options.length > 0) {
+					td.querySelector("ng-filter-button")?.remove();
 
-		var h = this.#height.body - this.#height.thead - this.#height.tfoot - this.#getTrHeight();
-		$(".ng-container tbody.bindable tr.nodata", this.#owner.body).height(h);
-		
-		/**
-		this.#owner.body.querySelector(".ng-container-body .ng-table").style.top = 0;
-		this.#owner.body.querySelector(".ng-container-left .ng-table").style.top = 0;
-		this.#owner.body.querySelector(".ng-container-right .ng-table").style.top = 0;
-		*/
-		
-		//$('.ng-container .ng-table', this.#owner.body).offset({top:$('.ng-container .ng-table', this.#owner.body).offset().top});
-		//$('.ng-container .ng-table', this.#owner.body).offset({top:$('.ng-container .ng-table', this.#owner.body).offset().top});
-		//this.isLastPage = h > 0 ? true : false;
+					const filterButton = document.createElement("ng-filter-button");
+					td.appendChild(filterButton);
+					filterButton.filterOptions = options;
+				}
+			}
+		});
+	};
 
-		
-		if (this.#owner.closest("dialog") && ninegrid.j.querySelectorAll(this.#owner).hasClass("simple")) {
-			$("tr.nodata", this.#owner.body).height(0);
-			
-			var h = 47;//this.#getTrHeight();
-			$('.ng-container-body tbody.bindable tr', this.#owner.body).not('.nodata').each((i,tr) => {
-				h += $(tr).height();
-			});
+	off = () => {
+		this.#isFiltering = false;
 
-			$(this.#owner.closest("dialog")).height(h);
-		}
+		this.#owner.body.querySelectorAll(".ng-table ng-filter-button").forEach((el) => {
+			el.remove(); // ✅ 요소 삭제
+		});
 	};
 
-	#resetTR3V2 = () => {
-		
-		// 1. TR 생성
-		//this.#owner.isLastPage = rows[rows.length-1] == this.#owner.data.count() - 1 ? true : false;//this.#isLastPage();
-		
-		//if (this.#owner.isLastPage) {
-		//if (this.#isLastPage) {
+	/**
+	clear = () => {
+		console.log(this.#owner.dataManager.rawRecords);
+		this.#owner.dataManager.rawRecords.map(item => { item.__ng.filtered = false; });
 
-		//if (this.#owner.isLastPage) {
-			this.#createTR();
-		//}
-		/**
-		if ($(".ng-container-body tbody.bindable tr.nodata", this.#owner.body).height() > 0) {
-			this.#createTR();
-		} */
 
-		this.#removeGarbageTR();
+		this.#records = this.#owner.dataManager.rawRecords.filter(item => { return !item.__ng.deleted && !item.__ng.filtered; } );
+		return this.#records;
+	}
+	
+	refresh = () => {
+		this.#records = this.#owner.dataManager.rawRecords.filter(item => { return !item.__ng.deleted && !item.__ng.filtered; } );
+		//this.#records.forEach((o,i) => { o.__ng.rowidx = i; });
+		//this.getValidData().forEach((o,i) => { o.__ng._[ninegrid.ROW.ORDER] = i + 1; });
+		this.#resetOrder();
+		return this.#records;
+	} */
+	
+	
+	/**
+	 * oFilter : {
+	 * 	col1 : [],
+	 *  col2 : []
+	 * }
+	 */
+	set = (oFilter) => {
 
+		this.on();
+
+		// ✅ JSON 변환 (배열 → 객체)
+		let jsonFilter = Array.isArray(oFilter)
+			? Object.fromEntries(Object.keys(oFilter[0]).map(key => [key, [...new Set(oFilter.map(item => item[key]))]]))
+			: oFilter;
 		
-		// 5. nodata resize
-		/**
-		if (this.#owner.isFirstPage || this.#owner.isLastPage) {
-			var h = this.#owner.body.querySelector("ng-vscrollbar").bodyHeight - $(".ng-container-body .ng-table", this.#owner.body).height() + $('.ng-container-body .ng-table tr.nodata', this.#owner.body).height();
-			$(".ng-container tbody.bindable tr.nodata", this.#owner.body).height(h);
-		}*/
-		//$(".ng-container tbody.bindable tr.nodata", this.#owner.body).height(700);
-		
-		if (this.#owner.isLastPage) ;
-
+		this.#owner.data.clearFilter();
 		
-		//this.isLastPage = h > 0 ? true : false;
+		Object.entries(jsonFilter).forEach(([key, arr]) => {
+			const idx = this.#owner.fields.indexOf(key);
+
+			// ✅ 숫자 판별 및 변환
+			if (this.#owner.data.getValidData().some(o => typeof o.v[idx] === "number")) {
+				arr = arr.map(Number);
+			}
 
+			// ✅ 필터 적용
+			this.#owner.data.getValidData()
+				.filter(m => arr.nineBinarySearch(m.v[idx] || '') < 0)
+				.forEach(m => { m.__ng.filtered = true; });
+		});
 		
-		//this.nodata = h > 0 ? true : false;
 		
-		// 6. 마지막 TR tabindex
-	};
-	
-	#refreshData = () => {
+		this.#owner.data.refreshFilter();
 		
-		for (const v of this.#timers) {
-			clearTimeout(v);
-		}
-		this.#timers = [];
-
-		this.#timers.push(setTimeout(() => {
-			
-			this.#ing = false;
-			
-			// 4. row resize
-			var trsBody	= $(".ng-container-body tbody.bindable tr", this.#owner.body).not(".nodata");
-			var trsLeft	= $(".ng-container-left tbody.bindable tr", this.#owner.body).not(".nodata");
-			var trsRight= $(".ng-container-right tbody.bindable tr", this.#owner.body).not(".nodata");
-			
-			if (trsBody.length > 0) {
-				var startRow = parseInt(trsBody[0].dataset.row * this.#owner.template.length);
-				
-				trsBody.each((i, tr) => {
-					var h = this.#owner.matrix.getHeight(startRow + i);// || 32;
+		// ✅ 필터 버튼 초기화
+		this.#owner.shadowRoot.querySelectorAll("ng-filter-button").forEach(el => {
+			el.filterOptions.forEach(opt => { opt.data = []; });
+		});
+		
+		Object.entries(jsonFilter).forEach(([key, arr]) => {
+			this.#owner.shadowRoot.querySelectorAll("ng-filter-button").forEach(el => {
 
-					$("canvas.chart", tr).css({ "height" : h-4 });
-					$("canvas.chart", trsLeft.eq(i)).css({ "height" : h-4 });
-					$("canvas.chart", trsRight.eq(i)).css({ "height" : h-4 });
+				let options = el.filterOptions;
 
-					$(tr).css({ "height" : h }).height(h);
-					trsLeft.eq(i).css({ "height" : h }).height(h);
-					trsRight.eq(i).css({ "height" : h }).height(h);
+				options.forEach(opt => {
+					if (opt.colnm === key) opt.data = arr;
 				});
-			}
-			
-			this.#owner.cell.refresh();
-			
-			//row resize
-			$('ng-row-indicator', this.#owner.body).each((i,el) => {
-				el.refresh();
-			});
-			
-			//5. nodata resize
-			var h = this.#height.body - this.#height.thead - this.#height.tfoot - this.#getTrHeight();
-			$(".ng-container tbody.bindable tr.nodata", this.#owner.body).height(h);
-			
-			//this.isLastPage = h > 0 ? true : false;
 
-			
-			this.#owner.refreshBindRows();
+				el.filterOptions = options;
+			});
+		});
+		
+		
+		this.#owner.scrollTo_V1(0);
+		
+		this.#owner.paging.reset();
+	};
+	
+	#getLastRowIndex = (v = "thead") => 
+		[...this.#owner.body.querySelectorAll(`.ng-table ${v}`)]
+			.reduce((maxIndex, el) => Math.max(el.rows.length - 1, maxIndex), 0);
 
-			this.#owner.refreshData();
-			
-			this.#owner.paging.totalCount = this.#owner.data.countNF();
-			
-			this.#owner.body.querySelector("ng-vscrollbar").refresh();
+}
 
-			ninegrid.j.querySelectorAll(".ng-table tbody tr", this.#owner.body).removeClass("hover");
-			ninegrid.j.querySelectorAll(this.#owner).removeClass("loading");
-			ninegrid.j.querySelectorAll("ng-filter-panel").removeClass("loading");
-			
-			/**
-			this.#owner.body.querySelector(".ng-container-left").style.position = "sticky";
-			this.#owner.body.querySelector(".ng-container-right").style.position = "sticky";
-			this.#owner.body.querySelector(".ng-container-body").style.position = "sticky";
-			this.#owner.body.querySelector(".ng-container-left").style.top = "0px";
-			this.#owner.body.querySelector(".ng-container-right").style.top = "0px";
-			this.#owner.body.querySelector(".ng-container-body").style.top = "0px";
-			
-			setTimeout(() => {
-				this.#owner.body.querySelector(".ng-container-left").style.position = "relative";
-				this.#owner.body.querySelector(".ng-container-right").style.position = "relative";
-				this.#owner.body.querySelector(".ng-container-body").style.position = "relative";
-				this.#owner.body.querySelector(".ng-container-left").style.top = "0px";
-				this.#owner.body.querySelector(".ng-container-right").style.top = "0px";
-				this.#owner.body.querySelector(".ng-container-body").style.top = "0px";
-			}, 1000); */
+class ngFilterButton extends HTMLElement
+{
+	#owner;
+	#filterOptions;
+	
+	constructor () {
+		super();
+	}
 
-		}, 300));
+	connectedCallback() {
+		this.#owner = this.getRootNode().host;//this.closest("nine-grid");
 		
-		//if (!this.timers) this.timers = [];
-		this.#timers.push(setTimeout(() => {
-			this.#owner.refreshDataV2();
-		}));
+		this.removeEventListener("click", this.#onClick);
+		this.addEventListener("click", this.#onClick);
+	};
+	
+	get filterOptions() {
+		return this.#filterOptions;
+	};
+	set filterOptions(v) {
+		this.#filterOptions = v;
+		this.classList.toggle('filtered', this.#filterOptions.some(item => item.data.length > 0));
 	}
 	
-	#r = () => {
+	#onClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
 
-		var rows = [];
-		this.#owner.body.querySelectorAll(".ng-container-body tbody.bindable tr:not(.nodata)").forEach(tr => {
-			rows.push(this.#rawIndex + parseInt(tr.sectionRowIndex / this.#owner.template.length));
-		});
-		
-		rows = [...new Set(rows)];
-		
-		this.#owner.body.querySelectorAll(".ng-container tbody.bindable tr:not(.nodata)").forEach(tr => {
-			const index = parseInt(tr.sectionRowIndex / this.#owner.template.length);
+        const panel = this.#owner.shadowRoot.querySelector("ng-filter-panel");
+        const col = this.closest("th,td")?.dataset.col; // ✅ `?.` 활용하여 안전한 접근
 
-			tr.dataset.row			= rows[index];
-			tr.dataset.matrixRow	= parseInt(rows[index] * this.#owner.template.length) + parseInt(tr.sectionRowIndex % this.#owner.template.length);
-			
-			for (const cell of tr.cells) {
-				cell.dataset.row		= tr.dataset.row;
-				cell.dataset.matrixRow	= tr.dataset.matrixRow;
-			}
-		});
-		
+        panel.col === col ? panel.close() : panel.open(this);
+    };
+}
 
-		rows.forEach(row => {
-			const data = this.#owner.data.get(row);
+class ngFilterPanel extends HTMLElement
+{
+	#owner;
+	#button;
+	#timer;
+	
+	constructor () {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
 
-			this.#owner.body.querySelectorAll(`.ng-container tbody.bindable tr[data-row="${row}"]`).forEach(tr => {
-				tr.data	= data;
-			});
-		});
-		
-		this.#rawIndex = parseInt(this.#owner.body.querySelector(".ng-container-body tbody.bindable tr:first-of-type").getAttribute("data-row"));
-		
-		this.#owner.dataManager.viewRecords.rawIndex = this.#rawIndex;
+	connectedCallback() {
 
+		this.#owner = this.getRootNode().host;
 
-		this.#refreshData();
+		const cssPath = this.getRootNode().host.closest("nine-grid").getAttribute("css-path") || "";
+
+		this.shadowRoot.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ngFilterPanel.css";
+				${ninegrid.getCustomPath(this,"ngFilterPanel.css")}
+			</style>
+			
+			<div class="head">
+				<input type="text">
+			</div>
+			<nine-grid class="simple filter" css-path="${cssPath}" select-type="row" auto-fit-col="true" col-indicator-type="collapse">
+				<table style="display: none;">
+					<colgroup>
+						<col width="180" />
+						<col width="30" />
+					</colgroup>
+					<tbody>
+						<tr style="height: 24px;">
+							<td data-bind="LVL" data-expr="data.DATA2">
+								<ng-tree-item />
+							</td>
+							<td data-bind="CHK">
+								<ng-checkbox update-row-state="false" visible="data.LVL!=1" selected-border-color="white" />
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</nine-grid>
+			
+			<div>
+				<label><input type="checkbox" checked>Select All</label>
+				<button id="btnOk">OK</button>
+				<button id="btnCancel">Cancel</button>
+			</div>
+		`;
 		
-		//this.#owner.isFirstPage = this.#rawIndex == this.#owner.cell.firstRow() ? true : false;
-		this.#owner.isFirstPage = this.#rawIndex == 0 ? true : false;
-		//this.#owner.isLastPage = this.isLastPage;
+		this.shadowRoot.querySelector("input[type=text]").addEventListener("input", this.#onInput);
+		this.shadowRoot.querySelector("input[type=checkbox]").addEventListener("change", this.#onSelectAll);
+		this.shadowRoot.querySelector("#btnOk").addEventListener("click", this.#onOk);
+		this.shadowRoot.querySelector("#btnCancel").addEventListener("click", this.#onCancel);
+	};
+
+	#onOk = (e) => {
+
+		const grd = this.shadowRoot.querySelector("nine-grid");
+
+		this.classList.add("loading");
 		
+		setTimeout(() => {
+			const [LVL_IDX, CHK_IDX, COLNM_IDX, DATA_IDX] = ["LVL", "CHK", "COLNM", "DATA"].map(k => grd.fields.indexOf(k));
+			const checked = grd.data.getValidDataNF().filter(m => m.v[LVL_IDX] === 2 && m.v[CHK_IDX] === "Y");
+			const filterOptions = checked.length > 0 ? [...new Set(checked.map(m => m.v[COLNM_IDX]))].map(v => ({
+				colnm: v,
+				data: [...new Set(grd.data.getValidData().filter(m => m.v[CHK_IDX] === "Y" && m.v[COLNM_IDX] === v).map(m => m.v[DATA_IDX] || ''))].sort()
+			})) : [];
+			
+			
+			this.#button.filterOptions = filterOptions;
 
-		this.#owner.isLastPage = rows[rows.length-1] == this.#owner.data.count() - 1 ? true : false;//this.#isLastPage();
-		//this.#owner.lastHidden = (parseInt($(".ng-container-body", this.#owner.body).height() - ($(".ng-container-body tfoot", this.#owner.body).height() || 0) + 2) >= t + h) ? false : true;
+			const oParam = Object.fromEntries(
+				[...this.#owner.body.querySelectorAll("ng-filter-button")]
+					.flatMap(el => el.filterOptions)
+					.filter(opt => opt.data.length > 0)
+					.map(opt => [opt.colnm, opt.data])
+			);
+			
+			this.#owner.filtering.set(oParam);
 
-		//this.#owner.body.querySelector("ng-vscrollbar").refresh();
-	};
-	
-	getVisibleFirstRow = () => {
-		var tr = this.#owner.body.querySelector(".ng-container-body tbody.bindable tr:first-child");
-		return parseInt(tr.dataset.row);
+			this.classList.remove("loading");
+			this.style.display = 'none';
+		});
 	};
 	
-	getVisibleLastRow = () => {
-		var trs = this.#owner.body.querySelectorAll(".ng-container-body tbody.bindable tr:not(.nodata)");
-		return (trs.length > 0) ? parseInt(trs[trs.length - 1].dataset.row) : -1;
-	};
 	
-	getRowHeight = (rowIndex) => {
-		let h = 0;
-		
-		for (var i = 0; i < this.#owner.template.length; i++) {
-			h += this.#owner.matrix.getHeight(parseInt(rowIndex * this.#owner.template.length + i));
-		}
-		
-		return h;
-	};
 	
-	getTranslateY = () => {
-		const tbody = this.#owner.body.querySelector(".ng-container-body tbody.bindable");
-		return (!tbody || !tbody.style || !tbody.style.transform) ? 0 : parseFloat(tbody.style.transform.replace("translateY(", "").replace(")", ""));
+	#onCancel = (e) => {
+		this.style.display = 'none';
 	};
-	
-	getTotalSpace = () => {
-		
-		return $(this.#owner.body.querySelector(".ng-container-body")).height()
-					- ($(this.#owner.body.querySelector(".ng-container-body thead")).height() || 0)
-					- ($(this.#owner.body.querySelector(".ng-container-body tfoot")).height() || 0)
-					- ($(this.#owner.body.querySelector(".ng-container-body tbody.fixed")).height() || 0);
-					//- this.getTranslateY();
+
+	#onSelectAll = (e) => {
+		const grd = this.shadowRoot.querySelector("nine-grid");
+		const idx = grd.fields.indexOf("CHK");
+		const isChecked = e.target.checked; // ✅ jQuery 없이 `checked` 값 가져오기
+
+		grd.data.getValidData().forEach(m => {
+			m.v[idx] = isChecked ? "Y" : "N"; // ✅ `Y` 또는 `N` 값 설정
+		});
+
+		grd.refreshData();
 	};
-	
-	fitPage = () => {
-		const lastRow		= this.getVisibleLastRow();
-		const totalSpace	= this.getTotalSpace();
-		
-		/**
-		 * 마지막 페이지 정리
-		 */
-		if (lastRow == this.#owner.data.count() - 1) {
-			var h = 0;
-			for (var i = lastRow; i >= 0; i--) {
-				h += this.getRowHeight(i);
-				
-				if (h > totalSpace) {
-					this.#owner.scrollTo(i + 1);
-					break;
-				}
-			}
-		}
-	}
-	/**
-	#isLastPage = () => {
-		const arr = this.#owner.body.querySelectorAll(".ng-container-body tbody.bindable tr:not(.nodata)");
-		if (arr.length <= 0) return null;
 
-		return arr[arr.length - 1].dataset.row == this.#owner.data.count() - 1 ? true : false;
-	}*/
-	
 	
-	/**
-	 * grid.selectCell(row, colnm, subrow) => scrollTo
-	 * grid.selectCol(fromColNm, toColNm)
-	 * grid.selectRow(row) => scrollTo
-	 * grid.selectArea(row1, col1, row2, col2) => scrollTo
-	 * 
-	 * grid.clearSelect()
-	 * 
-	 * grid.selection.currentCell;
-	 * grid.selection.currentRow;
-	 * grid.selection.currentSubRow;
-	 * grid.selection.currentCol;
-	 * grid.selection.firstRow
-	 * grid.selection.firstCol
-	 * grid.selection.lastRow
-	 * grid.selection.lastCol
-	 */
 	
-	selectArea = (oRow1, oCol1, oRow2, oCol2) => {
-			
-		const row1		= this.#getRowIndex(oRow1);
-		const row2		= this.#getRowIndex(oRow2);
-		const col1		= this.#getColIndex(oCol1);
-		const col2		= this.#getColIndex(oCol2);
-		const matrixRow1= parseInt(row1 * this.#owner.template.length);
-		const matrixRow2= parseInt(row2 * this.#owner.template.length) + this.#owner.template.length - 1;
-		
-		this.#owner.row.at = row1;
+	#onInput = (e) => {
+		const grd = this.shadowRoot.querySelector("nine-grid");
 		
-		(row1 >= 0 && row2 >= 0) ? this.#owner.selection.selectArea(matrixRow1, col1, matrixRow2, col2) : this.clearSelection();
-	};
-	
-	selectRow = (oRow1, oRow2) => {
-			
-		const row1		= this.#getRowIndex(oRow1);
-		const row2		= ninegrid.isNull(oRow2) ? row1 : this.#getRowIndex(oRow2);
-		const matrixRow1= parseInt(row1 * this.#owner.template.length);
-		const matrixRow2= parseInt(row2 * this.#owner.template.length) + this.#owner.template.length - 1;
+		grd.classList.add("loading");
 		
-		this.#owner.row.at = row1;
+		const data = grd.dataManager.rawRecords;
+    	data.forEach(m => { m.__ng.filtered = false; });
 		
-		(row1 >= 0 && row2 >= 0) ? this.#owner.selection.selectArea(matrixRow1, this.#owner.firstCol, matrixRow2, this.#owner.lastCol) : this.clearSelection();
-	};
-	
-	selectCol = (oCol1, oCol2) => {
-		const col1		= this.#getColIndex(oCol1);
-		const col2		= ninegrid.isNull(oCol2) ? col1 : this.#getColIndex(oCol2);
-		const matrixRow1= 0;
-		const matrixRow2= parseInt(this.#owner.data.count() * this.#owner.template.length - 1);
+		const v = e.target.value.toLowerCase(); // ✅ jQuery 없이 값 가져오기
+		const [LVL_IDX, DATA_IDX] = ["LVL", "DATA"].map(field => grd.fields.indexOf(field));
 
-		(col1 >= 0 && col2 >= 0) ? this.#owner.selection.selectArea(matrixRow1, col1, matrixRow2, col2) : this.clearSelection();
-	};
-	
-	selectCell = (oRow, oCol, subrow) => {
-		
-		const row		= this.#getRowIndex(oRow);
-		const col		= this.#getColIndex(oCol);
-		const matrixRow	= parseInt(row * this.#owner.template.length) + ninegrid.nvl(subrow, 0);
-		
-		this.#owner.row.at = row;
+		data.forEach(m => {
+			m.__ng.filtered = m.v[LVL_IDX] === 2 && !String(m.v[DATA_IDX] || "").toLowerCase().includes(v);
+		});
+
+		grd.data.resetRecords();
 		
-		(row >= 0) ? this.#owner.selection.selectArea(matrixRow, col, matrixRow, col) : this.clearSelection();
+		clearTimeout(this.#timer);
+		this.#timer = setTimeout(() => {
+			grd.dataManager.viewRecords.reset();
+			grd.dataManager.viewRecords.touch();
+		}, 200);
 	};
 	
-	#getRowIndex = (oRow) => {
-		if (typeof oRow === "number") {
-			return oRow;
-		}
-		else if (typeof oRow === "function") {
-			return this.#owner.data.findIndex(oRow);
-		}
-		else {
-			throw `invalid ${oRow}`;
-		}
+	close = () => {
+		this.col = null;
+		this.style.display = 'none';
 	};
-	
-	#getColIndex = (oCol) => {
-		if (typeof oCol === "number") {
-			return oCol;
-		}
-		else if (typeof oCol === "string" && this.#owner.fields.includes(oCol)) {
-			return  parseInt($(`[data-bind="${oCol}"]`, this.#owner.template)[0].dataset.col);
-		}
-		else {
-			throw `invalid ${oCol}`;
-		}
+
+	open = (filterButton) => {
+
+		/** 위치 */
+		const cell = filterButton.closest("th,td");
+
+		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();
+
+		let l = Math.max(0, btnLeft - ownerLeft);
+		l = Math.min(l, ownerWidth - targetWidth - 5);
+
+		const t = cellTop + cellHeight - ownerTop;
+
+		Object.assign(this.style, { left: `${l}px`, top: `${t}px`, display: "flex" });
+		this.classList.add("loading");
+
+		this.shadowRoot.querySelector("input[type=text]").value = "";
+
+		setTimeout(() => {
+			const data = this.#owner.data.getValidDataNF();
+			const col = cell.dataset.col;
+			this.col = col;
+			this.#button = filterButton;
+			
+			const ds = filterButton.filterOptions.map((opt, i) => {
+				const groupLabel = `<span class="group">${cell.textContent}${filterButton.filterOptions.length > 1 ? ` #${i + 1} (${opt.colnm})` : ""}</span>`;
+
+				const cellEl = this.#owner.activeTmpl.querySelector(`[data-col="${col}"][data-bind="${opt.colnm}"]`);
+				const expr = cellEl?.getAttribute("data-expr");
+				const exprFunc = expr ? this.#owner.exprFunction(expr) : null;
+
+				const data2 = data.map(rowData => {
+					const idx = this.#owner.fields.indexOf(opt.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: opt.colnm,
+							CHK: opt.data.length === 0 || opt.data.nineBinarySearch(o.v || "") >= 0 ? "Y" : "N",
+						}))
+				];
+			}).flat();
+			
+			const grd = this.shadowRoot.querySelector("nine-grid");
+			grd.fields.add(["DATA","DATA2","COLNM"]);
+			grd.data.set(ds);
+			
+			// ✅ 데이터 필터링 및 체크 상태 결정
+			const checkbox = this.shadowRoot.querySelector("input[type=checkbox]");
+			checkbox.checked = grd.data.getValidData().every(item => !(item.LVL === 2 && item.CHK !== "Y"));
+
+			this.shadowRoot.querySelector("input").focus();
+			this.classList.remove("loading");
+		});
 	};
-	
-	
-	
-	moveTo = (at) => {
-		this.#owner.scrollTo(at);
-	}
 }
 
+
+customElements.define("ng-filter-button", ngFilterButton);
+customElements.define("ng-filter-panel", ngFilterPanel);
+
 class ninegridContainer extends HTMLElement
 {
 	#colResizer;
@@ -27303,9 +27315,9 @@ class aiMessage extends HTMLElement
 			</style>
 
 			<div class="chat-message">
-				<div title="${this.#message}" class="message">
+				<span title="${this.#message}" class="message">
 					${this.#message}
-				</div>
+				</span>
 				<span class="more" style="position:relative;"><a href="#">more</a></span>
 			</div>
 
@@ -27328,6 +27340,8 @@ class aiMessage extends HTMLElement
 	set data(v) {
 		console.log(v);	}
 
+	
+
 	#init = () => {
 
 		const html = `
@@ -27364,21 +27378,7 @@ class aiMessage extends HTMLElement
 			alert(this.#message);
 		});
 
-		setTimeout(() => {
-			const elMessage = this.shadowRoot.querySelector(".message");
-			const elMore = this.shadowRoot.querySelector(".more");
-
-			console.log(elMessage.scrollWidth, elMessage.clientWidth);
-
-			elMore.style.display = "flex";
-			//elMore.style.position = "absolute";
-
-			console.log(elMessage.scrollWidth, elMessage.clientWidth);
-
-			//elMore.style.display = (elMessage.scrollWidth > elMessage.clientWidth) ? "flex" : "none";
-			if (elMessage.scrollWidth > elMessage.clientWidth) ;
-		}, 100);
-		
+		this.shadowRoot.querySelector(".more").style.display = (ninegrid.isEllipsis(this.shadowRoot.querySelector(".message"))) ? "flex" : "none";
 	};
 }