@livenetworks/ashlar 2.1.9 → 2.1.11

package/components/ln-table/src/ln-table.js

@@ -1,60 +1,20 @@
-import { cloneTemplateScoped, createBatcher, createWindowCache, dispatch, fill, fillTemplate, getLocale, readValue, registerComponent, requestData, attrBool, attrStr, attrSpec, defineAttrs } from '../../ln-core';
-import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, toggleSelectAll } from './table-model.js';
+import { cloneTemplateScoped, dispatch, fill, fillTemplate, readValue, registerComponent, requestData, attrBool, attrStr, attrSpec, defineAttrs } from '../../ln-core';
+import { calculateSelectionState, calculateVirtualWindow, calculatePoolSize, toggleRowSelection, toggleSelectAll } from './table-model.js';
 
 (function () {
 	const DOM_SELECTOR = 'data-ln-table';
 	const DOM_ATTRIBUTE = 'lnTable';
-	const EMPTY_TEMPLATE = 'data-ln-table-empty';
 	// Tuning constant — duplicated in ln-data-table for component independence
 	const VIRTUAL_THRESHOLD = 200;
 	const BUFFER_ROWS = 15;
-	const WINDOW_DEFAULT = 1000;
-	const WINDOW_PAGE = 200;
-	const FETCH_DEBOUNCE = 120;
 
 	if (window[DOM_ATTRIBUTE] !== undefined) return;
 
 	// ─── Attribute Contract (SSOT) ──────────────────────────
-	function _applyWindow(inst, val) {
-		if (!inst || !inst.isDataDriven) return;
-		const present = inst.dom.hasAttribute('data-ln-table-window');
-		if (present && !inst._windowed) {
-			inst._enterWindowedMode();
-			inst._kickWindowInitial();
-		} else if (!present && inst._windowed) {
-			inst._exitWindowedMode();
-		} else if (present && inst._windowed) {
-			const v = parseInt(val, 10);
-			if (v > 0) inst._cache.configure({ windowSize: v });
-		}
-	}
-
-	function _applyWindowPage(inst, val) {
-		if (!inst || !inst.isDataDriven || !inst._windowed || !inst._cache) return;
-		const v = parseInt(val, 10);
-		if (v > 0) inst._cache.configure({ pageSize: v });
-	}
-
-	function _applyWindowThreshold(inst, val) {
-		if (!inst || !inst.isDataDriven || !inst._windowed || !inst._cache) return;
-		const v = parseInt(val, 10);
-		if (v >= 0) inst._cache.configure({ threshold: v });
-	}
-
-	function _applyCount(inst, val) {
-		if (!inst || !inst.isDataDriven || !inst._windowed || !inst._cache) return;
-		const v = parseInt(val, 10);
-		if (v >= 0) inst._cache.setGrandTotal(v);
-	}
-
 	const ATTRIBUTES = {
 		'data-ln-table':                  { prop: 'name', type: 'string', read: attrStr, fallback: '', description: 'Table instance name or identifier' },
 		'data-ln-table-source':           { prop: 'source', type: 'string', read: attrStr, fallback: '', description: 'Source store or coordinator addressing' },
 		'data-ln-table-selectable':       { prop: '_selectable', type: 'boolean', read: attrBool, description: 'Enables row selection check controls' },
-		'data-ln-table-window':           { type: 'integer', fallback: WINDOW_DEFAULT, min: 10, effect: _applyWindow, description: 'Virtual scrolling window size in rows' },
-		'data-ln-table-window-page':      { type: 'integer', fallback: WINDOW_PAGE, min: 5, effect: _applyWindowPage, description: 'Virtual scrolling slice page size' },
-		'data-ln-table-window-threshold': { type: 'integer', fallback: 50, min: 0, effect: _applyWindowThreshold, description: 'Scroll threshold margin in pixels to trigger page fetch' },
-		'data-ln-table-count':            { type: 'integer', min: 0, effect: _applyCount, description: 'Total record count override for virtual scrollbar calculation' },
 		'data-ln-table-row':              { type: 'marker', description: 'Table row template element' },
 		'data-ln-table-row-id':           { type: 'string', description: 'Record identifier on row element' },
 		'data-ln-table-row-action':       { type: 'trigger', description: 'Action trigger inside a table row' },
@@ -62,7 +22,6 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 		'data-ln-table-col':              { type: 'string', description: 'Column header identifier or field mapping' },
 		'data-ln-table-col-select':       { type: 'trigger', description: 'Header select-all checkbox trigger' },
 		'data-ln-table-cell-attr':        { type: 'string', description: 'Cell attribute template mapping' },
-		'data-ln-table-empty':            { type: 'marker', description: 'Container for table empty state' },
 		'data-ln-table-select-all-label': { type: 'string', description: 'Accessibility label for select-all header trigger' }
 	};
 
@@ -73,17 +32,30 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 		? new Intl.Collator(document.documentElement.lang || undefined, { sensitivity: 'base' })
 		: null;
 
-	function _formatNum(n, dom) {
-		if (n == null || isNaN(n)) return '';
-		try {
-			return new Intl.NumberFormat(getLocale(dom)).format(n);
-		} catch (e) {
-			return String(n);
+	function _setNumberValue(el, val) {
+		if (!el) return;
+		if (val == null || isNaN(val)) {
+			el.removeAttribute('data-ln-value');
+			if ('value' in el && el.tagName === 'DATA') el.value = '';
+			if (el.lnNumber) {
+				el.lnNumber.value = NaN;
+			} else {
+				el.textContent = '';
+			}
+			return;
+		}
+		const s = String(val);
+		el.setAttribute('data-ln-value', s);
+		if ('value' in el && el.tagName === 'DATA') el.value = s;
+		if (el.lnNumber) {
+			el.lnNumber.value = val;
+		} else {
+			el.textContent = s;
 		}
 	}
 
-	function _findScrollContainer(el) {
-		let p = el.parentElement;
+	function _findScrollContainer(el, table) {
+		let p = table ? table.parentElement : el;
 		while (p && p !== document.body && p !== document.documentElement) {
 			const cs = getComputedStyle(p);
 			const oy = cs.overflowY;
@@ -119,6 +91,10 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 				? this._selectedSpan.parentElement
 				: null;
 		}
+		this._loadingIndicator = dom.querySelector('[data-ln-table-loading]');
+		if (this._loadingIndicator) {
+			this._loadingIndicator.classList.add('hidden');
+		}
 
 		this.isDataDriven = dom.hasAttribute('data-ln-table-source');
 
@@ -139,6 +115,11 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 		this._scrollHandler = null;
 		this._scrollContainer = null;
 		this._colgroup = null;
+		this._rowPool = null;
+		this._topSpacer = null;
+		this._topTd = null;
+		this._bottomSpacer = null;
+		this._bottomTd = null;
 
 		const self = this;
 
@@ -206,6 +187,7 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 
 		if (this.isDataDriven) {
 			this.isLoaded = false;
+			this._initialLoaded = false;
 			this.totalCount = 0;
 			this.visibleCount = 0;
 			this.currentSort = null;
@@ -216,11 +198,6 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 			this._lastFiltered = 0;
 			this._hasInitialSeed = false;
 
-			// Windowed (sliding-window) server-side virtualization — opt-in
-			this._windowed = false;
-			this._cache = null;
-			if (this.isDataDriven && dom.hasAttribute('data-ln-table-window')) this._enterWindowedMode();
-
 			// --- Event listeners ---
 			this._onSetData = function (e) {
 				const detail = e.detail || {};
@@ -232,15 +209,6 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 					return;
 				}
 
-				if (self._windowed) {
-					// Only an accepted, authoritative page ends the refresh. A declined
-					// one means the source has not resolved the new query yet; a
-					// provisional one is the store's own answer, rendered while the
-					// server query is still out.
-					if (self._cache.ingest(detail) && !detail.provisional) dom.classList.remove('ln-table--loading');
-					return;
-				}
-
 				self._data = newData;
 				self._lastTotal = newTotal;
 				self._lastFiltered = detail.filtered != null ? detail.filtered : self._data.length;
@@ -248,9 +216,14 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 				self.totalCount = self._lastTotal;
 				self.visibleCount = self._lastFiltered;
 				self.isLoaded = true;
+				self._initialLoaded = true;
 				self._hasInitialSeed = false;
 
 				dom.classList.remove('ln-table--loading');
+				dom.setAttribute('aria-busy', 'false');
+				if (self._loadingIndicator) {
+					self._loadingIndicator.classList.add('hidden');
+				}
 
 				self._vStart = -1;
 				self._vEnd = -1;
@@ -268,40 +241,18 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 			dom.addEventListener('ln-table:set-data', this._onSetData);
 
 			this._onSetLoading = function (e) {
-				const loading = e.detail && e.detail.loading;
-				dom.classList.toggle('ln-table--loading', !!loading);
-				if (loading) {
+				const loading = !!(e.detail && e.detail.loading);
+				dom.classList.toggle('ln-table--loading', loading);
+				dom.setAttribute('aria-busy', loading ? 'true' : 'false');
+				if (loading && !self._initialLoaded) {
 					self.isLoaded = false;
+					self._showLoadingState();
 				}
-			};
-			dom.addEventListener('ln-table:set-loading', this._onSetLoading);
-
-			this._onPageFailed = function (e) {
-				if (!self._windowed || !self._cache) return;
-				self._cache.release(e.detail && e.detail.offset);
-			};
-			dom.addEventListener('ln-table:page-failed', this._onPageFailed);
-
-			this._onRequestRevalidate = function () {
-				if (!self._windowed || !self._cache) return;
-				self._cache.revalidate();
-			};
-			dom.addEventListener('ln-table:request-revalidate', this._onRequestRevalidate);
-
-			// The source owns the query, so a query change reaches the view as a
-			// restart order, not as query state — the window drops to page 0 and
-			// the composed query is resolved at serve time.
-			this._onRequestInvalidate = function (e) {
-				if (!self._windowed || !self._cache) return;
-				if (e && e.detail && e.detail.query) {
-					const q = e.detail.query;
-					if (q.search !== undefined) self.currentSearch = q.search;
-					if (q.filters !== undefined) self.currentFilters = q.filters;
-					if (q.sort !== undefined) self.currentSort = q.sort;
+				if (self._loadingIndicator) {
+					self._loadingIndicator.classList.toggle('hidden', !(loading && self._initialLoaded));
 				}
-				self._requestData();
 			};
-			dom.addEventListener('ln-table:request-invalidate', this._onRequestInvalidate);
+			dom.addEventListener('ln-table:set-loading', this._onSetLoading);
 
 			// --- Sort ---
 			this._onSort = function (e) {
@@ -312,11 +263,6 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 			};
 			dom.addEventListener('ln-sort:change', this._onSort);
 
-			// D4 — windowed tables cannot select rows they have never fetched
-			if (this._windowed && this._selectable && this._selectAllCheckbox) {
-				this._selectAllCheckbox.classList.add('hidden');
-			}
-
 			// --- Row Click & Actions ---
 			this._onRowClick = function (e) {
 				if (e.target.closest('[data-ln-table-row-select]')) return;
@@ -358,26 +304,23 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 			};
 			if (this.tbody) this.tbody.addEventListener('click', this._onRowAction);
 
-
-
-			// Local hydration of initial SSR rows
+			// Local hydration of initial SSR rows or initial loading state
 			if (this.tbody && this.tbody.rows.length > 0) {
 				this._parseRows();
+			} else {
+				this._showLoadingState();
+				dom.setAttribute('aria-busy', 'true');
 			}
 
 			// Initial request-data deferred so coordinators have attached listeners
 			setTimeout(function () {
 				if (!self.dom || !document.contains(self.dom)) return;
-				if (self._windowed) {
-					self._kickWindowInitial();
-				} else {
-					dispatch(dom, 'ln-table:request-data', {
-						table: self.name,
-						sort: self.currentSort,
-						filters: self.currentFilters,
-						search: self.currentSearch
-					});
-				}
+				dispatch(dom, 'ln-table:request-data', {
+					table: self.name,
+					sort: self.currentSort,
+					filters: self.currentFilters,
+					search: self.currentSearch
+				});
 			}, 0);
 
 		} else {
@@ -555,18 +498,25 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 		if (!this.tbody) return;
 
 		if (this.isDataDriven) {
-			if (this._windowed) { this._renderWindowed(); return; }
 			const total = this._lastTotal;
 			const filtered = this.visibleCount;
 
 			if (total === 0) {
 				this._disableVirtualScroll();
+				if (!this.isLoaded) {
+					this._showLoadingState();
+					return;
+				}
 				this._showEmptyState();
 				return;
 			}
 
 			if (this._filteredData.length === 0 || filtered === 0) {
 				this._disableVirtualScroll();
+				if (!this.isLoaded) {
+					this._showLoadingState();
+					return;
+				}
 				this._showEmptyState();
 				return;
 			}
@@ -595,8 +545,15 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 	};
 
 	_component.prototype._renderAll = function () {
-		if (this.isDataDriven) {
-			const data = this._filteredData;
+		this._rowPool = null;
+		this._topSpacer = null;
+		this._topTd = null;
+		this._bottomSpacer = null;
+		this._bottomTd = null;
+
+		const data = this._filteredData;
+
+		if (this.isDataDriven || (data.length > 0 && !data[0].html)) {
 			const frag = document.createDocumentFragment();
 
 			for (let i = 0; i < data.length; i++) {
@@ -610,7 +567,6 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 			if (this._selectable) this._updateSelectAll();
 		} else {
 			const html = [];
-			const data = this._filteredData;
 			for (let i = 0; i < data.length; i++) html.push(data[i].html);
 
 			this.tbody.innerHTML = html.join('');
@@ -633,10 +589,7 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 				this._rowHeight = this.tbody.rows[0].offsetHeight || 40;
 			} else {
 				let tempRow = null;
-				if (this._windowed) {
-					const sample = this._cache ? this._cache.peek() : null;
-					tempRow = sample ? this._buildRow(sample) : this._buildPlaceholderRow();
-				} else if (this.isDataDriven && this._data.length > 0) {
+				if (this.isDataDriven && this._data.length > 0) {
 					tempRow = this._buildRow(this._data[0]);
 				}
 				if (tempRow && this.tbody) {
@@ -647,18 +600,21 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 			}
 		}
 
-		if (this.isDataDriven) {
-			this._scrollContainer = _findScrollContainer(this.dom);
-		} else {
-			this._scrollContainer = null;
-		}
+		this._scrollContainer = _findScrollContainer(this.dom, this.table);
 		const scrollTarget = this._scrollContainer || window;
 
+		// Disable browser scroll anchoring on table, tbody, and scroll container
+		// to prevent runaway scroll feedback loops when spacer heights dynamically resize.
+		if (this.dom) this.dom.style.overflowAnchor = 'none';
+		if (this.table) this.table.style.overflowAnchor = 'none';
+		if (this.tbody) this.tbody.style.overflowAnchor = 'none';
+		if (this._scrollContainer) this._scrollContainer.style.overflowAnchor = 'none';
+
 		this._scrollHandler = function () {
 			if (self._rafId) return;
 			self._rafId = requestAnimationFrame(function () {
 				self._rafId = null;
-				self._windowed ? self._renderWindowed() : self._renderVirtual();
+				self._renderVirtual();
 			});
 		};
 
@@ -683,123 +639,205 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 		}
 		this._vStart = -1;
 		this._vEnd = -1;
+		this._rowPool = null;
+		this._topSpacer = null;
+		this._topTd = null;
+		this._bottomSpacer = null;
+		this._bottomTd = null;
 	};
 
-	_component.prototype._renderVirtual = function () {
-		const data = this._filteredData;
-		const total = data.length;
-		const rowH = this._rowHeight;
-		if (!rowH || !total) return;
+	// ─── Row Pool (Cheetah / Glide style DOM Recycling) ────────
 
-		const theadH = this.thead ? this.thead.offsetHeight : 0;
-		const sc = this._scrollContainer;
-		let scrollIntoData;
-		let viewportH;
+	_component.prototype._compileRowBindings = function (tr) {
+		const bindings = {
+			textNodes: [],
+			attrs: [],
+			cellAttrs: []
+		};
 
-		if (sc) {
-			const tableRect = this.table.getBoundingClientRect();
-			const scRect = sc.getBoundingClientRect();
-			const dataStartInContainer = (tableRect.top - scRect.top) + sc.scrollTop + theadH;
-			scrollIntoData = sc.scrollTop - dataStartInContainer;
-			viewportH = sc.clientHeight;
-		} else {
-			const tableRect = this.table.getBoundingClientRect();
-			const tableTopInPage = tableRect.top + window.scrollY;
-			const dataStartInPage = tableTopInPage + theadH;
-			scrollIntoData = window.scrollY - dataStartInPage;
-			viewportH = window.innerHeight;
+		const walker = document.createTreeWalker(tr, NodeFilter.SHOW_TEXT);
+		while (walker.nextNode()) {
+			const node = walker.currentNode;
+			if (node.textContent.indexOf('{{') !== -1) {
+				const parent = node.parentElement;
+				bindings.textNodes.push({
+					node: node,
+					raw: node.textContent,
+					el: parent,
+					isLeaf: !!(parent && parent.children.length === 0)
+				});
+			}
 		}
 
-		const vw = calculateVirtualWindow(scrollIntoData, viewportH, rowH, total, BUFFER_ROWS);
-		const startRow = vw.start;
-		const endRow = vw.end;
-
-		if (startRow === this._vStart && endRow === this._vEnd) return;
-		this._vStart = startRow;
-		this._vEnd = endRow;
+		const elements = Array.from(tr.querySelectorAll('*'));
+		if (tr.nodeType === 1) elements.push(tr);
+
+		for (let i = 0; i < elements.length; i++) {
+			const el = elements[i];
+			if (el.hasAttribute('data-ln-table-cell-attr')) {
+				const pairs = el.getAttribute('data-ln-table-cell-attr').split(',');
+				for (let j = 0; j < pairs.length; j++) {
+					const parts = pairs[j].trim().split(':');
+					if (parts.length === 2) {
+						bindings.cellAttrs.push({
+							el: el,
+							field: parts[0].trim(),
+							attr: parts[1].trim()
+						});
+					}
+				}
+			}
 
-		const colSpan = this.ths.length || 1;
-		const topH = vw.topPadding;
-		const bottomH = vw.bottomPadding;
+			const attrs = el.attributes;
+			for (let j = 0; j < attrs.length; j++) {
+				const a = attrs[j];
+				if (a.value.indexOf('{{') !== -1) {
+					bindings.attrs.push({
+						el: el,
+						name: a.name,
+						raw: a.value
+					});
+				}
+			}
+		}
 
-		if (this.isDataDriven) {
-			const frag = document.createDocumentFragment();
+		tr._lnBindings = bindings;
+		return bindings;
+	};
 
-			if (topH > 0) {
-				const topSpacer = document.createElement('tr');
-				topSpacer.className = 'ln-table__spacer';
-				topSpacer.setAttribute('aria-hidden', 'true');
-				const topTd = document.createElement('td');
-				topTd.setAttribute('colspan', colSpan);
-				topTd.style.height = topH + 'px';
-				topSpacer.appendChild(topTd);
-				frag.appendChild(topSpacer);
+	_component.prototype._createTemplateRow = function () {
+		let clone = cloneTemplateScoped(this.dom, this.name + '-row', 'ln-table');
+		if (!clone) {
+			const genericTpl = this.dom.querySelector('template[data-ln-table-row]');
+			if (genericTpl) {
+				clone = document.importNode(genericTpl.content, true);
 			}
+		}
 
-			for (let i = startRow; i < endRow; i++) {
-				const tr = this._buildRow(data[i]);
-				if (tr) frag.appendChild(tr);
-			}
+		let tr = clone ? (clone.querySelector('[data-ln-table-row]') || clone.firstElementChild) : null;
 
-			if (bottomH > 0) {
-				const bottomSpacer = document.createElement('tr');
-				bottomSpacer.className = 'ln-table__spacer';
-				bottomSpacer.setAttribute('aria-hidden', 'true');
-				const bottomTd = document.createElement('td');
-				bottomTd.setAttribute('colspan', colSpan);
-				bottomTd.style.height = bottomH + 'px';
-				bottomSpacer.appendChild(bottomTd);
-				frag.appendChild(bottomSpacer);
+		if (!tr) {
+			if (window.lnDebug || (typeof document !== 'undefined' && document.body && document.body.hasAttribute('data-ln-debug'))) {
+				console.warn(`[ln-table] Missing row template: <template data-ln-template="${this.name}-row">`);
 			}
+			return null;
+		}
 
-			this.tbody.replaceChildren(frag);
+		this._compileRowBindings(tr);
+		return tr;
+	};
 
-			if (this._selectable) this._updateSelectAll();
-		} else {
-			let html = '';
+	_component.prototype._updateRow = function (tr, record) {
+		if (!record) return;
+		tr._lnRecord = record;
+		if (record.id != null) {
+			tr.setAttribute('data-ln-table-row-id', record.id);
+		}
 
-			if (topH > 0) {
-				html += '<tr class="ln-table__spacer" aria-hidden="true"><td colspan="' +
-					colSpan + '" style="height:' + topH + 'px;padding:0;border:none"></td></tr>';
-			}
-			for (let i = startRow; i < endRow; i++) html += data[i].html;
-			if (bottomH > 0) {
-				html += '<tr class="ln-table__spacer" aria-hidden="true"><td colspan="' +
-					colSpan + '" style="height:' + bottomH + 'px;padding:0;border:none"></td></tr>';
+		const bindings = tr._lnBindings || this._compileRowBindings(tr);
+
+		const textNodes = bindings.textNodes;
+		for (let i = 0; i < textNodes.length; i++) {
+			const item = textNodes[i];
+			const val = item.raw.replace(
+				/\{\{\s*(\w+)\s*\}\}/g,
+				function (_, key) { return record[key] !== undefined && record[key] !== null ? record[key] : ''; }
+			);
+			if (item.isLeaf && item.el) {
+				item.el.textContent = val;
+			} else if (item.node && item.node.parentNode) {
+				item.node.textContent = val;
+			} else if (item.el) {
+				item.el.textContent = val;
 			}
+		}
 
-			this.tbody.innerHTML = html;
+		const attrs = bindings.attrs;
+		for (let i = 0; i < attrs.length; i++) {
+			const item = attrs[i];
+			item.el.setAttribute(
+				item.name,
+				item.raw.replace(
+					/\{\{\s*(\w+)\s*\}\}/g,
+					function (_, key) { return record[key] !== undefined && record[key] !== null ? record[key] : ''; }
+				)
+			);
+		}
 
-			if (this._selectable) this._restoreSelection();
+		const cellAttrs = bindings.cellAttrs;
+		for (let i = 0; i < cellAttrs.length; i++) {
+			const item = cellAttrs[i];
+			const val = record[item.field];
+			if (val != null) {
+				item.el.setAttribute(item.attr, val);
+			}
 		}
-	};
 
-	// ─── Windowed virtualization (opt-in sliding window) ───────
+		if (bindings.textNodes.length === 0 && bindings.attrs.length === 0 && this.ths.length > 0) {
+			for (let j = 0; j < this.ths.length; j++) {
+				const colName = this.ths[j].getAttribute('data-ln-table-col');
+				if (colName && j < tr.cells.length && record[colName] != null) {
+					tr.cells[j].textContent = String(record[colName]);
+				}
+			}
+		}
 
-	_component.prototype._buildPlaceholderRow = function () {
-		const tr = document.createElement('tr');
-		tr.className = 'ln-table__placeholder';
-		tr.setAttribute('aria-hidden', 'true');
-		const td = document.createElement('td');
-		td.setAttribute('colspan', this.ths.length || 1);
-		td.style.height = this._rowHeight + 'px';
-		tr.appendChild(td);
-		return tr;
+		if (this._selectable) {
+			const id = record.id != null ? String(record.id) : null;
+			const isSelected = id != null && this.selectedIds.has(id);
+			tr.classList.toggle('ln-row-selected', isSelected);
+			const rowCb = tr.querySelector('[data-ln-table-row-select]');
+			if (rowCb) rowCb.checked = isSelected;
+		}
 	};
 
-	_component.prototype._renderWindowed = function () {
-		if (this.isLoaded && this._cache.logicalTotal === 0) {
-			this._disableVirtualScroll();
-			this._showEmptyState();
-			return;
+	_component.prototype._ensureRowPool = function (requiredCount, colSpan) {
+		if (!this._rowPool) {
+			this._rowPool = [];
+			this._topSpacer = document.createElement('tr');
+			this._topSpacer.className = 'ln-table__spacer';
+			this._topSpacer.setAttribute('aria-hidden', 'true');
+			this._topSpacer.style.overflowAnchor = 'none';
+			this._topTd = document.createElement('td');
+			this._topTd.setAttribute('colspan', colSpan);
+			this._topTd.style.padding = '0';
+			this._topTd.style.border = 'none';
+			this._topTd.style.overflowAnchor = 'none';
+			this._topSpacer.appendChild(this._topTd);
+
+			this._bottomSpacer = document.createElement('tr');
+			this._bottomSpacer.className = 'ln-table__spacer';
+			this._bottomSpacer.setAttribute('aria-hidden', 'true');
+			this._bottomSpacer.style.overflowAnchor = 'none';
+			this._bottomTd = document.createElement('td');
+			this._bottomTd.setAttribute('colspan', colSpan);
+			this._bottomTd.style.padding = '0';
+			this._bottomTd.style.border = 'none';
+			this._bottomTd.style.overflowAnchor = 'none';
+			this._bottomSpacer.appendChild(this._bottomTd);
+
+			this.tbody.replaceChildren(this._topSpacer, this._bottomSpacer);
+		} else {
+			if (this._topTd && this._topTd.getAttribute('colspan') !== String(colSpan)) {
+				this._topTd.setAttribute('colspan', colSpan);
+				this._bottomTd.setAttribute('colspan', colSpan);
+			}
 		}
 
-		if (!this._virtual) this._enableVirtualScroll();
+		while (this._rowPool.length < requiredCount) {
+			const tr = this._createTemplateRow();
+			if (!tr) break;
+			this._rowPool.push(tr);
+			this.tbody.insertBefore(tr, this._bottomSpacer);
+		}
+	};
 
+	_component.prototype._renderVirtual = function () {
+		const data = this._filteredData;
+		const total = data.length;
 		const rowH = this._rowHeight;
-		if (!rowH) return;
+		if (!rowH || !total) return;
 
-		const total = this._cache.logicalTotal;
 		const theadH = this.thead ? this.thead.offsetHeight : 0;
 		const sc = this._scrollContainer;
 		let scrollIntoData;
@@ -824,59 +862,111 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 		const endRow = vw.end;
 
 		if (startRow === this._vStart && endRow === this._vEnd) return;
+		this._vStart = startRow;
+		this._vEnd = endRow;
 
 		const colSpan = this.ths.length || 1;
-		const topH = vw.topPadding;
-		const bottomH = vw.bottomPadding;
-
-		const frag = document.createDocumentFragment();
-
-		if (topH > 0) {
-			const topSpacer = document.createElement('tr');
-			topSpacer.className = 'ln-table__spacer';
-			topSpacer.setAttribute('aria-hidden', 'true');
-			const topTd = document.createElement('td');
-			topTd.setAttribute('colspan', colSpan);
-			topTd.style.height = topH + 'px';
-			topSpacer.appendChild(topTd);
-			frag.appendChild(topSpacer);
+		const neededRows = endRow - startRow;
+
+		this._ensureRowPool(neededRows, colSpan);
+
+		if (vw.topPadding > 0) {
+			this._topTd.style.height = vw.topPadding + 'px';
+			this._topSpacer.style.display = '';
+		} else {
+			this._topTd.style.height = '0px';
+			this._topSpacer.style.display = 'none';
 		}
 
-		for (let i = startRow; i < endRow; i++) {
-			if (this._cache.has(i)) {
-				const tr = this._buildRow(this._cache.get(i));
-				if (tr) frag.appendChild(tr);
+		if (vw.bottomPadding > 0) {
+			this._bottomTd.style.height = vw.bottomPadding + 'px';
+			this._bottomSpacer.style.display = '';
+		} else {
+			this._bottomTd.style.height = '0px';
+			this._bottomSpacer.style.display = 'none';
+		}
+
+		for (let k = 0; k < this._rowPool.length; k++) {
+			const rowEl = this._rowPool[k];
+			const dataIndex = startRow + k;
+			if (k < neededRows && dataIndex < total) {
+				rowEl.style.display = '';
+				const rec = data[dataIndex];
+				if (rec && rec.html) {
+					const temp = document.createElement('tbody');
+					temp.innerHTML = rec.html;
+					const parsedTr = temp.firstElementChild;
+					if (parsedTr) {
+						rowEl.innerHTML = parsedTr.innerHTML;
+						rowEl.className = parsedTr.className;
+						rowEl._lnRecord = rec;
+						if (rec.id != null) rowEl.setAttribute('data-ln-table-row-id', rec.id);
+					}
+				} else {
+					this._updateRow(rowEl, rec);
+				}
 			} else {
-				frag.appendChild(this._buildPlaceholderRow());
+				rowEl.style.display = 'none';
 			}
 		}
 
-		if (bottomH > 0) {
-			const bottomSpacer = document.createElement('tr');
-			bottomSpacer.className = 'ln-table__spacer';
-			bottomSpacer.setAttribute('aria-hidden', 'true');
-			const bottomTd = document.createElement('td');
-			bottomTd.setAttribute('colspan', colSpan);
-			bottomTd.style.height = bottomH + 'px';
-			bottomSpacer.appendChild(bottomTd);
-			frag.appendChild(bottomSpacer);
-		}
+		if (this._selectable) this._updateSelectAll();
+	};
 
-		this.tbody.replaceChildren(frag);
 
-		// Select-all is disabled in windowed mode (D4) — no _updateSelectAll() call.
-		this._vStart = startRow;
-		this._vEnd = endRow;
 
-		this._cache.ensure(startRow, endRow);
+	// ─── Loading state ──────────────────────────────────────────
+
+	_component.prototype._showLoadingState = function () {
+		this._rowPool = null;
+		this._topSpacer = null;
+		this._topTd = null;
+		this._bottomSpacer = null;
+		this._bottomTd = null;
+		const colSpan = this.ths.length || 1;
+		let loadingEl = null;
+
+		let clone = cloneTemplateScoped(this.dom, this.name + '-loading', 'ln-table')
+			|| cloneTemplateScoped(this.dom, 'table-loading', 'ln-table');
+
+		if (!clone) {
+			const genericTpl = this.dom.querySelector('template[data-ln-table-loading]');
+			if (genericTpl) {
+				clone = document.importNode(genericTpl.content, true);
+			}
+		}
+
+		if (clone) {
+			if (clone.tagName === 'TR') {
+				loadingEl = clone;
+			} else {
+				const td = document.createElement('td');
+				td.setAttribute('colspan', String(colSpan));
+				td.appendChild(clone);
+				const tr = document.createElement('tr');
+				tr.className = 'table-empty ln-table__empty';
+				tr.appendChild(td);
+				loadingEl = tr;
+			}
+		}
+
+		if (loadingEl) {
+			this.tbody.replaceChildren(loadingEl);
+		} else {
+			this.tbody.replaceChildren();
+		}
 	};
 
 	// ─── Empty state ───────────────────────────────────────────
 
 	_component.prototype._showEmptyState = function () {
+		this._rowPool = null;
+		this._topSpacer = null;
+		this._topTd = null;
+		this._bottomSpacer = null;
+		this._bottomTd = null;
 		const colSpan = this.ths.length || 1;
 		let emptyEl = null;
-
 		let clone = null;
 
 		if (this.isDataDriven) {
@@ -888,7 +978,8 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 			const isFiltered = filtered === 0 && total > 0;
 
 			const templateName = isFiltered ? (this.name + '-empty-filtered') : (this.name + '-empty');
-			clone = cloneTemplateScoped(this.dom, templateName, 'ln-table');
+			clone = cloneTemplateScoped(this.dom, templateName, 'ln-table')
+				|| cloneTemplateScoped(this.dom, isFiltered ? 'table-empty-filtered' : 'table-empty', 'ln-table');
 
 			if (!clone) {
 				const genericTpl = this.dom.querySelector('template[data-ln-table-empty]');
@@ -901,30 +992,29 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 					}
 				}
 			}
-
-			if (clone) {
-				if (clone.tagName === 'TR') {
-					emptyEl = clone;
-				} else {
-					const td = document.createElement('td');
-					td.setAttribute('colspan', String(colSpan));
-					td.appendChild(clone);
-					const tr = document.createElement('tr');
-					tr.className = 'ln-table__empty';
-					tr.appendChild(td);
-					emptyEl = tr;
+		} else {
+			clone = cloneTemplateScoped(this.dom, this.name + '-empty', 'ln-table')
+				|| cloneTemplateScoped(this.dom, 'table-empty', 'ln-table');
+			if (!clone) {
+				const genericTpl = this.dom.querySelector('template[data-ln-table-empty]');
+				if (genericTpl) {
+					clone = document.importNode(genericTpl.content, true);
 				}
 			}
-		} else {
-			const tpl = this.dom.querySelector('template[' + EMPTY_TEMPLATE + ']');
-			const td = document.createElement('td');
-			td.setAttribute('colspan', String(colSpan));
-			if (tpl) td.appendChild(document.importNode(tpl.content, true));
-
-			const tr = document.createElement('tr');
-			tr.className = 'ln-table__empty';
-			tr.appendChild(td);
-			emptyEl = tr;
+		}
+
+		if (clone) {
+			if (clone.tagName === 'TR') {
+				emptyEl = clone;
+			} else {
+				const td = document.createElement('td');
+				td.setAttribute('colspan', String(colSpan));
+				td.appendChild(clone);
+				const tr = document.createElement('tr');
+				tr.className = 'ln-table__empty';
+				tr.appendChild(td);
+				emptyEl = tr;
+			}
 		}
 
 		if (emptyEl) {
@@ -977,28 +1067,10 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 				temp.innerHTML = record.html;
 				tr = temp.firstElementChild;
 			} else {
-				tr = document.createElement('tr');
-				tr.setAttribute('data-ln-table-row', '');
-				const ths = this.ths;
-
-				for (let j = 0; j < ths.length; j++) {
-					const isSelectCol = ths[j].hasAttribute('data-ln-table-col-select');
-					const td = document.createElement('td');
-
-					if (isSelectCol) {
-						const cb = document.createElement('input');
-						cb.type = 'checkbox';
-						cb.setAttribute('data-ln-table-row-select', '');
-						cb.setAttribute('aria-label', 'Select row');
-						td.appendChild(cb);
-					} else {
-						const colName = ths[j].getAttribute('data-ln-table-col');
-						if (colName && record[colName] != null) {
-							td.textContent = String(record[colName]);
-						}
-					}
-					tr.appendChild(td);
+				if (window.lnDebug || (typeof document !== 'undefined' && document.body && document.body.hasAttribute('data-ln-debug'))) {
+					console.warn(`[ln-table] Missing row template: <template data-ln-template="${this.name}-row">`);
 				}
+				return null;
 			}
 		} else {
 			this._fillRow(tr, record);
@@ -1019,119 +1091,9 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 	};
 
 	_component.prototype._requestData = function () {
-		if (this._windowed) {
-			this.dom.classList.add('ln-table--loading');
-			this._cache.invalidate({
-				sort: this.currentSort,
-				filters: this.currentFilters,
-				search: this.currentSearch
-			});
-			return;
-		}
 		requestData(this, 'ln-table:request-data', 'table');
 	};
 
-	// ─── Windowed Mode — enter/exit/seed (live toggle) ──────────
-
-	_component.prototype._enterWindowedMode = function () {
-		const self = this;
-		const dom = this.dom;
-		const winAttr = parseInt(dom.getAttribute('data-ln-table-window'), 10);
-		const pageAttr = parseInt(dom.getAttribute('data-ln-table-window-page'), 10);
-		const threshAttr = parseInt(dom.getAttribute('data-ln-table-window-threshold'), 10);
-
-		// Cache change → sync totals off the cache, re-render (pull), notify.
-		this._onCacheChange = function () {
-			if (!self._windowed || !self._cache) return;
-			self.totalCount = self._cache.grandTotal;
-			self.visibleCount = self._cache.logicalTotal;
-			self._lastTotal = self._cache.grandTotal;
-			self.isLoaded = true;
-			self._vStart = -1;
-			self._vEnd = -1;
-			self._render();
-			self._updateFooter();
-			dispatch(dom, 'ln-table:rendered', {
-				table: self.name,
-				total: self.totalCount,
-				visible: self.visibleCount
-			});
-		};
-		this._renderBatch = createBatcher(this._onCacheChange);
-
-		this._cache = createWindowCache({
-			windowSize: winAttr > 0 ? winAttr : WINDOW_DEFAULT,
-			pageSize: pageAttr > 0 ? pageAttr : WINDOW_PAGE,
-			threshold: threshAttr >= 0 ? threshAttr : 25,
-			fetchDebounce: FETCH_DEBOUNCE,
-			requestPage: function (query, offset, limit) {
-				dispatch(dom, 'ln-table:request-data', {
-					table: self.name,
-					sort: query.sort,
-					filters: query.filters,
-					search: query.search,
-					offset: offset,
-					limit: limit,
-					queryGen: self._cache.queryGen
-				});
-			},
-			onChange: this._renderBatch
-		});
-
-		this._windowed = true;
-
-		// D4 — windowed tables cannot select rows they have never fetched
-		if (this._selectable && this._selectAllCheckbox) {
-			this._selectAllCheckbox.classList.add('hidden');
-		}
-	};
-
-	_component.prototype._kickWindowInitial = function () {
-		if (this._data.length > 0) {
-			// SSR-seeded / warm-seeded: page 0 is already resident, the grand
-			// total is declared in markup — no initial fetch needed. No
-			// queryGen on the seed — it must never be dropped as stale.
-			let declaredTotal = parseInt(this.dom.getAttribute('data-ln-table-count'), 10);
-			if (isNaN(declaredTotal) && this._totalSpan) {
-				const spanText = this._totalSpan.textContent.replace(/[^\d]/g, '');
-				if (spanText) declaredTotal = parseInt(spanText, 10);
-			}
-			const seedTotal = (declaredTotal > 0) ? declaredTotal : this._data.length;
-			this._cache.ingest({
-				data: this._data,
-				offset: 0,
-				total: seedTotal,
-				filtered: seedTotal
-			});
-		} else {
-			this.dom.classList.add('ln-table--loading');
-			this._cache.requestInitial({
-				sort: this.currentSort,
-				filters: this.currentFilters,
-				search: this.currentSearch
-			});
-		}
-	};
-
-	_component.prototype._exitWindowedMode = function () {
-		this._disableVirtualScroll();
-		if (this._cache) this._cache.destroy();
-		this._cache = null;
-		this._windowed = false;
-		this._renderBatch = null;
-		this._onCacheChange = null;
-		if (this._selectAllCheckbox) {
-			this._selectAllCheckbox.classList.remove('hidden');
-		}
-		this._rowHeight = 0;
-		this._vStart = -1;
-		this._vEnd = -1;
-		this._data = [];
-		this._filteredData = [];
-		this.dom.classList.add('ln-table--loading');
-		this._requestData();
-	};
-
 	// ─── Selection Helpers ─────────────────────────────────────
 
 	_component.prototype._updateSelectAll = function () {
@@ -1304,11 +1266,11 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 		const isFiltered = filtered < total;
 
 		if (this._totalSpan) {
-			this._totalSpan.textContent = _formatNum(total, this.dom);
+			_setNumberValue(this._totalSpan, total);
 		}
 
 		if (this._filteredSpan) {
-			this._filteredSpan.textContent = isFiltered ? _formatNum(filtered, this.dom) : '';
+			_setNumberValue(this._filteredSpan, isFiltered ? filtered : null);
 		}
 
 		if (this._filteredWrap) {
@@ -1317,7 +1279,7 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 
 		if (this._selectedSpan) {
 			const count = this.selectedIds ? this.selectedIds.size : 0;
-			this._selectedSpan.textContent = count > 0 ? _formatNum(count, this.dom) : '';
+			_setNumberValue(this._selectedSpan, count > 0 ? count : null);
 			if (this._selectedWrap) {
 				this._selectedWrap.classList.toggle('hidden', count === 0);
 			}
@@ -1338,15 +1300,11 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 		if (this.isDataDriven) {
 			this.dom.removeEventListener('ln-table:set-data', this._onSetData);
 			this.dom.removeEventListener('ln-table:set-loading', this._onSetLoading);
-			this.dom.removeEventListener('ln-table:page-failed', this._onPageFailed);
-			this.dom.removeEventListener('ln-table:request-revalidate', this._onRequestRevalidate);
-			this.dom.removeEventListener('ln-table:request-invalidate', this._onRequestInvalidate);
 			this.dom.removeEventListener('ln-sort:change', this._onSort);
 			if (this.tbody) {
 				this.tbody.removeEventListener('click', this._onRowClick);
 				this.tbody.removeEventListener('click', this._onRowAction);
 			}
-			if (this._cache) this._cache.destroy();
 		} else {
 			if (this._emptyTbodyObserver) {
 				this._emptyTbodyObserver.disconnect();
@@ -1365,6 +1323,7 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 			this._colgroup = null;
 		}
 		if (this.table) this.table.style.tableLayout = '';
+		this._loadingIndicator = null;
 		this._data = [];
 		this._filteredData = [];
 		delete this.dom[DOM_ATTRIBUTE];