ninegrid2 6.316.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,509 +17834,565 @@ 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; // ✅ `?.` 활용하여 안전한 접근
+	resize = () => {
+		const overflow = $(this.#wrap).width() > $(this).width();
 
-        panel.col === col ? panel.close() : panel.open(this);
-    };
+		$(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);
+	};
 }
 
-class ngFilterPanel extends HTMLElement
-{
-	#owner;
-	#button;
-	#timer;
-	
-	constructor () {
-		super();
-		this.attachShadow({ mode: 'open' });
-	}
+customElements.define("ng-layout", ngLayout);
+customElements.define("ng-foot", ngFoot);
 
-	connectedCallback() {
-
-		this.#owner = this.getRootNode().host;
+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);
 
-		const cssPath = this.getRootNode().host.closest("nine-grid").getAttribute("css-path") || "";
+class ngIcon extends HTMLElement
+{
+	constructor() {
+		super();
+		
+		this.attachShadow({ mode: 'open' });
+	}
+	
+	connectedCallback() {
+		
+		new MutationObserver((entries, observer) => {
+			for (var entry  of entries) {
+				if (entry.type != "attributes") continue;
+				switch (entry.attributeName) {
+				case "stroke":
+					this.shadowRoot.querySelector("polyline").setAttribute(entry.attributeName, this.getAttribute(entry.attributeName));
+					break;
+					
+				case "fill":
+					this.shadowRoot.querySelector("circle,rect,svg").setAttribute(entry.attributeName, this.getAttribute(entry.attributeName));
+					break;
+					
+				case "start-fill":
+				case "end-fill":
+					var startFill = this.getAttribute("start-fill") || "rgba(255, 255, 255, 0.85)";
+					var endFill = this.getAttribute("end-fill") || "rgba(30, 30, 40, 0.85)";
+					$(entry.target).css({
+						//background: `radial-gradient(circle farthest-corner at 33% 33%, ${startFill} 0%, ${endFill} 80%), radial-gradient(circle farthest-corner at 45% 45%, rgba(0, 0, 0, 0) 50%, #000000 80%)`
+						background: `radial-gradient(circle farthest-corner at 33% 33%, ${startFill} 0%, ${endFill} 80%), radial-gradient(circle farthest-corner at 45% 45%, rgba(0, 0, 0, 0) 50%, #000000 80%)`
+					});
+					break;
+				}
+			}
+		}).observe(this, {
+			childList: false,
+			subtree: false,
+			attributeOldValue: true,
+		});
+	};
+}
+
+class ngCheck extends ngIcon
+{
+	constructor() {
+		super();
+	}
+	
+	connectedCallback() {
+		var size	= this.getAttribute("size") || "12";
+		this.getAttribute("stroke") || "black";
+
+		this.shadowRoot.innerHTML = `
+			<style>
+				:host {
+					width: ${size}px;
+					--border: 1px solid
+				}
+				
+				polyline {
+					fill: none;
+					stroke-width: 2px;
+				}
+			</style>
+
+			<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" viewBox="0 0 16 16">
+			  <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"/>
+			</svg>
+		`;
+		
+		super.connectedCallback();
+	};
+}
+
+class ngRect extends ngIcon
+{
+	constructor() {
+		super();
+	}
+	
+	connectedCallback() {
+		var size	= this.getAttribute("size") || "12";
+		this.getAttribute("fill") || "black";
+
+		this.shadowRoot.innerHTML = `
+			<style>
+				:host {
+				}
+			</style>
+			
+			<svg viewBox="0 0 ${size} ${size}" width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg">
+				<rect width="${size}" height="${size}" x="0" y="0" rx="0" ry="0" fill="#ccc" />
+			</svg>
+		`;
+		
+		super.connectedCallback();
+	};
+}
+
+class ngCircle extends ngIcon
+{
+	constructor() {
+		super();
+	}
+	
+	connectedCallback() {
+		var size	= Number(this.getAttribute("size") || 12);
+		var round	= size / 2;
+		var fill	= this.getAttribute("fill") || "black";
+		var stroke	= this.getAttribute("stroke") || "#666";
+		var strokeWidth	= Number(this.getAttribute("stroke-width") || 0);
+		var cx = round + strokeWidth;
+		var cy = round + strokeWidth;
+		
+		this.shadowRoot.innerHTML = `
+			<style>
+				:host {
+				}
+			</style>
+			
+			<svg viewBox="0 0 ${size} ${size}" width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg">
+				<circle fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" cx="${cx}" cy="${cy}" r="${round}"/>
+			</svg>
+		`;
+		
+		super.connectedCallback();
+	};
+}
+
+class ngSphere extends ngIcon
+{
+	constructor() {
+		super();
+	}
+	
+	connectedCallback() {
+		var size = this.getAttribute("size") || "12";
+		var startFill = this.getAttribute("start-fill") || "rgba(255, 255, 255, 0.85)";
+		var endFill = this.getAttribute("end-fill") || "rgba(0, 0, 0, 0.85)";
+
+		this.shadowRoot.innerHTML = `
+			<style>
+				:host {
+					position: absolute;
+					width: ${size}px;
+					height: ${size}px;
+					border-radius: 50%;
+					background: radial-gradient(circle farthest-corner at 33% 33%, ${startFill} 0%, ${endFill} 80%), radial-gradient(circle farthest-corner at 45% 45%, rgba(0, 0, 0, 0) 50%, #000000 80%);
+				}
+			</style>
+		`;
+		
+		super.connectedCallback();
+	};
+}
+
+customElements.define("ng-check", ngCheck);
+customElements.define("ng-rect", ngRect);
+customElements.define("ng-circle", ngCircle);
+customElements.define("ng-sphere", ngSphere);
 
-		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;
+class ngImg extends ngCellEx
+{
+	#target;
+	//#src;
+	
+	constructor() {
+		super();
+		
+		//this.#src = this.getAttribute("src");
+	}
+
+	connectedCallback() {
+		const border		= this.getAttribute("border") || "unset";
+		const borderRadius	= this.getAttribute("border-radius") || "unset";
+		const link			= this.getAttribute("link");
+		
+		var attr = [];
+		for (var i = 0; i < this.attributes.length; i++) {
+			if (["alt","width","height"].includes(this.attributes[i].name)) attr.push(`${this.attributes[i].name}="${this.attributes[i].value}"`);
+		}
+		
+		this.shadowRoot.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ngImg.css";
+				${ninegrid.getCustomPath(this,"ngImg.css")}
+
+				img {
+					border: ${border};
+					border-radius: ${borderRadius};
+					cursor: ${link == "true"? "pointer" : "unset"};
+				}
+				img:hover {
+					filter: ${link == "true"? "brightness(80%)" : "unset"};
+				}
+			</style>
+
+			<div class="ng-wrap">
+				<img ${attr.join(" ")} class="renderer" />
+			</div>
+		`;
+
+		/** img,div class="renderer" 일때 ngCell에서 link로 연결 */
+		
+		super.connectedCallback();
+		
+		this.#target = this.shadowRoot.querySelector("img");
+	};
+	
+	dataRefresh = (v) => {
+
+		var src = this.getAttribute("src");// || this.cell.getAttribute("src");
+		
+		var exprSrc = (src) ? this.getExprValue(src, this.cell.closest("tr").data, this.cell.dataset.row) : "";
+		
+		src = exprSrc || this.getDisplayText();
+		this.#target.src = src;
+		
+		src ? $(this.#target).show() : $(this.#target).hide();
+
+		if (!v) this.reset();
+	};
+	
+	r = (owner, cell) => {
+
+		const src = this.getAttribute("icon-src") || cell.getAttribute("icon-src");
+		var exprSrc = (src) ? this.getExprValue(src, cell.closest("tr").data, cell.dataset.row) : "";
+		
+		this.#target.src = exprSrc || this.value;
+	};
+}
+
+class ngSvg extends ngCellEx
+{
+	#target;
+	#src;
+	
+	constructor() {
+		super();
+		
+		this.#src = this.getAttribute("src");
+	}
+
+	connectedCallback() {
+		const border		= this.getAttribute("border") || "unset";
+		const borderRadius	= this.getAttribute("border-radius") || "unset";
+		const link			= this.getAttribute("link");
+				
+		this.shadowRoot.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ngSvg.css";
+				${ninegrid.getCustomPath(this,"ngSvg.css")}
+				
+				div {
+					border: ${border};
+					border-radius: ${borderRadius};
+					cursor: ${link == "true"? "pointer" : "unset"};
+				}
+				div:hover {
+					filter: ${link == "true"? "brightness(80%)" : "unset"};
+				}
+			</style>
+
+			<div class="ng-wrap"></div>
+		`;
+
+		/** img,div class="renderer" 일때 ngCell에서 link로 연결 */
+		
+		super.connectedCallback();
+		
+		this.#target = this.shadowRoot.querySelector("div");
+	};
+	
+	dataRefresh = (v) => {
+		
+		const src = this.getAttribute("src");// || this.cell.getAttribute("src");
+
+		var exprSrc = (src) ? this.getExprValue(src, this.cell.closest("tr").data, this.cell.dataset.row) : "";
+
+		this.#target.innerHTML = exprSrc || this.getDisplayText();
+		
+		if (!v) this.reset();
+	};
+	
+	
+	r = (owner, cell) => {
+
+		const src = this.getAttribute("icon-src") || cell.getAttribute("icon-src");
+		var exprSrc = (src) ? this.getExprValue(src, cell.closest("tr").data, cell.dataset.row) : "";
+		
+		this.#target.innerHTML = exprSrc || this.value;
+	};
+}
+
+customElements.define("ng-img", ngImg);
+customElements.define("ng-svg", ngSvg);
 
-			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);
+class ngImport
+{
+	#owner;
+	
+	constructor (owner) {
+		//super();
+		
+		this.#owner = owner;
+	};
+	
+	importExcel = () => {
+		this.#openFileDialog();
+	};
+	
+	#openFileDialog = () => {
+		if (!this.input) {
+			this.input = document.createElement('input');
+			this.input.type = 'file';
+			this.input.onchange = this.#fileSelectedHandler;
+		}
+		
+		this.input.click();
+	};
+	
+	#fileSelectedHandler = (e) => {
+	    var files = e.target.files;
+	    if (files.length < 1) {
+	        alert('select a file...');
+	        return;
+	    }
+	    var file = files[0];
+	    var reader = new FileReader();
+	    
+	    reader.onload = this.#fileLoadedHandler;
+	    reader.readAsDataURL(file);
+	    reader.onloadend = this.#fileLoadEndHandler;
+	}
+
+	#fileLoadedHandler  = e => {
+		
+	    var match = /^data:(.*);base64,(.*)$/.exec(e.target.result);
+	    if (match == null) {
+	        throw 'Could not parse result'; // should not happen
+	    }
+	    
+	    match[1];
+	    match[2];
+	    //alert(mimeType);
+	    //alert(content);
+	    
+	    
+	    //var fileReader = new FileReader();
+
+	}
+	
+	#fileLoadEndHandler = (e) => {
+ 
+		//var arrayBuffer = fileReader.result;
+    	var arrayBuffer = e.target.result;
+
+    	const workbook = new ExcelJS.Workbook();
+    	
+		workbook.xlsx.load(arrayBuffer).then(() => {
+			
+			workbook.worksheets.forEach((sheet) => {
+				sheet.eachRow((row,rowNumber) => {
+					
+					if (rowNumber % 10 == 0) console.log(rowNumber);
+				});
+			});
+		});
+	}
+}
 
