@rozie-ui/data-table-lit 0.2.6 → 0.3.1

package/dist/index.mjs

@@ -7,6 +7,163 @@ import { repeat } from "lit/directives/repeat.js";
 import "@rozie-ui/popover-lit";
 import { createTable, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from "@tanstack/table-core";
 import { Virtualizer, elementScroll, measureElement, observeElementOffset, observeElementRect } from "@tanstack/virtual-core";
+//#region src/helpers/columnDefUtils.ts
+const isSafeKey = (k) => k !== "__proto__" && k !== "constructor" && k !== "prototype";
+const wrapAggregationFn = (fn) => {
+	if (typeof fn === "string") return fn;
+	if (typeof fn !== "function") return void 0;
+	return (columnId, leafRows, childRows) => {
+		try {
+			return fn(columnId, leafRows, childRows);
+		} catch (err) {
+			return;
+		}
+	};
+};
+//#endregion
+//#region src/helpers/indexMath.ts
+const clamp = (v, lo, hi) => v < lo ? lo : v > hi ? hi : v;
+const focusables = (cellEl) => {
+	if (!cellEl || !cellEl.querySelectorAll) return [];
+	return Array.prototype.slice.call(cellEl.querySelectorAll("button,[href],input,select,textarea,[tabindex]:not([tabindex=\"-1\"])")).filter((n) => !n.disabled);
+};
+const applyUpdater = (updater, current) => typeof updater === "function" ? updater(current) : updater;
+//#endregion
+//#region src/helpers/tsvGrid.ts
+const escapeTsvField = (s) => {
+	if (s.indexOf("	") >= 0 || s.indexOf("\n") >= 0 || s.indexOf("\r") >= 0 || s.indexOf("\"") >= 0) return "\"" + s.replace(/"/g, "\"\"") + "\"";
+	return s;
+};
+const parseTsv = (text) => {
+	const str = text != null ? String(text) : "";
+	if (str === "" || str.length > 2e6) return [];
+	const rows = [];
+	let row = [];
+	let field = "";
+	let inQuotes = false;
+	let i = 0;
+	const n = str.length;
+	while (i < n) {
+		const ch = str[i];
+		if (inQuotes) {
+			if (ch === "\"") {
+				if (i + 1 < n && str[i + 1] === "\"") {
+					field = field + "\"";
+					i = i + 2;
+					continue;
+				}
+				inQuotes = false;
+				i = i + 1;
+				continue;
+			}
+			field = field + ch;
+			i = i + 1;
+			continue;
+		}
+		if (ch === "\"" && field === "") {
+			inQuotes = true;
+			i = i + 1;
+			continue;
+		}
+		if (ch === "	") {
+			row.push(field);
+			field = "";
+			i = i + 1;
+			continue;
+		}
+		if (ch === "\r") {
+			if (i + 1 < n && str[i + 1] === "\n") i = i + 1;
+			row.push(field);
+			field = "";
+			rows.push(row);
+			row = [];
+			i = i + 1;
+			continue;
+		}
+		if (ch === "\n") {
+			row.push(field);
+			field = "";
+			rows.push(row);
+			row = [];
+			i = i + 1;
+			continue;
+		}
+		field = field + ch;
+		i = i + 1;
+	}
+	row.push(field);
+	rows.push(row);
+	if (rows.length > 1) {
+		const last = rows[rows.length - 1];
+		if (last.length === 1 && last[0] === "") rows.pop();
+	}
+	return rows;
+};
+const tileGridToBox = (grid, box) => {
+	const srcRows = grid.length;
+	let srcCols = 0;
+	for (let i = 0; i < srcRows; i++) {
+		const w = grid[i] && grid[i].length ? grid[i].length : 0;
+		if (w > srcCols) srcCols = w;
+	}
+	if (srcRows <= 0 || srcCols <= 0) return grid;
+	const boxRows = box.r1 - box.r0 + 1;
+	const boxCols = box.c1 - box.c0 + 1;
+	const rows = boxRows > srcRows ? boxRows : srcRows;
+	const cols = boxCols > srcCols ? boxCols : srcCols;
+	const out = [];
+	for (let r = 0; r < rows; r++) {
+		const srcLine = grid[r % srcRows] || [];
+		const line = [];
+		for (let c = 0; c < cols; c++) {
+			const v = srcLine[c % srcCols];
+			line.push(v != null ? v : "");
+		}
+		out.push(line);
+	}
+	return out;
+};
+const tileIndex = (i, lo, hi) => {
+	const span = hi - lo + 1;
+	if (span <= 1) return lo;
+	let k = (i - lo) % span;
+	if (k < 0) k = k + span;
+	return lo + k;
+};
+//#endregion
+//#region src/helpers/rowValueUtils.ts
+const replaceRowValue = (rows, rowIndex, field, value) => {
+	const src = rows || [];
+	const out = [];
+	for (let i = 0; i < src.length; i++) if (i === rowIndex) out.push({
+		...src[i] || {},
+		[field]: value
+	});
+	else out.push(src[i]);
+	return out;
+};
+const replaceRowValues = (rows, rowIndex, fieldValues) => {
+	const src = rows || [];
+	const fv = fieldValues || {};
+	const out = [];
+	for (let i = 0; i < src.length; i++) if (i === rowIndex) out.push({
+		...src[i] || {},
+		...fv
+	});
+	else out.push(src[i]);
+	return out;
+};
+const indexOfRowIn = (rows, rowOriginal, rowId) => {
+	const list = rows || [];
+	for (let i = 0; i < list.length; i++) {
+		const r = list[i];
+		if (!r) continue;
+		if (rowId != null && r.id === rowId) return i;
+		if (rowOriginal != null && r.original === rowOriginal) return i;
+	}
+	return -1;
+};
+//#endregion
 //#region \0@oxc-project+runtime@0.127.0/helpers/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -130,6 +287,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.undoLimit = 100;
 		this.virtual = false;
 		this.estimateRowHeight = 40;
+		this.autoMeasure = false;
 		this.maxHeight = "";
 		this._dataDefault = signal([]);
 		this._sortingDefault = signal([]);
@@ -217,7 +375,11 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.virtualizer = null;
 		this.virtualizerCleanup = null;
 		this.gridScrollEl = null;
+		this.colVirtualizer = null;
+		this.colVirtualizerCleanup = null;
 		this.remeasurePending = false;
+		this.remeasureRaf = null;
+		this.remeasureDisposed = false;
 		this.GRID_PAGE_STEP = 10;
 		this.gridRoot = null;
 		this.programmatic = 0;
@@ -255,18 +417,6 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			columnSizingInfo: this._columnSizingInfo.value
 		});
 		this.currentData = () => this.data != null ? this.data : this._dataDefault.value;
-		this.isSafeKey = (k) => k !== "__proto__" && k !== "constructor" && k !== "prototype";
-		this.wrapAggregationFn = (fn) => {
-			if (typeof fn === "string") return fn;
-			if (typeof fn !== "function") return void 0;
-			return (columnId, leafRows, childRows) => {
-				try {
-					return fn(columnId, leafRows, childRows);
-				} catch (err) {
-					return;
-				}
-			};
-		};
 		this.buildConfigDef = (c) => {
 			if (!c) return null;
 			if (Array.isArray(c.columns)) {
@@ -280,7 +430,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				if (gid == null) gid = c.header != null ? "__grp_" + kids.map((k) => k.id).join("_") : null;
 				if (gid == null) return null;
 				const id = String(gid);
-				if (!this.isSafeKey(id)) return null;
+				if (!isSafeKey(id)) return null;
 				return {
 					id,
 					header: c.header != null ? c.header : id,
@@ -290,7 +440,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			const rawId = c.id != null ? c.id : c.field;
 			if (rawId == null) return null;
 			const id = String(rawId);
-			if (!this.isSafeKey(id)) return null;
+			if (!isSafeKey(id)) return null;
 			return {
 				id,
 				accessorKey: c.field != null ? c.field : id,
@@ -300,7 +450,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				filterable: c.filterable === true,
 				expandable: c.expandable === true,
 				groupable: c.groupable !== false,
-				aggregationFn: this.wrapAggregationFn(c.aggregationFn),
+				aggregationFn: wrapAggregationFn(c.aggregationFn),
 				pinned: c.pinned != null ? c.pinned : "",
 				width: c.width != null ? c.width : "",
 				meta: {
@@ -311,10 +461,15 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				}
 			};
 		};
+		this.columnDefsCache = null;
+		this.columnDefsCacheColumnsRef = void 0;
+		this.columnDefsCacheColRegRef = void 0;
 		this.columnDefs = () => {
+			const cfg = this.columns || [];
+			const reg = this._colReg.value || {};
+			if (this.columnDefsCache && this.columns === this.columnDefsCacheColumnsRef && this._colReg.value === this.columnDefsCacheColRegRef) return this.columnDefsCache;
 			const byId = Object.create(null);
 			const order = [];
-			const cfg = this.columns || [];
 			for (const c of cfg) {
 				const def = this.buildConfigDef(c);
 				if (!def) continue;
@@ -322,9 +477,8 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				if (!(id in byId)) order.push(id);
 				byId[id] = def;
 			}
-			const reg = this._colReg.value || {};
 			for (const id in reg) {
-				if (!this.isSafeKey(id)) continue;
+				if (!isSafeKey(id)) continue;
 				const spec = reg[id];
 				if (!spec) continue;
 				if (!(id in byId)) order.push(id);
@@ -337,7 +491,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 					filterable: spec.filterable === true,
 					expandable: spec.expandable === true,
 					groupable: spec.groupable !== false,
-					aggregationFn: this.wrapAggregationFn(spec.aggregationFn),
+					aggregationFn: wrapAggregationFn(spec.aggregationFn),
 					pinned: spec.pinned != null ? spec.pinned : "",
 					width: spec.width != null ? spec.width : "",
 					meta: {
@@ -350,6 +504,9 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			}
 			const out = [];
 			for (const id of order) if (byId[id]) out.push(byId[id]);
+			this.columnDefsCache = out;
+			this.columnDefsCacheColumnsRef = this.columns;
+			this.columnDefsCacheColRegRef = this._colReg.value;
 			return out;
 		};
 		this.SELECT_COL_ID = "__rdt_select";
@@ -392,7 +549,6 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			}));
 			this.programmatic--;
 		};