-			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
+class ngInfo extends HTMLElement
 {
 	#owner;
+	#cell;
 	
 	constructor () {
 		super();
@@ -18333,617 +18401,170 @@ class ngHead extends HTMLElement
 	}
 	
 	connectedCallback() {
-		
-		this.#owner = this.getRootNode().host;
 
-		if (ninegrid.j.querySelectorAll(this.#owner).hasClass("simple")) return;
+		const contents = this.innerHTML;
 		
 		this.shadowRoot.innerHTML = `
 			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ngHead.css";
-				${ninegrid.getCustomPath(this,"ngHead.css")}
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ngInfo.css";
+				${ninegrid.getCustomPath(this,"ngInfo.css")}
 			</style>
+		
+			<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 16 16">
+				<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+				<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
+			</svg>
 			
-			<ng-menu></ng-menu>
-			<ng-title></ng-title>
-			<ng-custom></ng-custom>
+			<div class="panel">
+				${contents}
+			</div>
 		`;
-	};
-}
-
-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>`;
+		this.#owner = this.getRootNode().host;//this.closest("nine-grid");
+		this.#cell = this.closest("th,td");
 		
-		$("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;
-		});
-	};
-}
+		$("svg.icon", this.shadowRoot).on("click", e => {
+			e.preventDefault();
+			e.stopPropagation();
 
-class ngCustom extends HTMLElement
-{
-	#owner;
-	
-	constructor () {
-		super();
-	}
-	
-	connectedCallback() {
-		if (!this.getRootNode().host) return;
-		
-		this.#owner = this.getRootNode().host.getRootNode().host;
+			if ($("div.panel", this.shadowRoot).is(":visible")) {
+				this.#closeAll();
+			}
+			else {
+				this.#closeAll();
+				this.#open();
+			}
+		});
 		
-		this.innerHTML = `<div></div>`;
+		$(this).on("click", e => { e.stopPropagation(); });
 	};
 	
-	add = (element) => {
-		this.querySelector("div:first-child").append(element);
+	#open = () => {
+		$("div.panel", this.shadowRoot).show();
+		$(this.#cell).css({overflow: "visible"});
+	};
+	close = () => {
+		$("div.panel", this.shadowRoot).hide();
+		$(this.#cell).css({overflow: "unset"});
 	};
-}
-
-customElements.define("ng-title", ngTitle);
-customElements.define("ng-custom", ngCustom);
-customElements.define("ng-head", ngHead);
-
-class ngIcon extends HTMLElement
-{
-	constructor() {
-		super();
-		
-		this.attachShadow({ mode: 'open' });
-	}
 	
-	connectedCallback() {
-		
-		new MutationObserver((entries, observer) => {
-			for (var entry  of entries) {
-				if (entry.type != "attributes") continue;
-				switch (entry.attributeName) {
-				case "stroke":
-					this.shadowRoot.querySelector("polyline").setAttribute(entry.attributeName, this.getAttribute(entry.attributeName));
-					break;
-					
-				case "fill":
-					this.shadowRoot.querySelector("circle,rect,svg").setAttribute(entry.attributeName, this.getAttribute(entry.attributeName));
-					break;
-					
-				case "start-fill":
-				case "end-fill":
-					var startFill = this.getAttribute("start-fill") || "rgba(255, 255, 255, 0.85)";
-					var endFill = this.getAttribute("end-fill") || "rgba(30, 30, 40, 0.85)";
-					$(entry.target).css({
-						//background: `radial-gradient(circle farthest-corner at 33% 33%, ${startFill} 0%, ${endFill} 80%), radial-gradient(circle farthest-corner at 45% 45%, rgba(0, 0, 0, 0) 50%, #000000 80%)`
-						background: `radial-gradient(circle farthest-corner at 33% 33%, ${startFill} 0%, ${endFill} 80%), radial-gradient(circle farthest-corner at 45% 45%, rgba(0, 0, 0, 0) 50%, #000000 80%)`
-					});
-					break;
-				}
+	#closeAll = () => {
+		this.#owner.body.querySelectorAll("ng-info").forEach(el => {
+			var p = el.shadowRoot.querySelector("div.panel");
+			if ($(p).is(":visible")) {
+				$(p).hide();
+				$(el.closest("th,td")).css({overflow: "unset"});
 			}