-		this.applyUpdater = (updater, current) => typeof updater === "function" ? updater(current) : updater;
 		this.writeExpanded = (next) => {
 			if (this.programmatic) return;
 			this.programmatic++;
@@ -604,48 +760,101 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		};
 		this.refreshRowModel = null;
 		this.onSortingChangeCb = (updater) => {
-			this.writeSorting(this.applyUpdater(updater, this.currentState().sorting));
+			this.writeSorting(applyUpdater(updater, this.currentState().sorting));
 		};
 		this.onExpandedChangeCb = (updater) => {
-			this.writeExpanded(this.applyUpdater(updater, this.currentState().expanded));
+			this.writeExpanded(applyUpdater(updater, this.currentState().expanded));
 		};
 		this.onGroupingChangeCb = (updater) => {
-			this.writeGrouping(this.applyUpdater(updater, this.currentState().grouping));
+			this.writeGrouping(applyUpdater(updater, this.currentState().grouping));
 		};
 		this.onGlobalFilterChangeCb = (updater) => {
-			this.writeGlobalFilter(this.applyUpdater(updater, this.currentState().globalFilter));
+			this.writeGlobalFilter(applyUpdater(updater, this.currentState().globalFilter));
 		};
 		this.onColumnFiltersChangeCb = (updater) => {
-			this.writeColumnFilters(this.applyUpdater(updater, this.currentState().columnFilters));
+			this.writeColumnFilters(applyUpdater(updater, this.currentState().columnFilters));
 		};
 		this.onPaginationChangeCb = (updater) => {
-			this.writePagination(this.applyUpdater(updater, this.currentState().pagination));
+			this.writePagination(applyUpdater(updater, this.currentState().pagination));
 		};
 		this.onRowSelectionChangeCb = (updater) => {
-			this.writeRowSelection(this.applyUpdater(updater, this.currentState().rowSelection));
+			this.writeRowSelection(applyUpdater(updater, this.currentState().rowSelection));
 		};
 		this.onColumnVisibilityChangeCb = (updater) => {
-			this.writeColumnVisibility(this.applyUpdater(updater, this.currentState().columnVisibility));
+			this.writeColumnVisibility(applyUpdater(updater, this.currentState().columnVisibility));
 		};
 		this.onColumnSizingChangeCb = (updater) => {
-			this.writeColumnSizing(this.applyUpdater(updater, this.currentState().columnSizing));
+			this.writeColumnSizing(applyUpdater(updater, this.currentState().columnSizing));
 		};
 		this.onColumnOrderChangeCb = (updater) => {
-			this.writeColumnOrder(this.applyUpdater(updater, this.currentState().columnOrder));
+			this.writeColumnOrder(applyUpdater(updater, this.currentState().columnOrder));
 		};
 		this.onColumnPinningChangeCb = (updater) => {
-			this.writeColumnPinning(this.applyUpdater(updater, this.currentState().columnPinning));
+			this.writeColumnPinning(applyUpdater(updater, this.currentState().columnPinning));
 		};
 		this.onColumnSizingInfoChangeCb = (updater) => {
-			const next = this.applyUpdater(updater, this._columnSizingInfo.value);
+			const next = applyUpdater(updater, this._columnSizingInfo.value);
 			this._columnSizingInfo.value = next != null ? next : this._columnSizingInfo.value;
 		};
+		this.resolveVirtual = () => {
+			const v = this.virtual;
+			if (typeof v === "string") {
+				if (v === "rows") return "rows";
+				if (v === "columns") return "columns";
+				if (v === "both") return "both";
+				return "off";
+			}
+			return v === true ? "rows" : "off";
+		};
+		this.rowsWindowed = () => {
+			const s = this.resolveVirtual();
+			return s === "rows" || s === "both";
+		};
+		this.colsWindowed = () => {
+			const s = this.resolveVirtual();
+			return s === "columns" || s === "both";
+		};
+		this.isWindowed = () => this.rowsWindowed() || this.colsWindowed();
+		this.autoMeasureOn = () => this.autoMeasure === true;
+		this.columnCount = () => this.visibleColCount();
+		this.columnSize = (i) => {
+			if (!this.table || !this.table.getVisibleLeafColumns) return 150;
+			const c = this.table.getVisibleLeafColumns()[i];
+			return c && typeof c.getSize === "function" ? c.getSize() : 150;
+		};
+		this.forcedColumns = () => {
+			if (!this.colsWindowed()) return [];
+			const out = [];
+			if (this.table && this.table.getVisibleLeafColumns) {
+				const cols = this.table.getVisibleLeafColumns();
+				for (let i = 0; i < cols.length; i++) {
+					const c = cols[i];
+					if (c && c.getIsPinned && c.getIsPinned()) out.push(i);
+				}
+			}
+			if (!this._activeIsHeader.value && this._activeColIndex.value >= 0 && out.indexOf(this._activeColIndex.value) === -1) out.push(this._activeColIndex.value);
+			if (this._editingRow.value >= 0 && this._editingCol.value >= 0 && out.indexOf(this._editingCol.value) === -1) out.push(this._editingCol.value);
+			return out;
+		};
+		this.windowedCells = (row) => {
+			this._windowVer.value;
+			const cells = this.visibleCellsFor(row);
+			if (!this.colsWindowed()) return cells;
+			const idx = this.windowedColIndices();
+			const out = [];
+			for (let i = 0; i < idx.length; i++) {
+				const cell = cells[idx[i]];
+				if (cell) out.push(cell);
+			}
+			return out;
+		};
 		this.windowSource = () => {
 			if (!this.table) return [];
-			if (this.virtual) return this.table.getPrePaginationRowModel().rows;
+			if (this.rowsWindowed()) return this.table.getPrePaginationRowModel().rows;
 			return this.table.getRowModel().rows;
 		};
 		this.scheduleRemeasure = () => {
+			if (this.remeasureDisposed) return;
 			if (this.remeasurePending) return;
 			this.remeasurePending = true;
 			let ranMicro = false;
@@ -653,6 +862,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				this.remeasureWindow();
 			};
 			const rafPass = () => {
+				this.remeasureRaf = null;
 				this.remeasurePending = false;
 				this.remeasureWindow();
 			};
@@ -660,9 +870,18 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				ranMicro = true;
 				queueMicrotask(microPass);
 			}
-			if (typeof requestAnimationFrame === "function") requestAnimationFrame(rafPass);
+			if (typeof requestAnimationFrame === "function") this.remeasureRaf = requestAnimationFrame(rafPass);
 			else if (ranMicro) this.remeasurePending = false;
-			else setTimeout(rafPass, 0);
+			else this.remeasureRaf = setTimeout(rafPass, 0);
+		};
+		this.teardownRemeasure = () => {
+			this.remeasureDisposed = true;
+			if (this.remeasureRaf != null) {
+				if (typeof requestAnimationFrame === "function") cancelAnimationFrame(this.remeasureRaf);
+				else clearTimeout(this.remeasureRaf);
+				this.remeasureRaf = null;
+			}
+			this.remeasurePending = false;
 		};
 		this.pinnedEditIndex = () => {
 			if (this._editingRow.value >= 0) return this._editingRow.value;
@@ -675,19 +894,123 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			return ms && ms[pin] ? ms[pin] : null;
 		};
 		this.remeasureWindow = () => {
+			if (this.remeasureDisposed) return;
 			if (!this.virtualizer || !this.gridRoot) return;
 			if (this.virtualizer.scrollState) return;
 			const trs = this.gridRoot.querySelectorAll("tbody.rdt-tbody > tr[data-index]");
 			for (const tr of trs) this.virtualizer.measureElement(tr);
+			if (this.afterRowRemeasure) this.afterRowRemeasure();
 		};
 		this.virtualItemKey = (i) => {
 			const src = this.windowSource();
 			return src && src[i] ? src[i].id : void 0;
 		};