-		}).observe(this, {
-			childList: false,
-			subtree: false,
-			attributeOldValue: true,
 		});
 	};
 }
 
-class ngCheck extends ngIcon
+customElements.define("ng-info", ngInfo);
+
+class ngInputColor extends ngEditableEx
 {
+	#target;
+	
 	constructor() {
 		super();
 	}
 	
 	connectedCallback() {
-		var size	= this.getAttribute("size") || "12";
-		this.getAttribute("stroke") || "black";
-
+		
 		this.shadowRoot.innerHTML = `
 			<style>
-				:host {
-					width: ${size}px;
-					--border: 1px solid
-				}
-				
-				polyline {
-					fill: none;
-					stroke-width: 2px;
-				}
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ngInputColor.css";
+				${ninegrid.getCustomPath(this,"ngInputColor.css")}
 			</style>
-
-			<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" viewBox="0 0 16 16">
-			  <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"/>
-			</svg>
+			
+			<input type="color" required />
+			<button tabindex="-1"></button>
 		`;
 		
 		super.connectedCallback();
+		
+		this.#target	= this.shadowRoot.querySelector("input");
+		
+		$("button", this.shadowRoot).on("click", e => { $("input", this.shadowRoot).trigger("click"); });
+		
+		$(this.cell).on("keydown", e => {
+			switch (e.target.tagName) {
+			case "TH": case "TD":
+				if (["Enter"].includes(e.code)) {
+					$(this.#target).trigger("click");
+				}
+				break;
+			}
+		});
+	
+		this.#target.addEventListener("keydown", e => {
+			if (["Enter"].includes(e.code)) {
+				$(this.#target).trigger("click");
+			}
+			else if (["Escape"].includes(e.code)) {
+				this.owner.cell.currentCell = this.cell;
+			}
+			else if (["Tab","PageUp","PageDown","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(e.code)) {
+				this.owner.cell.currentCell = this.cell;
+				this.owner.cell.moveCell(e);
+			}
+		});
 	};
-}
 
-class ngRect extends ngIcon
-{
-	constructor() {
-		super();
-	}
-	
-	connectedCallback() {
-		var size	= this.getAttribute("size") || "12";
-		this.getAttribute("fill") || "black";
+	dataRefresh = (v) => {
 
-		this.shadowRoot.innerHTML = `
-			<style>
-				:host {
-				}
-			</style>
-			
-			<svg viewBox="0 0 ${size} ${size}" width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg">
-				<rect width="${size}" height="${size}" x="0" y="0" rx="0" ry="0" fill="#ccc" />
-			</svg>
-		`;
+		if (this.#isValidColor(this.value)) {
+			this.#target.value = ninegrid.nvl(this.value, "#ffffff");
+			ninegrid.j.querySelectorAll(this).removeClass("invalid");
+		}
+		else {
+			this.#target.value = "#ffffff";
+			ninegrid.j.querySelectorAll(this).addClass("invalid");
+		}
 		
-		super.connectedCallback();
-	};
-}
+		this.#target.setAttribute("title", this.value);
 
-class ngCircle extends ngIcon
-{
-	constructor() {
-		super();
-	}
+		if (!v) this.reset();
+	};
 	
-	connectedCallback() {
-		var size	= Number(this.getAttribute("size") || 12);
-		var round	= size / 2;
-		var fill	= this.getAttribute("fill") || "black";
-		var stroke	= this.getAttribute("stroke") || "#666";
-		var strokeWidth	= Number(this.getAttribute("stroke-width") || 0);
-		var cx = round + strokeWidth;
-		var cy = round + strokeWidth;
+	#isValidColor = (v) => {
+
+		if (ninegrid.isNull(v)) return true;
 		
-		this.shadowRoot.innerHTML = `
-			<style>
-				:host {
-				}
-			</style>
-			
-			<svg viewBox="0 0 ${size} ${size}" width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg">
-				<circle fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" cx="${cx}" cy="${cy}" r="${round}"/>
-			</svg>
-		`;
+		if (typeof v !== "string" || v.length != 7 || !v.startsWith("#")) return false;
 		
-		super.connectedCallback();
-	};
-}
-
-class ngSphere extends ngIcon
-{
-	constructor() {
-		super();
-	}
-	
-	connectedCallback() {
-		var size = this.getAttribute("size") || "12";
-		var startFill = this.getAttribute("start-fill") || "rgba(255, 255, 255, 0.85)";
-		var endFill = this.getAttribute("end-fill") || "rgba(0, 0, 0, 0.85)";
+		var r	= parseInt(v.substr(1,2), 16);
+		var g	= parseInt(v.substr(3,2), 16);
+		var b	= parseInt(v.substr(5,2), 16);
 
-		this.shadowRoot.innerHTML = `
-			<style>
-				:host {
-					position: absolute;
-					width: ${size}px;
-					height: ${size}px;
-					border-radius: 50%;
-					background: radial-gradient(circle farthest-corner at 33% 33%, ${startFill} 0%, ${endFill} 80%), radial-gradient(circle farthest-corner at 45% 45%, rgba(0, 0, 0, 0) 50%, #000000 80%);
-				}
-			</style>
-		`;
+		if (r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255) return false;
 		
-		super.connectedCallback();
-	};
+		return true;
+	}
 }
 