+		this.COL_OVERSCAN = 3;
+		this.colRtlObserver = null;
+		this.colRtlObserverEl = null;
+		this.isColRtl = () => {
+			if (!this.gridScrollEl || typeof getComputedStyle !== "function") return false;
+			return getComputedStyle(this.gridScrollEl).direction === "rtl";
+		};
+		this.ensureColRtlWatch = () => {
+			if (!this.gridScrollEl || this.colRtlObserverEl === this.gridScrollEl || typeof MutationObserver !== "function") return;
+			if (this.colRtlObserver) this.colRtlObserver.disconnect();
+			this.colRtlObserver = new MutationObserver(() => {
+				if (this.colVirtualizer) this.colVirtualizer.setOptions({
+					...this.colVirtualizer.options,
+					isRtl: this.isColRtl()
+				});
+			});
+			this.colRtlObserver.observe(this.gridScrollEl, {
+				attributes: true,
+				attributeFilter: ["dir"]
+			});
+			this.colRtlObserverEl = this.gridScrollEl;
+		};
+		this.teardownColRtlWatch = () => {
+			if (this.colRtlObserver) this.colRtlObserver.disconnect();
+			this.colRtlObserver = null;
+			this.colRtlObserverEl = null;
+		};
+		this.columnVirtualizerOptions = () => {
+			this.ensureColRtlWatch();
+			return {
+				count: this.columnCount(),
+				getScrollElement: () => this.gridScrollEl,
+				estimateSize: (i) => this.columnSize(i),
+				horizontal: true,
+				isRtl: this.isColRtl(),
+				observeElementRect,
+				observeElementOffset,
+				scrollToFn: elementScroll,
+				measureElement,
+				overscan: this.COL_OVERSCAN,
+				onChange: () => {
+					this._windowVer.value = this._windowVer.value + 1;
+				}
+			};
+		};
+		this.measuredRowTotal = 0;
+		this.measuredRowCount = 0;
+		this.lastFedRowEstimate = 0;
+		this.foldedRowHeights = {};
+		this.windowVerBumpPending = false;
+		this.bumpWindowVer = () => {
+			if (this.windowVerBumpPending) return;
+			this.windowVerBumpPending = true;
+			const flush = () => {
+				this.windowVerBumpPending = false;
+				this._windowVer.value = this._windowVer.value + 1;
+			};
+			if (typeof queueMicrotask !== "undefined") queueMicrotask(flush);
+			else setTimeout(flush, 0);
+		};
+		this.ESTIMATE_REFEED_DELTA_PX = 4;
+		this.estimateRowSize = (i) => {
+			if (!this.autoMeasureOn()) return this.estimateRowHeight;
+			if (this.measuredRowCount === 0) return this.estimateRowHeight;
+			return Math.round(this.measuredRowTotal / this.measuredRowCount);
+		};
+		this.foldMeasuredRow = (index, height) => {
+			const prev = this.foldedRowHeights[index];
+			if (prev === height) return;
+			if (prev == null) {
+				this.measuredRowTotal = this.measuredRowTotal + height;
+				this.measuredRowCount = this.measuredRowCount + 1;
+			} else this.measuredRowTotal = this.measuredRowTotal - prev + height;
+			this.foldedRowHeights[index] = height;
+		};
+		this.refineRowEstimate = () => {
+			if (!this.autoMeasureOn() || !this.virtualizer) return;
+			const items = this.virtualizer.getVirtualItems();
+			const measurements = this.virtualizer.getMeasurements();
+			for (let i = 0; i < items.length; i++) {
+				const idx = items[i].index;
+				const m = measurements && measurements[idx];
+				if (m) this.foldMeasuredRow(idx, m.size);
+			}
+			if (this.virtualizer.scrollState) return;
+			const est = this.estimateRowSize(0);
+			if (Math.abs(est - this.lastFedRowEstimate) < this.ESTIMATE_REFEED_DELTA_PX) return;
+			const anchorIndex = items.length ? items[0].index : -1;
+			const anchorStart = items.length ? items[0].start : 0;
+			this.virtualizer.setOptions(this.virtualizerOptions());
+			this.virtualizer._willUpdate();
+			this.lastFedRowEstimate = est;
+			if (anchorIndex >= 0 && this.gridScrollEl) {
+				const freshMeasurements = this.virtualizer.getMeasurements();
+				const fresh = freshMeasurements && freshMeasurements[anchorIndex];
+				if (fresh) {
+					const delta = fresh.start - anchorStart;
+					if (delta !== 0) this.gridScrollEl.scrollTop = this.gridScrollEl.scrollTop + delta;
+				}
+			}
+			this.bumpWindowVer();
+		};
 		this.virtualizerOptions = () => ({
 			count: this.windowSource().length,
 			getScrollElement: () => this.gridScrollEl,
-			estimateSize: () => this.estimateRowHeight,
+			estimateSize: (i) => this.estimateRowSize(i),
 			observeElementRect,
 			observeElementOffset,
 			scrollToFn: elementScroll,
@@ -695,7 +1018,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			overscan: 8,
 			getItemKey: this.virtualItemKey,
 			onChange: () => {
-				this._windowVer.value = this._windowVer.value + 1;
+				this.bumpWindowVer();
 				this.scheduleRemeasure();
 			}
 		});