-customElements.define("ng-check", ngCheck);
-customElements.define("ng-rect", ngRect);
-customElements.define("ng-circle", ngCircle);
-customElements.define("ng-sphere", ngSphere);
-
-class ngImg extends ngCellEx
-{
-	#target;
-	//#src;
-	
-	constructor() {
-		super();
-		
-		//this.#src = this.getAttribute("src");
-	}
-
-	connectedCallback() {
-		const border		= this.getAttribute("border") || "unset";
-		const borderRadius	= this.getAttribute("border-radius") || "unset";
-		const link			= this.getAttribute("link");
-		
-		var attr = [];
-		for (var i = 0; i < this.attributes.length; i++) {
-			if (["alt","width","height"].includes(this.attributes[i].name)) attr.push(`${this.attributes[i].name}="${this.attributes[i].value}"`);
-		}
-		
-		this.shadowRoot.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ngImg.css";
-				${ninegrid.getCustomPath(this,"ngImg.css")}
-
-				img {
-					border: ${border};
-					border-radius: ${borderRadius};
-					cursor: ${link == "true"? "pointer" : "unset"};
-				}
-				img:hover {
-					filter: ${link == "true"? "brightness(80%)" : "unset"};
-				}
-			</style>
-
-			<div class="ng-wrap">
-				<img ${attr.join(" ")} class="renderer" />
-			</div>
-		`;
-
-		/** img,div class="renderer" 일때 ngCell에서 link로 연결 */
-		
-		super.connectedCallback();
-		
-		this.#target = this.shadowRoot.querySelector("img");
-	};
-	
-	dataRefresh = (v) => {
-
-		var src = this.getAttribute("src");// || this.cell.getAttribute("src");
-		
-		var exprSrc = (src) ? this.getExprValue(src, this.cell.closest("tr").data, this.cell.dataset.row) : "";
-		
-		src = exprSrc || this.getDisplayText();
-		this.#target.src = src;
-		
-		src ? $(this.#target).show() : $(this.#target).hide();
-
-		if (!v) this.reset();
-	};
-	
-	r = (owner, cell) => {
-
-		const src = this.getAttribute("icon-src") || cell.getAttribute("icon-src");
-		var exprSrc = (src) ? this.getExprValue(src, cell.closest("tr").data, cell.dataset.row) : "";
-		
-		this.#target.src = exprSrc || this.value;
-	};
-}
-
-class ngSvg extends ngCellEx
-{
-	#target;
-	#src;
-	
-	constructor() {
-		super();
-		
-		this.#src = this.getAttribute("src");
-	}
-
-	connectedCallback() {
-		const border		= this.getAttribute("border") || "unset";
-		const borderRadius	= this.getAttribute("border-radius") || "unset";
-		const link			= this.getAttribute("link");
-				
-		this.shadowRoot.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ngSvg.css";
-				${ninegrid.getCustomPath(this,"ngSvg.css")}
-				
-				div {
-					border: ${border};
-					border-radius: ${borderRadius};
-					cursor: ${link == "true"? "pointer" : "unset"};
-				}
-				div:hover {
-					filter: ${link == "true"? "brightness(80%)" : "unset"};
-				}
-			</style>
-
-			<div class="ng-wrap"></div>
-		`;
-
-		/** img,div class="renderer" 일때 ngCell에서 link로 연결 */
-		
-		super.connectedCallback();
-		
-		this.#target = this.shadowRoot.querySelector("div");
-	};
-	
-	dataRefresh = (v) => {
-		
-		const src = this.getAttribute("src");// || this.cell.getAttribute("src");
-
-		var exprSrc = (src) ? this.getExprValue(src, this.cell.closest("tr").data, this.cell.dataset.row) : "";
-
-		this.#target.innerHTML = exprSrc || this.getDisplayText();
-		
-		if (!v) this.reset();
-	};
-	
-	
-	r = (owner, cell) => {
-
-		const src = this.getAttribute("icon-src") || cell.getAttribute("icon-src");
-		var exprSrc = (src) ? this.getExprValue(src, cell.closest("tr").data, cell.dataset.row) : "";
-		
-		this.#target.innerHTML = exprSrc || this.value;
-	};
-}
-
-customElements.define("ng-img", ngImg);
-customElements.define("ng-svg", ngSvg);
+customElements.define("ng-input-color", ngInputColor);
 