@@ -704,8 +1027,8 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this._windowVer.value;
 			this._editVer.value;
 			if (!this.virtualizer) {
-				if (!this.virtual) return (this._rows.value || []).map((r) => ({
-					vi: null,
+				if (!this.rowsWindowed()) return (this._rows.value || []).map((r, i) => ({
+					vi: { index: i },
 					row: r
 				}));
 				return [];
@@ -741,7 +1064,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.padTop = () => {
 			this._windowVer.value;
 			this._editVer.value;
-			if (!this.virtual || !this.virtualizer) return 0;
+			if (!this.rowsWindowed() || !this.virtualizer) return 0;
 			const items = this.virtualizer.getVirtualItems();
 			let pad = items.length ? items[0].start : 0;
 			const pin = this.pinnedEditIndex();
@@ -755,7 +1078,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.padBottom = () => {
 			this._windowVer.value;
 			this._editVer.value;
-			if (!this.virtual || !this.virtualizer) return 0;
+			if (!this.rowsWindowed() || !this.virtualizer) return 0;
 			const items = this.virtualizer.getVirtualItems();
 			if (!items.length) return 0;
 			let pad = this.virtualizer.getTotalSize() - items[items.length - 1].end;
@@ -776,11 +1099,59 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			return false;
 		};
 		this.rowIsOutsideWindow = (r) => {
-			if (!this.virtual || !this.virtualizer) return false;
+			if (!this.rowsWindowed() || !this.virtualizer) return false;
 			const items = this.virtualizer.getVirtualItems();
 			for (const it of items) if (it.index === r) return false;
 			return true;
 		};
+		this.windowedColIndices = () => {
+			this._windowVer.value;
+			this._editVer.value;
+			if (!this.colsWindowed()) {
+				const n = this.columnCount();
+				const out = [];
+				for (let i = 0; i < n; i++) out.push(i);
+				return out;
+			}
+			if (!this.colVirtualizer) return [];
+			const idx = this.colVirtualizer.getVirtualItems().map((it) => it.index);
+			const forced = this.forcedColumns();
+			for (let i = 0; i < forced.length; i++) if (idx.indexOf(forced[i]) === -1) idx.push(forced[i]);
+			idx.sort((a, b) => a - b);
+			return idx;
+		};
+		this.colPadLeft = () => {
+			this._windowVer.value;
+			this._editVer.value;
+			if (!this.colsWindowed() || !this.colVirtualizer) return 0;
+			const items = this.colVirtualizer.getVirtualItems();
+			let pad = items.length ? items[0].start : 0;
+			if (items.length) {
+				const firstIdx = items[0].index;
+				const forced = this.forcedColumns();
+				for (let i = 0; i < forced.length; i++) if (forced[i] < firstIdx) pad = pad - this.columnSize(forced[i]);
+			}
+			return pad < 0 ? 0 : pad;
+		};
+		this.colPadRight = () => {
+			this._windowVer.value;
+			this._editVer.value;
+			if (!this.colsWindowed() || !this.colVirtualizer) return 0;
+			const items = this.colVirtualizer.getVirtualItems();
+			if (!items.length) return 0;
+			let pad = this.colVirtualizer.getTotalSize() - items[items.length - 1].end;
+			const lastIdx = items[items.length - 1].index;
+			const forced = this.forcedColumns();
+			for (let i = 0; i < forced.length; i++) if (forced[i] > lastIdx) pad = pad - this.columnSize(forced[i]);
+			return pad < 0 ? 0 : pad;
+		};
+		this.colIsOutsideWindow = (c) => {
+			if (!this.colsWindowed() || !this.colVirtualizer) return false;
+			const items = this.colVirtualizer.getVirtualItems();
+			for (const it of items) if (it.index === c) return false;
+			return true;
+		};
+		this.afterRowRemeasure = this.refineRowEstimate;
 		this.announceState = {
 			sorting: null,
 			columnFilters: null,
@@ -1153,7 +1524,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		};
 		this.getRowIndexRelativeToPage = (absRow) => {
 			const abs = absRow == null ? this.toAbsRow(this._activeRow.value) : Math.trunc(Number(absRow)) || 0;
-			if (this.virtual) return abs;
+			if (this.rowsWindowed()) return abs;
 			return abs - this.pageRowOffset();
 		};
 		this.cut = () => this.cutRange();
@@ -1164,12 +1535,12 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.colIndexOf = (row, cellCtx) => this.tick() >= 0 ? this.visibleCellsFor(row).indexOf(cellCtx) : -1;
 		this.headerColIndexOf = (hg, header) => (hg && hg.headers ? hg.headers : []).indexOf(header);
 		this.pageRowOffset = () => {
-			if (!this.isGrid() || this.virtual) return 0;
+			if (!this.isGrid() || this.rowsWindowed()) return 0;
 			return this.pageIndex() * this.pageSize();
 		};
 		this.toAbsRow = (localRow) => localRow + this.pageRowOffset();
 		this.prePaginationRowCount = () => {
-			if (!this.table || this.virtual) return this.bodyRowCount();
+			if (!this.table || this.rowsWindowed()) return this.bodyRowCount();
 			const pm = this.table.getPrePaginationRowModel();
 			return pm && pm.rows ? pm.rows.length : this.bodyRowCount();
 		};
@@ -1204,8 +1575,11 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			const c = nextCol == null ? this._activeColIndex.value : nextCol;
 			const lvl = nextLevel == null ? this._activeHeaderLevel.value : nextLevel;
 			const header = nextIsHeader == null ? this._activeIsHeader.value : nextIsHeader;
-			if (this.virtual && this.virtualizer && !header && this.rowIsOutsideWindow(r)) {
-				this.virtualizer.scrollToIndex(r, { align: "center" });
+			const rowOut = this.rowsWindowed() && this.virtualizer && this.rowIsOutsideWindow(r);
+			const colOut = this.colsWindowed() && this.colVirtualizer && this.colIsOutsideWindow(c);
+			if (!header && (rowOut || colOut)) {
+				if (rowOut) this.virtualizer.scrollToIndex(r, { align: "center" });
+				if (colOut) this.colVirtualizer.scrollToIndex(c, { align: "center" });
 				let focusAttempts = 0;
 				const myEpoch = this.focusIntentEpoch;
 				const focusWhenReady = () => {
@@ -1244,7 +1618,6 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			return hg.length ? (hg[hg.length - 1].headers || []).length : 0;
 		};
 		this.bodyRowCount = () => (this._rows.value || []).length;
-		this.clamp = (v, lo, hi) => v < lo ? lo : v > hi ? hi : v;
 		this.headerLeafLevel = () => {
 			const hg = this._headerGroups.value || [];
 			return hg.length ? hg.length - 1 : 0;
@@ -1290,7 +1663,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		};
 		this.moveCol = (delta) => {
 			const max = (this._activeIsHeader.value ? this.headerCountAtLevel(this._activeHeaderLevel.value) : this.visibleColCount()) - 1;
-			const nextCol = this.clamp(this._activeColIndex.value + delta, 0, max < 0 ? 0 : max);
+			const nextCol = clamp(this._activeColIndex.value + delta, 0, max < 0 ? 0 : max);
 			this._activeColIndex.value = nextCol;
 			return nextCol;
 		};
@@ -1320,7 +1693,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 						isHeader: true,
 						level: this._activeHeaderLevel.value
 					};
-					const landRow = this.clamp(delta - 1, 0, maxRow);
+					const landRow = clamp(delta - 1, 0, maxRow);
 					this._activeIsHeader.value = false;
 					this._activeRow.value = landRow;
 					return {
@@ -1359,7 +1732,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 					level: leafLevel
 				};
 			}
-			const nextRow = this.clamp(this._activeRow.value + delta, 0, maxRow);
+			const nextRow = clamp(this._activeRow.value + delta, 0, maxRow);
 			this._activeRow.value = nextRow;
 			this._activeIsHeader.value = false;
 			return {
@@ -1408,19 +1781,14 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			const rowKey = this._activeIsHeader.value ? "__header" : String(this._activeRow.value);
 			return this.resolveCellEl(rowKey, this._activeColIndex.value, this._activeIsHeader.value ? this._activeHeaderLevel.value : null);
 		};
-		this.focusables = (cellEl) => {
-			if (!cellEl || !cellEl.querySelectorAll) return [];
-			return Array.prototype.slice.call(cellEl.querySelectorAll("button,[href],input,select,textarea,[tabindex]:not([tabindex=\"-1\"])")).filter((n) => !n.disabled);
-		};
 		this.enterControl = () => {
-			const cellEl = this.currentCellEl();
-			const list = this.focusables(cellEl);
+			const list = focusables(this.currentCellEl());
 			if (!list.length) return;
 			this._activeInControl.value = true;
 			list[0].focus();
 		};
 		this.cycleWithinCell = (cellEl, forward) => {
-			const list = this.focusables(cellEl);
+			const list = focusables(cellEl);
 			if (!list.length) return;
 			const active = this.gridRoot ? this.gridRoot.getRootNode().activeElement : null;
 			const cur = list.indexOf(active);
@@ -1791,7 +2159,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				}
 			}
 			const maxCol = colN - 1;
-			const col = this.clamp(this._activeColIndex.value, 0, maxCol < 0 ? 0 : maxCol);
+			const col = clamp(this._activeColIndex.value, 0, maxCol < 0 ? 0 : maxCol);
 			if (col !== this._activeColIndex.value) this._activeColIndex.value = col;
 			if (rowN <= 0) {
 				this._activeIsHeader.value = true;
@@ -1809,16 +2177,48 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			if (!this._activeIsHeader.value) {
 				const lastRow = rowN - 1;
 				const maxRow = lastRow < 0 ? 0 : lastRow;
-				const row = this.clamp(this._activeRow.value, 0, maxRow);
+				const row = clamp(this._activeRow.value, 0, maxRow);
 				if (row !== this._activeRow.value) this._activeRow.value = row;
 			}
 			this.clampRange(rowN - 1, colN - 1);
 			if (recoverFocus) {
-				const recRow = this.clamp(doomedRow, 0, rowN - 1);
-				const recCol = this.clamp(doomedCol, 0, maxCol < 0 ? 0 : maxCol);
+				const recRow = clamp(doomedRow, 0, rowN - 1);
+				const recCol = clamp(doomedCol, 0, maxCol < 0 ? 0 : maxCol);
 				this.recoverGridFocus(String(recRow), recCol, null);
 			}
 		};
+		this.windowedHeadersFor = (hg, hgLevel) => {
+			const headers = hg && hg.headers || [];
+			if (!this.colsWindowed()) return headers.map((h) => ({
+				header: h,
+				span: h && h.colSpan > 1 ? h.colSpan : 1
+			}));
+			const idx = this.windowedColIndices();
+			const idxSet = {};
+			for (let i = 0; i < idx.length; i++) idxSet[idx[i]] = true;
+			let cursor = 0;
+			const out = [];
+			for (let i = 0; i < headers.length; i++) {
+				const h = headers[i];
+				const leafCount = h && h.colSpan ? h.colSpan : 1;
+				const start = cursor;
+				const end = cursor + leafCount;
+				cursor = end;
+				let span = 0;
+				for (let c = start; c < end; c++) if (idxSet[c]) span = span + 1;
+				if (span > 0) out.push({
+					header: h,
+					span
+				});
+			}
+			return out;
+		};
+		this.windowedColSpan = () => this.colsWindowed() ? this.windowedColIndices().length + 2 : this.visibleColCount();
+		this.remeasureColumnWindow = () => {
+			if (!this.colsWindowed() || !this.colVirtualizer) return;
+			this.colVirtualizer.setOptions(this.columnVirtualizerOptions());
+			this.colVirtualizer._willUpdate();
+		};
 		this.gridEmptyFallback = false;
 		this.rangeTransition = false;
 		this.rangeClickPending = false;
@@ -1847,8 +2247,8 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				focus: null
 			};
 			const clampCorner = (c) => c == null ? null : {
-				rowIndex: this.clamp(c.rowIndex, 0, maxRow),
-				colIndex: this.clamp(c.colIndex, 0, maxCol)
+				rowIndex: clamp(c.rowIndex, 0, maxRow),
+				colIndex: clamp(c.colIndex, 0, maxCol)
 			};
 			return {
 				anchor: clampCorner(a),
@@ -1891,8 +2291,8 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 					colIndex: this._activeColIndex.value
 				};
 			}
-			const nextRow = this.clamp(focus.rowIndex + dRow, 0, maxRow);
-			const nextCol = this.clamp(focus.colIndex + dCol, 0, maxCol);
+			const nextRow = clamp(focus.rowIndex + dRow, 0, maxRow);
+			const nextCol = clamp(focus.colIndex + dCol, 0, maxCol);
 			const nextFocus = {
 				rowIndex: nextRow,
 				colIndex: nextCol
@@ -1916,8 +2316,8 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				colIndex: this._activeColIndex.value
 			};
 			const nextFocus = {
-				rowIndex: this.clamp(Math.trunc(Number(rIdx)) || 0, 0, maxRow),
-				colIndex: this.clamp(Math.trunc(Number(cIdx)) || 0, 0, maxCol)
+				rowIndex: clamp(Math.trunc(Number(rIdx)) || 0, 0, maxRow),
+				colIndex: clamp(Math.trunc(Number(cIdx)) || 0, 0, maxCol)
 			};
 			this._rangeAnchor.value = anchor;
 			this._rangeFocus.value = nextFocus;
@@ -1961,16 +2361,16 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				return;
 			}
 			if (a) {
-				const ar = this.clamp(a.rowIndex, 0, maxRow);
-				const ac = this.clamp(a.colIndex, 0, maxCol);
+				const ar = clamp(a.rowIndex, 0, maxRow);
+				const ac = clamp(a.colIndex, 0, maxCol);
 				if (ar !== a.rowIndex || ac !== a.colIndex) this._rangeAnchor.value = {
 					rowIndex: ar,
 					colIndex: ac
 				};
 			}
 			if (f) {
-				const fr = this.clamp(f.rowIndex, 0, maxRow);
-				const fc = this.clamp(f.colIndex, 0, maxCol);
+				const fr = clamp(f.rowIndex, 0, maxRow);
+				const fc = clamp(f.colIndex, 0, maxCol);
 				if (fr !== f.rowIndex || fc !== f.colIndex) this._rangeFocus.value = {
 					rowIndex: fr,
 					colIndex: fc
@@ -1992,10 +2392,10 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			const maxRow = this.bodyRowCount() - 1;
 			const maxCol = this.visibleColCount() - 1;
 			if (maxRow < 0 || maxCol < 0) return null;
-			const ar = this.clamp(a.rowIndex, 0, maxRow);
-			const ac = this.clamp(a.colIndex, 0, maxCol);
-			const fr = this.clamp(f.rowIndex, 0, maxRow);
-			const fc = this.clamp(f.colIndex, 0, maxCol);
+			const ar = clamp(a.rowIndex, 0, maxRow);
+			const ac = clamp(a.colIndex, 0, maxCol);
+			const fr = clamp(f.rowIndex, 0, maxRow);
+			const fc = clamp(f.colIndex, 0, maxCol);
 			return {
 				r0: ar < fr ? ar : fr,
 				r1: ar > fr ? ar : fr,
@@ -2003,10 +2403,6 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				c1: ac > fc ? ac : fc
 			};
 		};
-		this.escapeTsvField = (s) => {
-			if (s.indexOf("	") >= 0 || s.indexOf("\n") >= 0 || s.indexOf("\r") >= 0 || s.indexOf("\"") >= 0) return "\"" + s.replace(/"/g, "\"\"") + "\"";
-			return s;
-		};
 		this.rangeToTsv = () => {
 			const box = this.normalizedRange();
 			const r0 = box ? box.r0 : this._activeRow.value;
@@ -2018,77 +2414,12 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				const cells = [];
 				for (let c = c0; c <= c1; c++) {
 					const v = this.cellValueAt(r, c);
-					cells.push(this.escapeTsvField(v == null ? "" : String(v)));
+					cells.push(escapeTsvField(v == null ? "" : String(v)));
 				}
 				lines.push(cells.join("	"));
 			}
 			return lines.join("\n");
 		};
-		this.parseTsv = (text) => {
-			const str = text != null ? String(text) : "";
-			if (str === "" || str.length > 2e6) return [];
-			const rows = [];
-			let row = [];
-			let field = "";
-			let inQuotes = false;
-			let i = 0;
-			const n = str.length;
-			while (i < n) {
-				const ch = str[i];
-				if (inQuotes) {
-					if (ch === "\"") {
-						if (i + 1 < n && str[i + 1] === "\"") {
-							field = field + "\"";
-							i = i + 2;
-							continue;
-						}
-						inQuotes = false;
-						i = i + 1;
-						continue;
-					}
-					field = field + ch;
-					i = i + 1;
-					continue;
-				}
-				if (ch === "\"" && field === "") {
-					inQuotes = true;
-					i = i + 1;
-					continue;
-				}
-				if (ch === "	") {
-					row.push(field);
-					field = "";
-					i = i + 1;
-					continue;
-				}
-				if (ch === "\r") {
-					if (i + 1 < n && str[i + 1] === "\n") i = i + 1;
-					row.push(field);
-					field = "";
-					rows.push(row);
-					row = [];
-					i = i + 1;
-					continue;
-				}
-				if (ch === "\n") {
-					row.push(field);
-					field = "";
-					rows.push(row);
-					row = [];
-					i = i + 1;
-					continue;
-				}
-				field = field + ch;
-				i = i + 1;
-			}
-			row.push(field);
-			rows.push(row);
-			if (rows.length > 1) {
-				const last = rows[rows.length - 1];
-				if (last.length === 1 && last[0] === "") rows.pop();
-			}
-			return rows;
-		};
 		this.copyRange = () => {
 			if (!this.clipboardActiveAllowed()) return;
 			if (typeof navigator === "undefined" || !navigator.clipboard || !navigator.clipboard.writeText) return;
@@ -2124,7 +2455,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 					const field = this.fieldOfColId(colId);
 					const srcIndex = this.sourceIndexOfRow(r);
 					const oldValue = rowObj ? rowObj[field] : null;
-					next = this.replaceRowValue(next, srcIndex, field, value);
+					next = replaceRowValue(next, srcIndex, field, value);
 					committed.push({
 						rowId: this.rowIdAt(r),
 						columnId: colId,
@@ -2159,30 +2490,6 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			const row = (this._rows.value || [])[rowIndex];
 			return row ? row.id : null;
 		};
-		this.tileGridToBox = (grid, box) => {
-			const srcRows = grid.length;
-			let srcCols = 0;
-			for (let i = 0; i < srcRows; i++) {
-				const w = grid[i] && grid[i].length ? grid[i].length : 0;
-				if (w > srcCols) srcCols = w;
-			}
-			if (srcRows <= 0 || srcCols <= 0) return grid;
-			const boxRows = box.r1 - box.r0 + 1;
-			const boxCols = box.c1 - box.c0 + 1;
-			const rows = boxRows > srcRows ? boxRows : srcRows;
-			const cols = boxCols > srcCols ? boxCols : srcCols;
-			const out = [];
-			for (let r = 0; r < rows; r++) {
-				const srcLine = grid[r % srcRows] || [];
-				const line = [];
-				for (let c = 0; c < cols; c++) {
-					const v = srcLine[c % srcCols];
-					line.push(v != null ? v : "");
-				}
-				out.push(line);
-			}
-			return out;
-		};
 		this.pasteRange = () => {
 			if (!this.clipboardActiveAllowed()) return;
 			if (typeof navigator === "undefined" || !navigator.clipboard || !navigator.clipboard.readText) return;
@@ -2203,9 +2510,9 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			}
 			if (!p || !p.then) return;
 			p.then((text) => {
-				const grid = this.parseTsv(text);
+				const grid = parseTsv(text);
 				if (!grid.length) return;
-				const tiled = this.tileGridToBox(grid, destBox);
+				const tiled = tileGridToBox(grid, destBox);
 				this.applyGridToRange(tiled, anchorRow, anchorCol);
 			}).catch(() => {});
 		};
@@ -2243,13 +2550,6 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			}
 			this.applyGridToRange(grid, r0, c0);
 		};
-		this.tileIndex = (i, lo, hi) => {
-			const span = hi - lo + 1;
-			if (span <= 1) return lo;
-			let k = (i - lo) % span;
-			if (k < 0) k = k + span;
-			return lo + k;
-		};
 		this.fillRange = (sourceBox, endCell) => {
 			let box;
 			if (sourceBox && sourceBox.r0 != null && endCell) {
@@ -2279,8 +2579,8 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			for (let r = box.r0; r <= box.r1; r++) {
 				const cols = [];
 				for (let c = box.c0; c <= box.c1; c++) {
-					const sr = this.tileIndex(r, src.r0, src.r1);
-					const sc = this.tileIndex(c, src.c0, src.c1);
+					const sr = tileIndex(r, src.r0, src.r1);
+					const sc = tileIndex(c, src.c0, src.c1);
 					const v = this.cellValueAt(sr, sc);
 					cols.push(v == null ? "" : String(v));
 				}
@@ -2291,6 +2591,30 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.fillDragging = false;
 		this.fillDragMove = null;
 		this.fillDragUp = null;
+		this.fillEdgeScrollRaf = null;
+		this.FILL_EDGE_SCROLL_PX = 24;
+		this.FILL_EDGE_SCROLL_STEP = 16;
+		this.edgeDelta = (clientX, clientY) => {
+			if (!this.gridScrollEl) return {
+				dx: 0,
+				dy: 0
+			};
+			const rect = this.gridScrollEl.getBoundingClientRect();
+			let dx = 0;
+			let dy = 0;
+			if (this.colsWindowed()) {
+				if (clientX - rect.left < this.FILL_EDGE_SCROLL_PX) dx = -this.FILL_EDGE_SCROLL_STEP;
+				else if (rect.right - clientX < this.FILL_EDGE_SCROLL_PX) dx = this.FILL_EDGE_SCROLL_STEP;
+			}
+			if (this.rowsWindowed()) {
+				if (clientY - rect.top < this.FILL_EDGE_SCROLL_PX) dy = -this.FILL_EDGE_SCROLL_STEP;
+				else if (rect.bottom - clientY < this.FILL_EDGE_SCROLL_PX) dy = this.FILL_EDGE_SCROLL_STEP;
+			}
+			return {
+				dx,
+				dy
+			};
+		};
 		this.teardownFillDrag = () => {
 			if (typeof document !== "undefined") {
 				if (this.fillDragMove) document.removeEventListener("pointermove", this.fillDragMove);
@@ -2299,6 +2623,10 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this.fillDragMove = null;
 			this.fillDragUp = null;
 			this.fillDragging = false;
+			if (this.fillEdgeScrollRaf != null) {
+				if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(this.fillEdgeScrollRaf);
+				this.fillEdgeScrollRaf = null;
+			}
 		};
 		this.cellIndexFromPoint = (clientX, clientY) => {
 			if (typeof document === "undefined" || !document.elementFromPoint) return null;
@@ -2333,14 +2661,42 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				r: sourceBox.r1,
 				c: sourceBox.c1
 			} : null;
-			const move = (ev) => {
-				if (!this.fillDragging) return;
-				const cell = this.cellIndexFromPoint(ev.clientX, ev.clientY);
+			let lastClientX = 0;
+			let lastClientY = 0;
+			const applyPointAt = (clientX, clientY) => {
+				const cell = this.cellIndexFromPoint(clientX, clientY);
 				if (cell && (!lastCell || cell.r !== lastCell.r || cell.c !== lastCell.c)) {
 					lastCell = cell;
 					this.setRangeFocus(cell.r, cell.c);
 				}
 			};
+			const scrollStep = () => {
+				if (!this.fillDragging) {
+					this.fillEdgeScrollRaf = null;
+					return;
+				}
+				const d = this.edgeDelta(lastClientX, lastClientY);
+				if (d.dx === 0 && d.dy === 0) {
+					this.fillEdgeScrollRaf = null;
+					return;
+				}
+				if (this.gridScrollEl) {
+					if (d.dx !== 0) this.gridScrollEl.scrollLeft = this.gridScrollEl.scrollLeft + d.dx;
+					if (d.dy !== 0) this.gridScrollEl.scrollTop = this.gridScrollEl.scrollTop + d.dy;
+				}
+				applyPointAt(lastClientX, lastClientY);
+				this.fillEdgeScrollRaf = requestAnimationFrame(scrollStep);
+			};
+			const move = (ev) => {
+				if (!this.fillDragging) return;
+				lastClientX = ev.clientX;
+				lastClientY = ev.clientY;
+				applyPointAt(ev.clientX, ev.clientY);
+				if (this.fillEdgeScrollRaf == null && typeof requestAnimationFrame === "function") {
+					const d = this.edgeDelta(ev.clientX, ev.clientY);
+					if (d.dx !== 0 || d.dy !== 0) this.fillEdgeScrollRaf = requestAnimationFrame(scrollStep);
+				}
+			};
 			const up = () => {
 				this.teardownFillDrag();
 				if (lastCell && sourceBox && (lastCell.r !== sourceBox.r1 || lastCell.c !== sourceBox.c1)) this.fillRange(sourceBox, lastCell);
@@ -2429,16 +2785,6 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.setInvalid = (msg) => {
 			this._invalidMsg.value = msg != null ? msg : "";
 		};
-		this.replaceRowValue = (rows, rowIndex, field, value) => {
-			const src = rows || [];
-			const out = [];
-			for (let i = 0; i < src.length; i++) if (i === rowIndex) out.push({
-				...src[i] || {},
-				[field]: value
-			});
-			else out.push(src[i]);
-			return out;
-		};
 		this.sourceIndexOfRow = (visibleRowIndex) => {
 			const row = (this._rows.value || [])[visibleRowIndex];
 			if (!row) return visibleRowIndex;
@@ -2545,16 +2891,6 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			if (typeof requestAnimationFrame === "function") requestAnimationFrame(tryFocus);
 			else setTimeout(tryFocus, 0);
 		};
-		this.indexOfRowIn = (rows, rowOriginal, rowId) => {
-			const list = rows || [];
-			for (let i = 0; i < list.length; i++) {
-				const r = list[i];
-				if (!r) continue;
-				if (rowId != null && r.id === rowId) return i;
-				if (rowOriginal != null && r.original === rowOriginal) return i;
-			}
-			return -1;
-		};
 		this.endEdit = () => {
 			this._editingRow.value = -1;
 			this._editingCol.value = -1;
@@ -2616,7 +2952,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this.committedThisSession = true;
 			if (changed) {
 				const srcIndex = this.sourceIndexOfRow(this._editingRow.value);
-				const next = this.replaceRowValue(this.currentData(), srcIndex, field, newValue);
+				const next = replaceRowValue(this.currentData(), srcIndex, field, newValue);
 				this.writeData(next);
 				this.dispatchEvent(new CustomEvent("cell-edit-commit", {
 					detail: {
@@ -2659,7 +2995,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			const field = def && def.accessorKey != null ? def.accessorKey : colId;
 			const srcIndex = this.sourceIndexOfRow(this._activeRow.value);
 			this.committedThisSession = true;
-			this.writeData(this.replaceRowValue(this.currentData(), srcIndex, field, newValue));
+			this.writeData(replaceRowValue(this.currentData(), srcIndex, field, newValue));
 			this.dispatchEvent(new CustomEvent("cell-edit-commit", {
 				detail: {
 					rowId,
@@ -2794,7 +3130,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this.editTransition = true;
 			if (changed) {
 				const srcIndex = this.sourceIndexOfRow(rowIndex);
-				const next = this.replaceRowValues(this.currentData(), srcIndex, fieldValues);
+				const next = replaceRowValues(this.currentData(), srcIndex, fieldValues);
 				this.writeData(next);
 				this.dispatchEvent(new CustomEvent("row-edit-commit", {
 					detail: {
@@ -2824,17 +3160,6 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this.editTransition = false;
 			this.focusCellWhenReady(focusRow, focusCol);
 		};
-		this.replaceRowValues = (rows, rowIndex, fieldValues) => {
-			const src = rows || [];
-			const fv = fieldValues || {};
-			const out = [];
-			for (let i = 0; i < src.length; i++) if (i === rowIndex) out.push({
-				...src[i] || {},
-				...fv
-			});
-			else out.push(src[i]);
-			return out;
-		};
 		this.nextEditableCell = (fromRow, fromCol) => {
 			const rowList = this._rows.value || [];
 			const rowCount = rowList.length;
@@ -3019,8 +3344,8 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			const lastRow = this.bodyRowCount() - 1;
 			const maxRow = lastRow < 0 ? 0 : lastRow;
 			const maxCol = this.visibleColCount() - 1;
-			const r = this.clamp(Math.trunc(Number(rowIndex)) || 0, 0, maxRow);
-			const c = this.clamp(Math.trunc(Number(colIndex)) || 0, 0, maxCol < 0 ? 0 : maxCol);
+			const r = clamp(Math.trunc(Number(rowIndex)) || 0, 0, maxRow);
+			const c = clamp(Math.trunc(Number(colIndex)) || 0, 0, maxCol < 0 ? 0 : maxCol);
 			this.committedThisSession = false;
 			this._activeIsHeader.value = false;
 			this._activeRow.value = r;
@@ -3037,7 +3362,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.editRow = (rowIndex) => {
 			const lastRow = this.bodyRowCount() - 1;
 			const maxRow = lastRow < 0 ? 0 : lastRow;
-			const r = this.clamp(Math.trunc(Number(rowIndex)) || 0, 0, maxRow);
+			const r = clamp(Math.trunc(Number(rowIndex)) || 0, 0, maxRow);
 			const row = (this._rows.value || [])[r];
 			if (!row) return;
 			this._activeIsHeader.value = false;
@@ -3071,12 +3396,13 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			if (!this.isGrid()) return;
 			this.focusIntentEpoch = this.focusIntentEpoch + 1;
 			const maxCol = this.visibleColCount() - 1;
-			const c = this.clamp(Math.trunc(Number(colIndex)) || 0, 0, maxCol < 0 ? 0 : maxCol);
+			const c = clamp(Math.trunc(Number(colIndex)) || 0, 0, maxCol < 0 ? 0 : maxCol);
 			const absLast = this.prePaginationRowCount() - 1;
-			const absRow = this.clamp(Math.trunc(Number(rowIndex)) || 0, 0, absLast < 0 ? 0 : absLast);
+			const absRow = clamp(Math.trunc(Number(rowIndex)) || 0, 0, absLast < 0 ? 0 : absLast);
 			const prevAbs = this.toAbsRow(this._activeRow.value);
+			const prevCol = this._activeColIndex.value;
 			const prevIsHeader = this._activeIsHeader.value;
-			if (this.virtual) {
+			if (this.rowsWindowed()) {
 				this._activeIsHeader.value = false;
 				this._activeInControl.value = false;
 				this._activeRow.value = absRow;
@@ -3095,7 +3421,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				if (switched) this.focusAbsCellWhenReady(absRow, localRow, c);
 				else this.focusActiveCell(localRow, c, false);
 			}
-			if (absRow !== prevAbs || prevIsHeader) this.dispatchEvent(new CustomEvent("activecell-change", {
+			if (absRow !== prevAbs || c !== prevCol || prevIsHeader) this.dispatchEvent(new CustomEvent("activecell-change", {
 				detail: {
 					rowIndex: absRow,
 					colIndex: c
@@ -3179,6 +3505,13 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
   font: var(--rdt-font, 14px system-ui, sans-serif);
   color: var(--rdt-color, inherit);
 }
+.rozie-data-table.rdt-col-windowed[data-rozie-s-d5dcab4c] {
+  table-layout: fixed;
+}
+.rozie-data-table.rdt-col-windowed[data-rozie-s-d5dcab4c] .rdt-th[data-rozie-s-d5dcab4c],
+.rozie-data-table.rdt-col-windowed[data-rozie-s-d5dcab4c] .rdt-td[data-rozie-s-d5dcab4c] {
+  box-sizing: border-box;
+}
 .rdt-sr-live[data-rozie-s-d5dcab4c] {
   position: absolute;
   width: 1px;
@@ -3715,10 +4048,11 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this._rows.value = nextRows;
 			this._headerGroups.value = nextGroups;
 			this._rowModelVer.value = this._rowModelVer.value + 1;
-			if (this.virtual && this.virtualizer) {
+			if (this.rowsWindowed() && this.virtualizer) {
 				this.virtualizer.setOptions(this.virtualizerOptions());
 				this.virtualizer._willUpdate();
 			}
+			this.remeasureColumnWindow();
 			const nextRowCount = nextRows.length;
 			const nextColCount = nextRows.length ? nextRows[0].getVisibleCells().length : nextGroups.length ? (nextGroups[nextGroups.length - 1].headers || []).length : 0;
 			this.clampActiveCell(nextRowCount, nextColCount);
@@ -3731,7 +4065,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			if (this.pendingEditFollow && this.isGrid()) {
 				const follow = this.pendingEditFollow;
 				this.pendingEditFollow = null;
-				const followIdx = this.indexOfRowIn(nextRows, follow.rowOriginal, follow.rowId);
+				const followIdx = indexOfRowIn(nextRows, follow.rowOriginal, follow.rowId);
 				if (followIdx >= 0) this.focusCellWhenReady(followIdx, follow.col);
 			}
 			this.syncIndeterminate();
@@ -3740,17 +4074,28 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		};
 		this.refreshRowModel();
 		this.gridRoot = this._ref__rozieRoot ? this._ref__rozieRoot.querySelector(".rozie-data-table") : null;
-		if (this.virtual) {
-			this.gridScrollEl = this._ref__rozieRoot ? this._ref__rozieRoot.querySelector(".rdt-scroll") : null;
+		if (this.isWindowed()) this.gridScrollEl = this._ref__rozieRoot ? this._ref__rozieRoot.querySelector(".rdt-scroll") : null;
+		if (this.rowsWindowed()) {
 			this.virtualizer = new Virtualizer(this.virtualizerOptions());
 			this.virtualizerCleanup = this.virtualizer._didMount();
-			this._windowVer.value = this._windowVer.value + 1;
+		}
+		if (this.colsWindowed()) {
+			this.colVirtualizer = new Virtualizer(this.columnVirtualizerOptions());
+			this.colVirtualizerCleanup = this.colVirtualizer._didMount();
+		}
+		if (this.isWindowed()) this._windowVer.value = this._windowVer.value + 1;
+		if (this.isWindowed()) {
 			const afterFirstFrame = () => {
-				this.remeasureWindow();
-				if (!(this.gridScrollEl ? this.gridScrollEl.clientHeight : 0)) console.warn("[rozie-data-table] virtual is on but the scroll container has no bounded height; set maxHeight or --rozie-data-table-max-height");
-				const pg = this.pagination;
-				const pgConfigured = pg != null && !(pg.pageIndex === 0 && pg.pageSize === 10);
-				if (this.manual !== true && pgConfigured) console.warn("[rozie-data-table] virtual+pagination: client pagination is configured but virtual windowing replaces it — the pagination chrome is auto-suppressed. Remove the pagination prop or set manual to silence this.");
+				if (this.rowsWindowed()) {
+					this.remeasureWindow();
+					if (!(this.gridScrollEl ? this.gridScrollEl.clientHeight : 0)) console.warn("[rozie-data-table] virtual is on but the scroll container has no bounded height; set maxHeight or --rozie-data-table-max-height");
+					const pg = this.pagination;
+					const pgConfigured = pg != null && !(pg.pageIndex === 0 && pg.pageSize === 10);
+					if (this.manual !== true && pgConfigured) console.warn("[rozie-data-table] virtual+pagination: client pagination is configured but virtual windowing replaces it — the pagination chrome is auto-suppressed. Remove the pagination prop or set manual to silence this.");
+				}
+				if (this.colsWindowed()) {
+					if (!(this.gridScrollEl ? this.gridScrollEl.clientWidth : 0)) console.warn("[rozie-data-table] virtual is on for columns but the scroll container has no bounded width; set a CSS width on an ancestor so the column window can be measured");
+				}
 			};
 			if (typeof requestAnimationFrame === "function") requestAnimationFrame(() => requestAnimationFrame(afterFirstFrame));
 			else setTimeout(afterFirstFrame, 0);
@@ -3835,10 +4180,11 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 		})()} @rozie-group-bar-apply-grouping=${($event) => this.applyGrouping($event.detail)} @rozie-group-bar-clear-grouping=${($event) => this.clearGrouping($event.detail)}>
     ${repeat(this.groupingKeys(), (gk, _idx) => gk, (gk, _idx) => html`<span class="rdt-group-token" data-group-token="" data-rozie-s-d5dcab4c>${rozieDisplay(gk)}</span>`)}
   </slot>`}
-</div>` : nothing}${this.virtual ? html`<div class="rdt-scroll" style=${rozieStyle(this.maxHeight ? "max-height:" + this.maxHeight + ";overflow:auto;--rozie-data-table-max-height:" + this.maxHeight : "overflow:auto")} data-rozie-s-d5dcab4c>
+</div>` : nothing}${this.isWindowed() ? html`<div class="rdt-scroll" style=${rozieStyle(this.rowsWindowed() && this.maxHeight ? "max-height:" + this.maxHeight + ";overflow:auto;--rozie-data-table-max-height:" + this.maxHeight : "overflow:auto")} data-rozie-s-d5dcab4c>
 <table class="${Object.entries({
 			"rozie-data-table": true,
-			"rdt-sticky": this.stickyHeader
+			"rdt-sticky": this.stickyHeader,
+			"rdt-col-windowed": this.colsWindowed()
 		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${rozieAttr(this.tableRole())} aria-rowcount=${rozieAttr(this.gridAriaRowCount())} @keydown=${($event) => {
 			this.onGridKeyDown($event);
 		}} @focusin=${($event) => {
@@ -3854,14 +4200,15 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 		}} data-rozie-s-d5dcab4c>
   <thead class="rdt-thead" role="rowgroup" data-rozie-s-d5dcab4c>
     ${repeat(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => html`<tr class="rdt-tr" role="row" aria-rowindex=${rozieAttr(hgLevel + 1)} data-rozie-s-d5dcab4c>
-      ${repeat(hg.headers, (header, _idx) => header.id, (header, _idx) => html`<th class="${Object.entries({
+      
+      ${this.colsWindowed() ? html`<th class="rdt-col-spacer" aria-hidden="true" style=${rozieStyle("width:" + this.colPadLeft() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c></th>` : nothing}${repeat(this.windowedHeadersFor(hg, hgLevel), (wh, _idx) => wh.header.id, (wh, _idx) => html`<th class="${Object.entries({
 			"rdt-th": true,
-			"rdt-select-th": this.isSelectColumn(header.column.id),
-			"rdt-expander-th": this.isExpanderColumn(header.column.id),
-			"rdt-th-resizing": this.columnIsResizing(header.column.id),
-			"rdt-cell-active": this.isActiveCell("__header", this.headerColIndexOf(hg, header), hgLevel)
-		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="columnheader" data-col=${rozieAttr(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${rozieAttr(hgLevel)} colspan=${rozieAttr(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${rozieAttr(this.headerColIndexOf(hg, header))} tabindex=${rozieAttr(this.cellTabindex("__header", this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(header.column.id))} style=${rozieStyle(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
-        ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
+			"rdt-select-th": this.isSelectColumn(wh.header.column.id),
+			"rdt-expander-th": this.isExpanderColumn(wh.header.column.id),
+			"rdt-th-resizing": this.columnIsResizing(wh.header.column.id),
+			"rdt-cell-active": this.isActiveCell("__header", this.headerColIndexOf(hg, wh.header), hgLevel)
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="columnheader" data-col=${rozieAttr(wh.header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${rozieAttr(hgLevel)} colspan=${rozieAttr(wh.span > 1 ? wh.span : null)} data-col-index=${rozieAttr(this.headerColIndexOf(hg, wh.header))} tabindex=${rozieAttr(this.cellTabindex("__header", this.headerColIndexOf(hg, wh.header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(wh.header.column.id))} style=${rozieStyle(this.thStyle(wh.header.column.id))} data-rozie-s-d5dcab4c>
+        ${this.isSelectColumn(wh.header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.selectAll !== void 0 ? this.selectAll({
 			checked: this.isAllRowsSelected(),
 			indeterminate: this.isSomeRowsSelected(),
@@ -3879,102 +4226,103 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
             ${this.selectionMode === "multiple" ? html`<input class="rdt-select-all" type="checkbox" aria-label="Select all rows" ?checked=${this.isAllRowsSelected()} @change=${($event) => {
 			this.onToggleAllRows($event);
 		}} data-rozie-s-d5dcab4c />` : nothing}</slot>`}
-        </span>` : this.isExpanderColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span style="display:contents" data-rozie-s-d5dcab4c>
-          ${header.column.getCanSort && header.column.getCanSort() ? html`<button class="rdt-sort-btn" type="button" @click=${($event) => {
-			this.onHeaderSort(header.column.id, $event);
+        </span>` : this.isExpanderColumn(wh.header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span style="display:contents" data-rozie-s-d5dcab4c>
+          ${wh.header.column.getCanSort && wh.header.column.getCanSort() ? html`<button class="rdt-sort-btn" type="button" @click=${($event) => {
+			this.onHeaderSort(wh.header.column.id, $event);
 		}} data-rozie-s-d5dcab4c>
             <span class="rdt-header-label" data-rozie-s-d5dcab4c>
               ${this.colHeader !== void 0 ? this.colHeader({
-			columnId: header.column.id,
-			column: header.column,
-			label: this.headerLabel(header.column.id)
+			columnId: wh.header.column.id,
+			column: wh.header.column,
+			label: this.headerLabel(wh.header.column.id)
 		}) : html`<slot name="colHeader" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
-					columnId: header.column.id,
-					column: header.column,
-					label: this.headerLabel(header.column.id)
+					columnId: wh.header.column.id,
+					column: wh.header.column,
+					label: this.headerLabel(wh.header.column.id)
 				});
 			} catch {
 				return "{}";
 			}
-		})()}>${rozieDisplay(this.headerLabel(header.column.id))}</slot>`}
+		})()}>${rozieDisplay(this.headerLabel(wh.header.column.id))}</slot>`}
             </span>
-            <span class="rdt-sort-ind" aria-hidden="true" data-rozie-s-d5dcab4c>${rozieDisplay(this.sortIndicator(header.column.id))}</span>
+            <span class="rdt-sort-ind" aria-hidden="true" data-rozie-s-d5dcab4c>${rozieDisplay(this.sortIndicator(wh.header.column.id))}</span>
           </button>` : html`<span style="display:contents" data-rozie-s-d5dcab4c>
             <span class="rdt-header-label" data-rozie-s-d5dcab4c>
               ${this.colHeader !== void 0 ? this.colHeader({
-			columnId: header.column.id,
-			column: header.column,
-			label: this.headerLabel(header.column.id)
+			columnId: wh.header.column.id,
+			column: wh.header.column,
+			label: this.headerLabel(wh.header.column.id)
 		}) : html`<slot name="colHeader" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
-					columnId: header.column.id,
-					column: header.column,
-					label: this.headerLabel(header.column.id)
+					columnId: wh.header.column.id,
+					column: wh.header.column,
+					label: this.headerLabel(wh.header.column.id)
 				});
 			} catch {
 				return "{}";
 			}
-		})()}>${rozieDisplay(this.headerLabel(header.column.id))}</slot>`}
+		})()}>${rozieDisplay(this.headerLabel(wh.header.column.id))}</slot>`}
             </span>
-          </span>`}<rozie-popover trigger="click" placement="bottom-end" strategy="fixed" .offset=${4} data-rozie-s-d5dcab4c><button class="rdt-col-menu-trigger" type="button" aria-label=${rozieAttr("Column options for " + this.headerLabel(header.column.id))} data-rozie-s-d5dcab4c slot="anchor">⋯</button><div class="rdt-col-menu" role="menu" data-rozie-s-d5dcab4c>
-              <button class="rdt-col-menu-item" type="button" role="menuitem" aria-pressed=${this.columnPinSide(header.column.id) === "left"} @click=${($event) => {
-			this.onPinColumn(header.column.id, "left", $event);
+          </span>`}<rozie-popover trigger="click" placement="bottom-end" strategy="fixed" .offset=${4} data-rozie-s-d5dcab4c><button class="rdt-col-menu-trigger" type="button" aria-label=${rozieAttr("Column options for " + this.headerLabel(wh.header.column.id))} data-rozie-s-d5dcab4c slot="anchor">⋯</button><div class="rdt-col-menu" role="menu" data-rozie-s-d5dcab4c>
+              <button class="rdt-col-menu-item" type="button" role="menuitem" aria-pressed=${this.columnPinSide(wh.header.column.id) === "left"} @click=${($event) => {
+			this.onPinColumn(wh.header.column.id, "left", $event);
 		}} data-rozie-s-d5dcab4c>Pin left</button>
-              <button class="rdt-col-menu-item" type="button" role="menuitem" aria-pressed=${this.columnPinSide(header.column.id) === "right"} @click=${($event) => {
-			this.onPinColumn(header.column.id, "right", $event);
+              <button class="rdt-col-menu-item" type="button" role="menuitem" aria-pressed=${this.columnPinSide(wh.header.column.id) === "right"} @click=${($event) => {
+			this.onPinColumn(wh.header.column.id, "right", $event);
 		}} data-rozie-s-d5dcab4c>Pin right</button>
-              <button class="rdt-col-menu-item" type="button" role="menuitem" aria-pressed=${!this.columnPinSide(header.column.id)} @click=${($event) => {
-			this.onPinColumn(header.column.id, false, $event);
+              <button class="rdt-col-menu-item" type="button" role="menuitem" aria-pressed=${!this.columnPinSide(wh.header.column.id)} @click=${($event) => {
+			this.onPinColumn(wh.header.column.id, false, $event);
 		}} data-rozie-s-d5dcab4c>Unpin</button>
               <hr class="rdt-col-menu-sep" data-rozie-s-d5dcab4c />
               <button class="rdt-col-menu-item" type="button" role="menuitem" @click=${($event) => {
-			this.onHideColumn(header.column.id, $event);
+			this.onHideColumn(wh.header.column.id, $event);
 		}} data-rozie-s-d5dcab4c>Hide column</button>
             </div></rozie-popover>
-          <button class="rdt-resize-handle" type="button" aria-label=${rozieAttr("Resize " + this.headerLabel(header.column.id))} @pointerdown=${($event) => {
-			this.onResizeStart(header.column.id, $event);
+          <button class="rdt-resize-handle" type="button" aria-label=${rozieAttr("Resize " + this.headerLabel(wh.header.column.id))} @pointerdown=${($event) => {
+			this.onResizeStart(wh.header.column.id, $event);
 		}} @touchstart=${($event) => {
-			this.onResizeStart(header.column.id, $event);
+			this.onResizeStart(wh.header.column.id, $event);
 		}} data-rozie-s-d5dcab4c><span class="rdt-resize-grip" aria-hidden="true" data-rozie-s-d5dcab4c></span></button>
         </span>`}</th>`)}
-    </tr>`)}
+      
+      ${this.colsWindowed() ? html`<th class="rdt-col-spacer" aria-hidden="true" style=${rozieStyle("width:" + this.colPadRight() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c></th>` : nothing}</tr>`)}
     
     ${this.hasAnyFilterableColumn() ? html`<tr class="rdt-filter-row" data-rozie-s-d5dcab4c>
-      ${repeat(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => html`<th class="rdt-filter-cell" role="presentation" style=${rozieStyle(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
-        ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : this.isExpanderColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span style="display:contents" data-rozie-s-d5dcab4c>
-          ${this.columnIsFilterable(header.column.id) && !this.hasFilterSlot() ? html`<input class="rdt-col-filter" type="text" aria-label=${rozieAttr("Filter " + this.headerLabel(header.column.id))} .value=${this.columnFilterValue(header.column.id)} @input=${($event) => {
-			this.onColumnFilterInput(header.column.id, $event);
+      ${this.colsWindowed() ? html`<th class="rdt-col-spacer" aria-hidden="true" style=${rozieStyle("width:" + this.colPadLeft() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c></th>` : nothing}${repeat(this.windowedHeadersFor(this._headerGroups.value[this._headerGroups.value.length - 1], this._headerGroups.value.length - 1), (wh, _idx) => wh.header.id, (wh, _idx) => html`<th class="rdt-filter-cell" role="presentation" data-col=${rozieAttr(wh.header.column.id)} style=${rozieStyle(this.pinStyle(wh.header.column.id))} data-rozie-s-d5dcab4c>
+        ${this.isSelectColumn(wh.header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : this.isExpanderColumn(wh.header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span style="display:contents" data-rozie-s-d5dcab4c>
+          ${this.columnIsFilterable(wh.header.column.id) && !this.hasFilterSlot() ? html`<input class="rdt-col-filter" type="text" aria-label=${rozieAttr("Filter " + this.headerLabel(wh.header.column.id))} .value=${this.columnFilterValue(wh.header.column.id)} @input=${($event) => {
+			this.onColumnFilterInput(wh.header.column.id, $event);
 		}} @click=${($event) => {
 			this.stopEvent($event);
-		}} data-rozie-s-d5dcab4c />` : nothing}${this.columnIsFilterable(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
+		}} data-rozie-s-d5dcab4c />` : nothing}${this.columnIsFilterable(wh.header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
             ${this.filter !== void 0 ? this.filter({
-			columnId: header.column.id,
-			value: this.columnFilterValue(header.column.id),
-			uniqueValues: this.getFacetedUniqueValues(header.column.id),
-			minMax: this.getFacetedMinMaxValues(header.column.id),
+			columnId: wh.header.column.id,
+			value: this.columnFilterValue(wh.header.column.id),
+			uniqueValues: this.getFacetedUniqueValues(wh.header.column.id),
+			minMax: this.getFacetedMinMaxValues(wh.header.column.id),
 			setFilter: this.setColumnFilter
 		}) : html`<slot name="filter" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
-					columnId: header.column.id,
-					value: this.columnFilterValue(header.column.id),
-					uniqueValues: this.getFacetedUniqueValues(header.column.id),
-					minMax: this.getFacetedMinMaxValues(header.column.id)
+					columnId: wh.header.column.id,
+					value: this.columnFilterValue(wh.header.column.id),
+					uniqueValues: this.getFacetedUniqueValues(wh.header.column.id),
+					minMax: this.getFacetedMinMaxValues(wh.header.column.id)
 				});
 			} catch {
 				return "{}";
 			}
 		})()} @rozie-filter-set-filter=${($event) => this.setColumnFilter($event.detail)}></slot>`}
           </span>` : nothing}</span>`}</th>`)}
-    </tr>` : nothing}</thead>
+      ${this.colsWindowed() ? html`<th class="rdt-col-spacer" aria-hidden="true" style=${rozieStyle("width:" + this.colPadRight() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c></th>` : nothing}</tr>` : nothing}</thead>
 
   <tbody class="rdt-tbody" role="rowgroup" data-rozie-s-d5dcab4c>
     
     <tr class="rdt-spacer" aria-hidden="true" data-rozie-s-d5dcab4c>
-      <td colspan=${rozieAttr(this.visibleColCount())} style=${rozieStyle("height:" + this.padTop() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c></td>
+      <td colspan=${rozieAttr(this.windowedColSpan())} style=${rozieStyle("height:" + this.padTop() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c></td>
     </tr>
     
     ${repeat(this.windowedRows(), (wr, _idx) => wr.row.id, (wr, _idx) => html`
@@ -3983,7 +4331,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			"rdt-group-header": this.rowIsGrouped(wr.row),
 			"rdt-row-pinned": wr.pinned
 		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="row" data-row=${rozieAttr(wr.vi.index)} aria-rowindex=${rozieAttr(this.headerRowCount() + wr.vi.index + 1)} data-index=${rozieAttr(wr.vi.index)} data-pinned=${rozieAttr(wr.pinned ? "true" : null)} data-depth=${rozieAttr(wr.row.depth)} data-group-header=${rozieAttr(this.rowIsGrouped(wr.row) ? wr.row.id : null)} data-group-leaf=${rozieAttr(this.groupingActive() && !this.rowIsGrouped(wr.row) ? wr.row.id : null)} aria-expanded=${rozieAttr(this.rowIsGrouped(wr.row) ? !!this.rowIsExpanded(wr.row) : null)} aria-selected=${rozieAttr(this.selectionMode !== "none" ? !!this.rowIsSelected(wr.row) : null)} aria-level=${rozieAttr(this.groupingActive() ? wr.row.depth + 1 : null)} data-rozie-s-d5dcab4c>
-      ${repeat(this.visibleCellsFor(wr.row), (cell, _idx) => cell.id, (cell, _idx) => html`<td class="${Object.entries({
+      
+      ${this.colsWindowed() ? html`<td class="rdt-col-spacer" aria-hidden="true" style=${rozieStyle("width:" + this.colPadLeft() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c></td>` : nothing}${repeat(this.windowedCells(wr.row), (cell, _idx) => cell.id, (cell, _idx) => html`<td class="${Object.entries({
 			"rdt-td": true,
 			"rdt-select-td": this.isSelectColumn(cell.column.id),
 			"rdt-expander-td": this.isExpanderColumn(cell.column.id),
@@ -4109,10 +4458,11 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
         </span>`}${this.isFillHandleCell(wr.vi.index, this.colIndexOf(wr.row, cell)) ? html`<span class="rdt-fill-handle" data-fill-handle="" data-testid="fill-handle" aria-hidden="true" @pointerdown=${($event) => {
 			this.onFillHandlePointerDown($event);
 		}} data-rozie-s-d5dcab4c></span>` : nothing}</td>`)}
-    </tr>
+      
+      ${this.colsWindowed() ? html`<td class="rdt-col-spacer" aria-hidden="true" style=${rozieStyle("width:" + this.colPadRight() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c></td>` : nothing}</tr>
     
     ${this.rowShowsDetail(wr.row) ? html`<tr class="rdt-detail-row" role="row" data-detail-row=${rozieAttr(wr.row.id)} data-rozie-s-d5dcab4c>
-      <td class="rdt-detail-cell" colspan=${rozieAttr(this.visibleColCount())} data-rozie-s-d5dcab4c>
+      <td class="rdt-detail-cell" colspan=${rozieAttr(this.windowedColSpan())} data-rozie-s-d5dcab4c>
         ${this.detail !== void 0 ? this.detail({ row: wr.row.original }) : html`<slot name="detail" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({ row: wr.row.original });
@@ -4124,7 +4474,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     </tr>` : nothing}`)}
     
     <tr class="rdt-spacer" aria-hidden="true" data-rozie-s-d5dcab4c>
-      <td colspan=${rozieAttr(this.visibleColCount())} style=${rozieStyle("height:" + this.padBottom() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c></td>
+      <td colspan=${rozieAttr(this.windowedColSpan())} style=${rozieStyle("height:" + this.padBottom() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c></td>
     </tr>
   </tbody>
 </table>
@@ -4416,7 +4766,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
       </td>
     </tr>` : nothing}`)}
   </tbody>
-</table>`}${!this.virtual ? html`<div class="rdt-pagination" role="group" aria-label="Pagination" data-rozie-s-d5dcab4c>
+</table>`}${!this.rowsWindowed() ? html`<div class="rdt-pagination" role="group" aria-label="Pagination" data-rozie-s-d5dcab4c>
   <button class="rdt-page-btn rdt-page-prev" type="button" ?disabled=${!this.canPrevPage()} @click=${($event) => {
 			this.onPrevPage();
 		}} data-rozie-s-d5dcab4c>Prev</button>
@@ -4604,14 +4954,15 @@ __decorate([property({
 	type: Number,
 	reflect: true
 })], DataTable.prototype, "undoLimit", void 0);
-__decorate([property({
-	type: Boolean,
-	reflect: true
-})], DataTable.prototype, "virtual", void 0);
+__decorate([property({ converter: { fromAttribute: (v) => v === null ? false : v === "true" ? true : v === "false" ? false : v === "" ? true : v } })], DataTable.prototype, "virtual", void 0);
 __decorate([property({
 	type: Number,
 	reflect: true
 })], DataTable.prototype, "estimateRowHeight", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], DataTable.prototype, "autoMeasure", void 0);
 __decorate([property({
 	type: String,
 	reflect: true