-class ngImport
-{
-	#owner;
-	
-	constructor (owner) {
-		//super();
-		
-		this.#owner = owner;
-	};
-	
-	importExcel = () => {
-		this.#openFileDialog();
-	};
-	
-	#openFileDialog = () => {
-		if (!this.input) {
-			this.input = document.createElement('input');
-			this.input.type = 'file';
-			this.input.onchange = this.#fileSelectedHandler;
-		}
-		
-		this.input.click();
-	};
-	
-	#fileSelectedHandler = (e) => {
-	    var files = e.target.files;
-	    if (files.length < 1) {
-	        alert('select a file...');
-	        return;
-	    }
-	    var file = files[0];
-	    var reader = new FileReader();
-	    
-	    reader.onload = this.#fileLoadedHandler;
-	    reader.readAsDataURL(file);
-	    reader.onloadend = this.#fileLoadEndHandler;
-	}
-
-	#fileLoadedHandler  = e => {
-		
-	    var match = /^data:(.*);base64,(.*)$/.exec(e.target.result);
-	    if (match == null) {
-	        throw 'Could not parse result'; // should not happen
-	    }
-	    
-	    match[1];
-	    match[2];
-	    //alert(mimeType);
-	    //alert(content);
-	    
-	    
-	    //var fileReader = new FileReader();
-
-	}
-	
-	#fileLoadEndHandler = (e) => {
- 
-		//var arrayBuffer = fileReader.result;
-    	var arrayBuffer = e.target.result;
-
-    	const workbook = new ExcelJS.Workbook();
-    	
-		workbook.xlsx.load(arrayBuffer).then(() => {
-			
-			workbook.worksheets.forEach((sheet) => {
-				sheet.eachRow((row,rowNumber) => {
-					
-					if (rowNumber % 10 == 0) console.log(rowNumber);
-				});
-			});
-		});
-	}
-}
-
-class ngInfo extends HTMLElement
-{
-	#owner;
-	#cell;
-	
-	constructor () {
-		super();
-
-		this.attachShadow({ mode: 'open' });
-	}
-	
-	connectedCallback() {
-
-		const contents = this.innerHTML;
-		
-		this.shadowRoot.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ngInfo.css";
-				${ninegrid.getCustomPath(this,"ngInfo.css")}
-			</style>
-		
-			<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 16 16">
-				<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
-				<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
-			</svg>
-			
-			<div class="panel">
-				${contents}
-			</div>
-		`;
-		
-		this.#owner = this.getRootNode().host;//this.closest("nine-grid");
-		this.#cell = this.closest("th,td");
-		
-		$("svg.icon", this.shadowRoot).on("click", e => {
-			e.preventDefault();
-			e.stopPropagation();
-
-			if ($("div.panel", this.shadowRoot).is(":visible")) {
-				this.#closeAll();
-			}
-			else {
-				this.#closeAll();
-				this.#open();
-			}
-		});
-		
-		$(this).on("click", e => { e.stopPropagation(); });
-	};
-	
-	#open = () => {
-		$("div.panel", this.shadowRoot).show();
-		$(this.#cell).css({overflow: "visible"});
-	};
-	close = () => {
-		$("div.panel", this.shadowRoot).hide();
-		$(this.#cell).css({overflow: "unset"});
-	};
-	
-	#closeAll = () => {
-		this.#owner.body.querySelectorAll("ng-info").forEach(el => {
-			var p = el.shadowRoot.querySelector("div.panel");
-			if ($(p).is(":visible")) {
-				$(p).hide();
-				$(el.closest("th,td")).css({overflow: "unset"});
-			}
-		});
-	};
-}
-
-customElements.define("ng-info", ngInfo);
-
-class ngInputColor extends ngEditableEx
-{
-	#target;
-	
-	constructor() {
-		super();
-	}
-	
-	connectedCallback() {
-		
-		this.shadowRoot.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ngInputColor.css";
-				${ninegrid.getCustomPath(this,"ngInputColor.css")}
-			</style>
-			
-			<input type="color" required />
-			<button tabindex="-1"></button>
-		`;
-		
-		super.connectedCallback();
-		
-		this.#target	= this.shadowRoot.querySelector("input");
-		
-		$("button", this.shadowRoot).on("click", e => { $("input", this.shadowRoot).trigger("click"); });
-		
-		$(this.cell).on("keydown", e => {
-			switch (e.target.tagName) {
-			case "TH": case "TD":
-				if (["Enter"].includes(e.code)) {
-					$(this.#target).trigger("click");
-				}
-				break;
-			}
-		});
-	
-		this.#target.addEventListener("keydown", e => {
-			if (["Enter"].includes(e.code)) {
-				$(this.#target).trigger("click");
-			}
-			else if (["Escape"].includes(e.code)) {
-				this.owner.cell.currentCell = this.cell;
-			}
-			else if (["Tab","PageUp","PageDown","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(e.code)) {
-				this.owner.cell.currentCell = this.cell;
-				this.owner.cell.moveCell(e);
-			}
-		});
-	};
-
-	dataRefresh = (v) => {
-
-		if (this.#isValidColor(this.value)) {
-			this.#target.value = ninegrid.nvl(this.value, "#ffffff");
-			ninegrid.j.querySelectorAll(this).removeClass("invalid");
-		}
-		else {
-			this.#target.value = "#ffffff";
-			ninegrid.j.querySelectorAll(this).addClass("invalid");
-		}
-		
-		this.#target.setAttribute("title", this.value);
-
-		if (!v) this.reset();
-	};
-	
-	#isValidColor = (v) => {
-
-		if (ninegrid.isNull(v)) return true;
-		
-		if (typeof v !== "string" || v.length != 7 || !v.startsWith("#")) return false;
-		
-		var r	= parseInt(v.substr(1,2), 16);
-		var g	= parseInt(v.substr(3,2), 16);
-		var b	= parseInt(v.substr(5,2), 16);
-
-		if (r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255) return false;
-		
-		return true;
-	}
-}
-
-customElements.define("ng-input-color", ngInputColor);
-
-class ngInputDate extends ngEditableEx
-{
-	#target;
-	#type;
-	
-	constructor () {
-		super();
-		
-		this.#type = this.getAttribute("type") || "date";
-		if (!["date","datetime-local","time","week","month"].includes(this.#type)) throw `invalid type : ${this.#type}`;
-	}
-	
-	connectedCallback() {
-		
-		const height = parseInt(this.closest("tr").style.height, 10) - 1;
-		
-		var attr = [];
-		for (var i = 0; i < this.attributes.length; i++) {
-			if (["value","max","min","step"].includes(this.attributes[i].name)) attr.push(`${this.attributes[i].name}="${this.attributes[i].value}"`);
-		}
+class ngInputDate extends ngEditableEx
+{
+	#target;
+	#type;
+	
+	constructor () {
+		super();
+		
+		this.#type = this.getAttribute("type") || "date";
+		if (!["date","datetime-local","time","week","month"].includes(this.#type)) throw `invalid type : ${this.#type}`;
+	}
+	
+	connectedCallback() {
+		
+		const height = parseInt(this.closest("tr").style.height, 10) - 1;
+		
+		var attr = [];
+		for (var i = 0; i < this.attributes.length; i++) {
+			if (["value","max","min","step"].includes(this.attributes[i].name)) attr.push(`${this.attributes[i].name}="${this.attributes[i].value}"`);
+		}
 
 		this.shadowRoot.innerHTML = `
 			<style>
@@ -23464,594 +23085,985 @@ customElements.define("ng-tree-item", ngTreeItem);
 
 //import { ngData } from "./ngData.js";
 
-class ngView
-{
-	#owner;
-	#rawIndex;
-	#height;
-	#ing;
-	#timers = [];
-	
-	constructor(owner) {
-		this.#owner = owner;
-		
-		this.#ing = false;
+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();
+
+			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;
-
-			}
-
-			
-			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--) {
+		/**
+		 * 마지막 페이지 정리
+		 */
+		if (lastRow == this.#owner.data.count() - 1) {
+			var h = 0;
+			for (var i = lastRow; i >= 0; i--) {
 				h += this.getRowHeight(i);
-				rowCount++;
+				
+				if (h > totalSpace) {
+					this.#owner.scrollTo(i + 1);
+					break;
+				}
 			}
-			
-			if  (h > totalHeight) rowCount --;
-			
-			this.#rawIndex = this.#owner.data.count() - rowCount;
-
-			this.#owner.dataManager.viewRecords.rawIndex = this.#rawIndex;
 		}
-		
+	}
+	/**
+	#isLastPage = () => {
+		const arr = this.#owner.body.querySelectorAll(".ng-container-body tbody.bindable tr:not(.nodata)");
+		if (arr.length <= 0) return null;
 
-		return rowCount;
-	};
+		return arr[arr.length - 1].dataset.row == this.#owner.data.count() - 1 ? true : false;
+	}*/
 	
-	#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); });
-			}
-		//}
-		
+	
+	/**
+	 * 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;
 		
-		// 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);
+		this.#owner.row.at = row1;
 		
-		if (trsBody.length > 0) {
-			var startRow = parseInt(this.#rawIndex * this.#owner.template.length);
-		}
+		(row1 >= 0 && row2 >= 0) ? this.#owner.selection.selectArea(matrixRow1, col1, matrixRow2, col2) : this.clearSelection();
 	};
 	
-	#removeGarbageTR = () => {
+	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;
 		
-		var rowCount = Math.min(this.#getRowCount(), this.#owner.data.count());// + this.pin.count();
-
+		this.#owner.row.at = row1;
 		
-		$(".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();
-			}
-		});
+		(row1 >= 0 && row2 >= 0) ? this.#owner.selection.selectArea(matrixRow1, this.#owner.firstCol, matrixRow2, this.#owner.lastCol) : this.clearSelection();
 	};
 	
-	#resetTR3 = () => {
-
-		// 1. TR 생성
-		this.#createTR();
-
-		this.#removeGarbageTR();
-
-		// 5. nodata resize
+	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);
 
-		var h = this.#height.body - this.#height.thead - this.#height.tfoot - this.#getTrHeight();
-		$(".ng-container tbody.bindable tr.nodata", this.#owner.body).height(h);
+		(col1 >= 0 && col2 >= 0) ? this.#owner.selection.selectArea(matrixRow1, col1, matrixRow2, col2) : this.clearSelection();
+	};
+	
+	selectCell = (oRow, oCol, subrow) => {
 		
-		/**
-		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;
-		*/
+		const row		= this.#getRowIndex(oRow);
+		const col		= this.#getColIndex(oCol);
+		const matrixRow	= parseInt(row * this.#owner.template.length) + ninegrid.nvl(subrow, 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;
-
+		this.#owner.row.at = row;
 		
-		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);
+		(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}`;
 		}
 	};
+	
+	#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);
+	}
+}
 
-	#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();
+/**
+ * button.filterOptions = [{
+ * 	colnm: "userId",
+ *  data: [],
+ * }]
+ * button.
+ */
+class ngFiltering
+{
+	#owner;
+	#isFiltering;
+	
+	constructor(owner) {
+        this.#owner = owner;
+        this.#isFiltering = false;
 
-		
-		// 5. nodata resize
+        const filterPanel = document.createElement("ng-filter-panel"); // ✅ 필터 패널 생성
+        filterPanel.style.display = "none"; // ✅ 숨김 처리
+        this.#owner.shadowRoot.appendChild(filterPanel); // ✅ Shadow DOM 내부에 추가
+    }
+	
+	initialize = () => {
 		/**
-		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
+		 * 1. grid attr == filter : on();
+		 */
+		this.#isFiltering = false;
+		this.#owner.data.clearFilter();
 	};
 	
-	#refreshData = () => {
+	isFiltering = () => {
+		return this.#isFiltering;
+	};
+	
+	on = (v) => {
 		
-		for (const v of this.#timers) {
-			clearTimeout(v);
-		}
-		this.#timers = [];
+		this.#isFiltering = true;
+		const lastRowIndex = this.#getLastRowIndex();
 
-		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.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` 제거
 
-					$("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 });
+				if (options.length > 0) {
+					td.querySelector("ng-filter-button")?.remove();
 
-					$(tr).css({ "height" : h }).height(h);
-					trsLeft.eq(i).css({ "height" : h }).height(h);
-					trsRight.eq(i).css({ "height" : h }).height(h);
-				});
+					const filterButton = document.createElement("ng-filter-button");
+					td.appendChild(filterButton);
+					filterButton.filterOptions = options;
+				}
 			}
-			
-			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;
+		});
+	};
+
+	off = () => {
+		this.#isFiltering = false;
 
-			
-			this.#owner.refreshBindRows();
+		this.#owner.body.querySelectorAll(".ng-table ng-filter-button").forEach((el) => {
+			el.remove(); // ✅ 요소 삭제
+		});
+	};
 
-			this.#owner.refreshData();
-			
-			this.#owner.paging.totalCount = this.#owner.data.countNF();
-			
-			this.#owner.body.querySelector("ng-vscrollbar").refresh();
+	/**
+	clear = () => {
+		console.log(this.#owner.dataManager.rawRecords);
+		this.#owner.dataManager.rawRecords.map(item => { item.__ng.filtered = 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));
-		
-		//if (!this.timers) this.timers = [];
-		this.#timers.push(setTimeout(() => {
-			this.#owner.refreshDataV2();
-		}));
+		this.#records = this.#owner.dataManager.rawRecords.filter(item => { return !item.__ng.deleted && !item.__ng.filtered; } );
+		return this.#records;
 	}
 	
-	#r = () => {
+	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) => {
 
-		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));
-		});
+		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;
 		
-		rows = [...new Set(rows)];
+		this.#owner.data.clearFilter();
 		
-		this.#owner.body.querySelectorAll(".ng-container tbody.bindable tr:not(.nodata)").forEach(tr => {
-			const index = parseInt(tr.sectionRowIndex / this.#owner.template.length);
+		Object.entries(jsonFilter).forEach(([key, arr]) => {
+			const idx = this.#owner.fields.indexOf(key);
 
-			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.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 => {
 
-		rows.forEach(row => {
-			const data = this.#owner.data.get(row);
+				let options = el.filterOptions;
 
-			this.#owner.body.querySelectorAll(`.ng-container tbody.bindable tr[data-row="${row}"]`).forEach(tr => {
-				tr.data	= data;
+				options.forEach(opt => {
+					if (opt.colnm === key) opt.data = arr;
+				});
+
+				el.filterOptions = options;
 			});
 		});
 		
-		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.#refreshData();
 		
-		//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.#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.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();
+class ngFilterButton extends HTMLElement
+{
+	#owner;
+	#filterOptions;
+	
+	constructor () {
+		super();
+	}
+
+	connectedCallback() {
+		this.#owner = this.getRootNode().host;//this.closest("nine-grid");
+		
+		this.removeEventListener("click", this.#onClick);
+		this.addEventListener("click", this.#onClick);
 	};
 	
-	getVisibleFirstRow = () => {
-		var tr = this.#owner.body.querySelector(".ng-container-body tbody.bindable tr:first-child");
-		return parseInt(tr.dataset.row);
+	get filterOptions() {
+		return this.#filterOptions;
 	};
+	set filterOptions(v) {
+		this.#filterOptions = v;
+		this.classList.toggle('filtered', this.#filterOptions.some(item => item.data.length > 0));
+	}
 	
-	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;
+	#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);
+    };
+}
+
+class ngFilterPanel extends HTMLElement
+{
+	#owner;
+	#button;
+	#timer;
+	
+	constructor () {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+
+		this.#owner = this.getRootNode().host;
+
+		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.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';
+		});
 	};
 	
-	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(")", ""));
-	};
 	
-	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();
+	#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();
 	};
-	
-	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;
@@ -27328,18 +27340,7 @@ class aiMessage extends HTMLElement
 	set data(v) {
 		console.log(v);	}
 
-	#isEllipsisActive = () => {
-
-		const element = this.shadowRoot.querySelector(".message");		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;
-	}
+	
 
 	#init = () => {
 
@@ -27377,29 +27378,7 @@ class aiMessage extends HTMLElement
 			alert(this.#message);
 		});
 
-		
-
-		setTimeout(() => {
-			//const elMessage = this.shadowRoot.querySelector(".message");
-			const elMore = this.shadowRoot.querySelector(".more");
-
-			console.log(this.#isEllipsisActive());
-
-			//elMore.style.display = "flex";
-			//elMore.style.position = "absolute";
-
-			//console.log(elMessage.scrollWidth, elMessage.clientWidth);
-
-			//elMore.style.display = (elMessage.scrollWidth > elMessage.clientWidth) ? "flex" : "none";
-			if (this.#isEllipsisActive()) {
-				elMore.style.display = "flex";
-				elMore.style.position = "absolute";
-			}
-			else {
-				elMore.style.display = "none";
-			}
-		}, 100);
-		
+		this.shadowRoot.querySelector(".more").style.display = (ninegrid.isEllipsis(this.shadowRoot.querySelector(".message"))) ? "flex" : "none";
 	};
 }