@rozie-ui/data-table-solid 0.2.5 → 0.3.1

package/dist/index.mjs

@@ -4,6 +4,163 @@ import { __rozieInjectStyle, createControllableSignal, parseInlineStyle, rozieAt
 import Popover from "@rozie-ui/popover-solid";
 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 src/DataTable.tsx
 __rozieInjectStyle("DataTable-d5dcab4c", `.rozie-data-table[data-rozie-s-d5dcab4c] {
   border-collapse: collapse;
@@ -11,6 +168,13 @@ __rozieInjectStyle("DataTable-d5dcab4c", `.rozie-data-table[data-rozie-s-d5dcab4
   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;
@@ -328,6 +492,7 @@ function DataTable(_props) {
 		undoLimit: 100,
 		virtual: false,
 		estimateRowHeight: 40,
+		autoMeasure: false,
 		maxHeight: ""
 	}, _props), [
 		"data",
@@ -357,6 +522,7 @@ function DataTable(_props) {
 		"undoLimit",
 		"virtual",
 		"estimateRowHeight",
+		"autoMeasure",
 		"maxHeight",
 		"children",
 		"ref",
@@ -531,10 +697,11 @@ function DataTable(_props) {
 			setRows(nextRows);
 			setHeaderGroups(nextGroups);
 			setRowModelVer(rowModelVer() + 1);
-			if (local.virtual && virtualizer) {
+			if (rowsWindowed() && virtualizer) {
 				virtualizer.setOptions(virtualizerOptions());
 				virtualizer._willUpdate();
 			}
+			remeasureColumnWindow();
 			const nextRowCount = nextRows.length;
 			clampActiveCell(nextRowCount, nextRows.length ? nextRows[0].getVisibleCells().length : nextGroups.length ? (nextGroups[nextGroups.length - 1].headers || []).length : 0);
 			const pgState = table.getState().pagination;
@@ -555,17 +722,28 @@ function DataTable(_props) {
 		};
 		refreshRowModel();
 		gridRoot = __rozieRootRef ? __rozieRootRef.querySelector(".rozie-data-table") : null;
-		if (local.virtual) {
-			gridScrollEl = __rozieRootRef ? __rozieRootRef.querySelector(".rdt-scroll") : null;
+		if (isWindowed()) gridScrollEl = __rozieRootRef ? __rozieRootRef.querySelector(".rdt-scroll") : null;
+		if (rowsWindowed()) {
 			virtualizer = new Virtualizer(virtualizerOptions());
 			virtualizerCleanup = virtualizer._didMount();
-			setWindowVer(windowVer() + 1);
+		}
+		if (colsWindowed()) {
+			colVirtualizer = new Virtualizer(columnVirtualizerOptions());
+			colVirtualizerCleanup = colVirtualizer._didMount();
+		}
+		if (isWindowed()) setWindowVer(windowVer() + 1);
+		if (isWindowed()) {
 			const afterFirstFrame = () => {
-				remeasureWindow();
-				if (!(gridScrollEl ? 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 = pagination();
-				const pgConfigured = pg != null && !(pg.pageIndex === 0 && pg.pageSize === 10);
-				if (local.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 (rowsWindowed()) {
+					remeasureWindow();
+					if (!(gridScrollEl ? 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 = pagination();
+					const pgConfigured = pg != null && !(pg.pageIndex === 0 && pg.pageSize === 10);
+					if (local.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 (colsWindowed()) {
+					if (!(gridScrollEl ? 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);
@@ -576,6 +754,9 @@ function DataTable(_props) {
 	});
 	onCleanup(() => {
 		if (virtualizerCleanup) virtualizerCleanup();
+		if (colVirtualizerCleanup) colVirtualizerCleanup();
+		teardownColRtlWatch();
+		teardownRemeasure();
 		teardownFillDrag();
 		teardownRangeDrag();
 	});
@@ -630,7 +811,11 @@ function DataTable(_props) {
 	let virtualizer = null;
 	let virtualizerCleanup = null;
 	let gridScrollEl = null;
+	let colVirtualizer = null;
+	let colVirtualizerCleanup = null;
 	let remeasurePending = false;
+	let remeasureRaf = null;
+	let remeasureDisposed = false;
 	const GRID_PAGE_STEP = 10;
 	let gridRoot = null;
 	let programmatic = 0;
@@ -674,20 +859,6 @@ function DataTable(_props) {
 	function currentData() {
 		return data() != null ? data() : dataDefault();
 	}
-	function isSafeKey(k) {
-		return k !== "__proto__" && k !== "constructor" && k !== "prototype";
-	}
-	function 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;
-			}
-		};
-	}
 	function buildConfigDef(c) {
 		if (!c) return null;
 		if (Array.isArray(c.columns)) {
@@ -732,10 +903,15 @@ function DataTable(_props) {
 			}
 		};
 	}
+	let columnDefsCache = null;
+	let columnDefsCacheColumnsRef = void 0;
+	let columnDefsCacheColRegRef = void 0;
 	function columnDefs() {
+		const cfg = local.columns || [];
+		const reg = colReg() || {};
+		if (columnDefsCache && local.columns === columnDefsCacheColumnsRef && colReg() === columnDefsCacheColRegRef) return columnDefsCache;
 		const byId = Object.create(null);
 		const order = [];
-		const cfg = local.columns || [];
 		for (const c of cfg) {
 			const def = buildConfigDef(c);
 			if (!def) continue;
@@ -743,7 +919,6 @@ function DataTable(_props) {
 			if (!(id in byId)) order.push(id);
 			byId[id] = def;
 		}
-		const reg = colReg() || {};
 		for (const id in reg) {
 			if (!isSafeKey(id)) continue;
 			const spec = reg[id];
@@ -771,6 +946,9 @@ function DataTable(_props) {
 		}
 		const out = [];
 		for (const id of order) if (byId[id]) out.push(byId[id]);
+		columnDefsCache = out;
+		columnDefsCacheColumnsRef = local.columns;
+		columnDefsCacheColRegRef = colReg();
 		return out;
 	}
 	const SELECT_COL_ID = "__rdt_select";
@@ -811,9 +989,6 @@ function DataTable(_props) {
 		_props.onSortChange?.(next);
 		programmatic--;
 	}
-	function applyUpdater(updater, current) {
-		return typeof updater === "function" ? updater(current) : updater;
-	}
 	function writeExpanded(next) {
 		if (programmatic) return;
 		programmatic++;
@@ -1021,12 +1196,71 @@ function DataTable(_props) {
 		const next = applyUpdater(updater, columnSizingInfo());
 		setColumnSizingInfo(next != null ? next : columnSizingInfo());
 	}
+	function resolveVirtual() {
+		const v = local.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";
+	}
+	function rowsWindowed() {
+		const s = resolveVirtual();
+		return s === "rows" || s === "both";
+	}
+	function colsWindowed() {
+		const s = resolveVirtual();
+		return s === "columns" || s === "both";
+	}
+	function isWindowed() {
+		return rowsWindowed() || colsWindowed();
+	}
+	function autoMeasureOn() {
+		return local.autoMeasure === true;
+	}
+	function columnCount() {
+		return visibleColCount();
+	}
+	function columnSize(i) {
+		if (!table || !table.getVisibleLeafColumns) return 150;
+		const c = table.getVisibleLeafColumns()[i];
+		return c && typeof c.getSize === "function" ? c.getSize() : 150;
+	}
+	function forcedColumns() {
+		if (!colsWindowed()) return [];
+		const out = [];
+		if (table && table.getVisibleLeafColumns) {
+			const cols = table.getVisibleLeafColumns();
+			for (let i = 0; i < cols.length; i++) {
+				const c = cols[i];
+				if (c && c.getIsPinned && c.getIsPinned()) out.push(i);
+			}
+		}
+		if (!activeIsHeader() && activeColIndex() >= 0 && out.indexOf(activeColIndex()) === -1) out.push(activeColIndex());
+		if (editingRow() >= 0 && editingCol() >= 0 && out.indexOf(editingCol()) === -1) out.push(editingCol());
+		return out;
+	}
+	function windowedCells(row) {
+		windowVer();
+		const cells = visibleCellsFor(row);
+		if (!colsWindowed()) return cells;
+		const idx = windowedColIndices();
+		const out = [];
+		for (let i = 0; i < idx.length; i++) {
+			const cell = cells[idx[i]];
+			if (cell) out.push(cell);
+		}
+		return out;
+	}
 	function windowSource() {
 		if (!table) return [];
-		if (local.virtual) return table.getPrePaginationRowModel().rows;
+		if (rowsWindowed()) return table.getPrePaginationRowModel().rows;
 		return table.getRowModel().rows;
 	}
 	function scheduleRemeasure() {
+		if (remeasureDisposed) return;
 		if (remeasurePending) return;
 		remeasurePending = true;
 		let ranMicro = false;
@@ -1034,6 +1268,7 @@ function DataTable(_props) {
 			remeasureWindow();
 		};
 		const rafPass = () => {
+			remeasureRaf = null;
 			remeasurePending = false;
 			remeasureWindow();
 		};
@@ -1041,9 +1276,18 @@ function DataTable(_props) {
 			ranMicro = true;
 			queueMicrotask(microPass);
 		}
-		if (typeof requestAnimationFrame === "function") requestAnimationFrame(rafPass);
+		if (typeof requestAnimationFrame === "function") remeasureRaf = requestAnimationFrame(rafPass);
 		else if (ranMicro) remeasurePending = false;
-		else setTimeout(rafPass, 0);
+		else remeasureRaf = setTimeout(rafPass, 0);
+	}
+	function teardownRemeasure() {
+		remeasureDisposed = true;
+		if (remeasureRaf != null) {
+			if (typeof requestAnimationFrame === "function") cancelAnimationFrame(remeasureRaf);
+			else clearTimeout(remeasureRaf);
+			remeasureRaf = null;
+		}
+		remeasurePending = false;
 	}
 	function pinnedEditIndex() {
 		if (editingRow() >= 0) return editingRow();
@@ -1056,20 +1300,124 @@ function DataTable(_props) {
 		return ms && ms[pin] ? ms[pin] : null;
 	}
 	function remeasureWindow() {
+		if (remeasureDisposed) return;
 		if (!virtualizer || !gridRoot) return;
 		if (virtualizer.scrollState) return;
 		const trs = gridRoot.querySelectorAll("tbody.rdt-tbody > tr[data-index]");
 		for (const tr of trs) virtualizer.measureElement(tr);
+		if (afterRowRemeasure) afterRowRemeasure();
 	}
 	function virtualItemKey(i) {
 		const src = windowSource();
 		return src && src[i] ? src[i].id : void 0;
 	}
+	const COL_OVERSCAN = 3;
+	let colRtlObserver = null;
+	let colRtlObserverEl = null;
+	function isColRtl() {
+		if (!gridScrollEl || typeof getComputedStyle !== "function") return false;
+		return getComputedStyle(gridScrollEl).direction === "rtl";
+	}
+	function ensureColRtlWatch() {
+		if (!gridScrollEl || colRtlObserverEl === gridScrollEl || typeof MutationObserver !== "function") return;
+		if (colRtlObserver) colRtlObserver.disconnect();
+		colRtlObserver = new MutationObserver(() => {
+			if (colVirtualizer) colVirtualizer.setOptions({
+				...colVirtualizer.options,
+				isRtl: isColRtl()
+			});
+		});
+		colRtlObserver.observe(gridScrollEl, {
+			attributes: true,
+			attributeFilter: ["dir"]
+		});
+		colRtlObserverEl = gridScrollEl;
+	}
+	function teardownColRtlWatch() {
+		if (colRtlObserver) colRtlObserver.disconnect();
+		colRtlObserver = null;
+		colRtlObserverEl = null;
+	}
+	function columnVirtualizerOptions() {
+		ensureColRtlWatch();
+		return {
+			count: columnCount(),
+			getScrollElement: () => gridScrollEl,
+			estimateSize: (i) => columnSize(i),
+			horizontal: true,
+			isRtl: isColRtl(),
+			observeElementRect,
+			observeElementOffset,
+			scrollToFn: elementScroll,
+			measureElement,
+			overscan: COL_OVERSCAN,
+			onChange: () => {
+				setWindowVer(windowVer() + 1);
+			}
+		};
+	}
+	let measuredRowTotal = 0;
+	let measuredRowCount = 0;
+	let lastFedRowEstimate = 0;
+	let foldedRowHeights = {};
+	let windowVerBumpPending = false;
+	function bumpWindowVer() {
+		if (windowVerBumpPending) return;
+		windowVerBumpPending = true;
+		const flush = () => {
+			windowVerBumpPending = false;
+			setWindowVer(windowVer() + 1);
+		};
+		if (typeof queueMicrotask !== "undefined") queueMicrotask(flush);
+		else setTimeout(flush, 0);
+	}
+	const ESTIMATE_REFEED_DELTA_PX = 4;
+	function estimateRowSize(i) {
+		if (!autoMeasureOn()) return local.estimateRowHeight;
+		if (measuredRowCount === 0) return local.estimateRowHeight;
+		return Math.round(measuredRowTotal / measuredRowCount);
+	}
+	function foldMeasuredRow(index, height) {
+		const prev = foldedRowHeights[index];
+		if (prev === height) return;
+		if (prev == null) {
+			measuredRowTotal = measuredRowTotal + height;
+			measuredRowCount = measuredRowCount + 1;
+		} else measuredRowTotal = measuredRowTotal - prev + height;
+		foldedRowHeights[index] = height;
+	}
+	function refineRowEstimate() {
+		if (!autoMeasureOn() || !virtualizer) return;
+		const items = virtualizer.getVirtualItems();
+		const measurements = virtualizer.getMeasurements();
+		for (let i = 0; i < items.length; i++) {
+			const idx = items[i].index;
+			const m = measurements && measurements[idx];
+			if (m) foldMeasuredRow(idx, m.size);
+		}
+		if (virtualizer.scrollState) return;
+		const est = estimateRowSize(0);
+		if (Math.abs(est - lastFedRowEstimate) < ESTIMATE_REFEED_DELTA_PX) return;
+		const anchorIndex = items.length ? items[0].index : -1;
+		const anchorStart = items.length ? items[0].start : 0;
+		virtualizer.setOptions(virtualizerOptions());
+		virtualizer._willUpdate();
+		lastFedRowEstimate = est;
+		if (anchorIndex >= 0 && gridScrollEl) {
+			const freshMeasurements = virtualizer.getMeasurements();
+			const fresh = freshMeasurements && freshMeasurements[anchorIndex];
+			if (fresh) {
+				const delta = fresh.start - anchorStart;
+				if (delta !== 0) gridScrollEl.scrollTop = gridScrollEl.scrollTop + delta;
+			}
+		}
+		bumpWindowVer();
+	}
 	function virtualizerOptions() {
 		return {
 			count: windowSource().length,
 			getScrollElement: () => gridScrollEl,
-			estimateSize: () => local.estimateRowHeight,
+			estimateSize: (i) => estimateRowSize(i),
 			observeElementRect,
 			observeElementOffset,
 			scrollToFn: elementScroll,
@@ -1077,7 +1425,7 @@ function DataTable(_props) {
 			overscan: 8,
 			getItemKey: virtualItemKey,
 			onChange: () => {
-				setWindowVer(windowVer() + 1);
+				bumpWindowVer();
 				scheduleRemeasure();
 			}
 		};
@@ -1089,8 +1437,8 @@ function DataTable(_props) {
 		windowVer();
 		editVer();
 		if (!virtualizer) {
-			if (!local.virtual) return (rows() || []).map((r) => ({
-				vi: null,
+			if (!rowsWindowed()) return (rows() || []).map((r, i) => ({
+				vi: { index: i },
 				row: r
 			}));
 			return [];
@@ -1126,7 +1474,7 @@ function DataTable(_props) {
 	function padTop() {
 		windowVer();
 		editVer();
-		if (!local.virtual || !virtualizer) return 0;
+		if (!rowsWindowed() || !virtualizer) return 0;
 		const items = virtualizer.getVirtualItems();
 		let pad = items.length ? items[0].start : 0;
 		const pin = pinnedEditIndex();
@@ -1140,7 +1488,7 @@ function DataTable(_props) {
 	function padBottom() {
 		windowVer();
 		editVer();
-		if (!local.virtual || !virtualizer) return 0;
+		if (!rowsWindowed() || !virtualizer) return 0;
 		const items = virtualizer.getVirtualItems();
 		if (!items.length) return 0;
 		let pad = virtualizer.getTotalSize() - items[items.length - 1].end;
@@ -1161,11 +1509,59 @@ function DataTable(_props) {
 		return false;
 	}
 	function rowIsOutsideWindow(r) {
-		if (!local.virtual || !virtualizer) return false;
+		if (!rowsWindowed() || !virtualizer) return false;
 		const items = virtualizer.getVirtualItems();
 		for (const it of items) if (it.index === r) return false;
 		return true;
 	}
+	function windowedColIndices() {
+		windowVer();
+		editVer();
+		if (!colsWindowed()) {
+			const n = columnCount();
+			const out = [];
+			for (let i = 0; i < n; i++) out.push(i);
+			return out;
+		}
+		if (!colVirtualizer) return [];
+		const idx = colVirtualizer.getVirtualItems().map((it) => it.index);
+		const forced = 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;
+	}
+	function colPadLeft() {
+		windowVer();
+		editVer();
+		if (!colsWindowed() || !colVirtualizer) return 0;
+		const items = colVirtualizer.getVirtualItems();
+		let pad = items.length ? items[0].start : 0;
+		if (items.length) {
+			const firstIdx = items[0].index;
+			const forced = forcedColumns();
+			for (let i = 0; i < forced.length; i++) if (forced[i] < firstIdx) pad = pad - columnSize(forced[i]);
+		}
+		return pad < 0 ? 0 : pad;
+	}
+	function colPadRight() {
+		windowVer();
+		editVer();
+		if (!colsWindowed() || !colVirtualizer) return 0;
+		const items = colVirtualizer.getVirtualItems();
+		if (!items.length) return 0;
+		let pad = colVirtualizer.getTotalSize() - items[items.length - 1].end;
+		const lastIdx = items[items.length - 1].index;
+		const forced = forcedColumns();
+		for (let i = 0; i < forced.length; i++) if (forced[i] > lastIdx) pad = pad - columnSize(forced[i]);
+		return pad < 0 ? 0 : pad;
+	}
+	function colIsOutsideWindow(c) {
+		if (!colsWindowed() || !colVirtualizer) return false;
+		const items = colVirtualizer.getVirtualItems();
+		for (const it of items) if (it.index === c) return false;
+		return true;
+	}
+	let afterRowRemeasure = refineRowEstimate;
 	const announceState = {
 		sorting: null,
 		columnFilters: null,
@@ -1582,7 +1978,7 @@ function DataTable(_props) {
 	}
 	function getRowIndexRelativeToPage(absRow) {
 		const abs = absRow == null ? toAbsRow(activeRow()) : Math.trunc(Number(absRow)) || 0;
-		if (local.virtual) return abs;
+		if (rowsWindowed()) return abs;
 		return abs - pageRowOffset();
 	}
 	function cut() {
@@ -1607,14 +2003,14 @@ function DataTable(_props) {
 		return (hg && hg.headers ? hg.headers : []).indexOf(header);
 	}
 	function pageRowOffset() {
-		if (!isGrid() || local.virtual) return 0;
+		if (!isGrid() || rowsWindowed()) return 0;
 		return pageIndex() * pageSize();
 	}
 	function toAbsRow(localRow) {
 		return localRow + pageRowOffset();
 	}
 	function prePaginationRowCount() {
-		if (!table || local.virtual) return bodyRowCount();
+		if (!table || rowsWindowed()) return bodyRowCount();
 		const pm = table.getPrePaginationRowModel();
 		return pm && pm.rows ? pm.rows.length : bodyRowCount();
 	}
@@ -1649,8 +2045,11 @@ function DataTable(_props) {
 		const c = nextCol == null ? activeColIndex() : nextCol;
 		const lvl = nextLevel == null ? activeHeaderLevel() : nextLevel;
 		const header = nextIsHeader == null ? activeIsHeader() : nextIsHeader;
-		if (local.virtual && virtualizer && !header && rowIsOutsideWindow(r)) {
-			virtualizer.scrollToIndex(r, { align: "center" });
+		const rowOut = rowsWindowed() && virtualizer && rowIsOutsideWindow(r);
+		const colOut = colsWindowed() && colVirtualizer && colIsOutsideWindow(c);
+		if (!header && (rowOut || colOut)) {
+			if (rowOut) virtualizer.scrollToIndex(r, { align: "center" });
+			if (colOut) colVirtualizer.scrollToIndex(c, { align: "center" });
 			let focusAttempts = 0;
 			const myEpoch = focusIntentEpoch;
 			const focusWhenReady = () => {
@@ -1698,9 +2097,6 @@ function DataTable(_props) {
 	function bodyRowCount() {
 		return (rows() || []).length;
 	}
-	function clamp(v, lo, hi) {
-		return v < lo ? lo : v > hi ? hi : v;
-	}
 	function headerLeafLevel() {
 		const hg = headerGroups() || [];
 		return hg.length ? hg.length - 1 : 0;
@@ -1863,10 +2259,6 @@ function DataTable(_props) {
 	function currentCellEl() {
 		return resolveCellEl(activeIsHeader() ? "__header" : String(activeRow()), activeColIndex(), activeIsHeader() ? activeHeaderLevel() : null);
 	}
-	function 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);
-	}
 	function enterControl() {
 		const list = focusables(currentCellEl());
 		if (!list.length) return;
@@ -2269,6 +2661,40 @@ function DataTable(_props) {
 			recoverGridFocus(String(recRow), recCol, null);
 		}
 	}
+	function windowedHeadersFor(hg, hgLevel) {
+		const headers = hg && hg.headers || [];
+		if (!colsWindowed()) return headers.map((h) => ({
+			header: h,
+			span: h && h.colSpan > 1 ? h.colSpan : 1
+		}));
+		const idx = 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;
+	}
+	function windowedColSpan() {
+		return colsWindowed() ? windowedColIndices().length + 2 : visibleColCount();
+	}
+	function remeasureColumnWindow() {
+		if (!colsWindowed() || !colVirtualizer) return;
+		colVirtualizer.setOptions(columnVirtualizerOptions());
+		colVirtualizer._willUpdate();
+	}
 	let gridEmptyFallback = false;
 	let rangeTransition = false;
 	let rangeClickPending = false;
@@ -2451,10 +2877,6 @@ function DataTable(_props) {
 			c1: ac > fc ? ac : fc
 		};
 	}
-	function escapeTsvField(s) {
-		if (s.indexOf("	") >= 0 || s.indexOf("\n") >= 0 || s.indexOf("\r") >= 0 || s.indexOf("\"") >= 0) return "\"" + s.replace(/"/g, "\"\"") + "\"";
-		return s;
-	}
 	function rangeToTsv() {
 		const box = normalizedRange();
 		const r0 = box ? box.r0 : activeRow();
@@ -2472,71 +2894,6 @@ function DataTable(_props) {
 		}
 		return lines.join("\n");
 	}
-	function 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;
-	}
 	function copyRange() {
 		if (!clipboardActiveAllowed()) return;
 		if (typeof navigator === "undefined" || !navigator.clipboard || !navigator.clipboard.writeText) return;
@@ -2603,30 +2960,6 @@ function DataTable(_props) {
 		const row = (rows() || [])[rowIndex];
 		return row ? row.id : null;
 	}
-	function 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;
-	}
 	function pasteRange() {
 		if (!clipboardActiveAllowed()) return;
 		if (typeof navigator === "undefined" || !navigator.clipboard || !navigator.clipboard.readText) return;
@@ -2686,13 +3019,6 @@ function DataTable(_props) {
 		}
 		applyGridToRange(grid, r0, c0);
 	}
-	function 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;
-	}
 	function fillRange(sourceBox, endCell) {
 		let box;
 		if (sourceBox && sourceBox.r0 != null && endCell) {
@@ -2732,6 +3058,30 @@ function DataTable(_props) {
 	let fillDragging = false;
 	let fillDragMove = null;
 	let fillDragUp = null;
+	let fillEdgeScrollRaf = null;
+	const FILL_EDGE_SCROLL_PX = 24;
+	const FILL_EDGE_SCROLL_STEP = 16;
+	function edgeDelta(clientX, clientY) {
+		if (!gridScrollEl) return {
+			dx: 0,
+			dy: 0
+		};
+		const rect = gridScrollEl.getBoundingClientRect();
+		let dx = 0;
+		let dy = 0;
+		if (colsWindowed()) {
+			if (clientX - rect.left < FILL_EDGE_SCROLL_PX) dx = -FILL_EDGE_SCROLL_STEP;
+			else if (rect.right - clientX < FILL_EDGE_SCROLL_PX) dx = FILL_EDGE_SCROLL_STEP;
+		}
+		if (rowsWindowed()) {
+			if (clientY - rect.top < FILL_EDGE_SCROLL_PX) dy = -FILL_EDGE_SCROLL_STEP;
+			else if (rect.bottom - clientY < FILL_EDGE_SCROLL_PX) dy = FILL_EDGE_SCROLL_STEP;
+		}
+		return {
+			dx,
+			dy
+		};
+	}
 	function teardownFillDrag() {
 		if (typeof document !== "undefined") {
 			if (fillDragMove) document.removeEventListener("pointermove", fillDragMove);
@@ -2740,6 +3090,10 @@ function DataTable(_props) {
 		fillDragMove = null;
 		fillDragUp = null;
 		fillDragging = false;
+		if (fillEdgeScrollRaf != null) {
+			if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(fillEdgeScrollRaf);
+			fillEdgeScrollRaf = null;
+		}
 	}
 	function cellIndexFromPoint(clientX, clientY) {
 		if (typeof document === "undefined" || !document.elementFromPoint) return null;
@@ -2774,14 +3128,42 @@ function DataTable(_props) {
 			r: sourceBox.r1,
 			c: sourceBox.c1
 		} : null;
-		const move = (ev) => {
-			if (!fillDragging) return;
-			const cell = cellIndexFromPoint(ev.clientX, ev.clientY);
+		let lastClientX = 0;
+		let lastClientY = 0;
+		const applyPointAt = (clientX, clientY) => {
+			const cell = cellIndexFromPoint(clientX, clientY);
 			if (cell && (!lastCell || cell.r !== lastCell.r || cell.c !== lastCell.c)) {
 				lastCell = cell;
 				setRangeFocus$local(cell.r, cell.c);
 			}
 		};
+		const scrollStep = () => {
+			if (!fillDragging) {
+				fillEdgeScrollRaf = null;
+				return;
+			}
+			const d = edgeDelta(lastClientX, lastClientY);
+			if (d.dx === 0 && d.dy === 0) {
+				fillEdgeScrollRaf = null;
+				return;
+			}
+			if (gridScrollEl) {
+				if (d.dx !== 0) gridScrollEl.scrollLeft = gridScrollEl.scrollLeft + d.dx;
+				if (d.dy !== 0) gridScrollEl.scrollTop = gridScrollEl.scrollTop + d.dy;
+			}
+			applyPointAt(lastClientX, lastClientY);
+			fillEdgeScrollRaf = requestAnimationFrame(scrollStep);
+		};
+		const move = (ev) => {
+			if (!fillDragging) return;
+			lastClientX = ev.clientX;
+			lastClientY = ev.clientY;
+			applyPointAt(ev.clientX, ev.clientY);
+			if (fillEdgeScrollRaf == null && typeof requestAnimationFrame === "function") {
+				const d = edgeDelta(ev.clientX, ev.clientY);
+				if (d.dx !== 0 || d.dy !== 0) fillEdgeScrollRaf = requestAnimationFrame(scrollStep);
+			}
+		};
 		const up = () => {
 			teardownFillDrag();
 			if (lastCell && sourceBox && (lastCell.r !== sourceBox.r1 || lastCell.c !== sourceBox.c1)) fillRange(sourceBox, lastCell);
@@ -2872,16 +3254,6 @@ function DataTable(_props) {
 	function setInvalid(msg) {
 		setInvalidMsg(msg != null ? msg : "");
 	}
-	function 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;
-	}
 	function sourceIndexOfRow(visibleRowIndex) {
 		const row = (rows() || [])[visibleRowIndex];
 		if (!row) return visibleRowIndex;
@@ -2988,16 +3360,6 @@ function DataTable(_props) {
 		if (typeof requestAnimationFrame === "function") requestAnimationFrame(tryFocus);
 		else setTimeout(tryFocus, 0);
 	}
-	function 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;
-	}
 	function endEdit() {
 		setEditingRow(-1);
 		setEditingCol(-1);
@@ -3252,17 +3614,6 @@ function DataTable(_props) {
 		editTransition = false;
 		focusCellWhenReady(focusRow, focusCol);
 	}
-	function 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;
-	}
 	function nextEditableCell(fromRow, fromCol) {
 		const rowList = rows() || [];
 		const rowCount = rowList.length;
@@ -3513,8 +3864,9 @@ function DataTable(_props) {
 		const absLast = prePaginationRowCount() - 1;
 		const absRow = clamp(Math.trunc(Number(rowIndex)) || 0, 0, absLast < 0 ? 0 : absLast);
 		const prevAbs = toAbsRow(activeRow());
+		const prevCol = activeColIndex();
 		const prevIsHeader = activeIsHeader();
-		if (local.virtual) {
+		if (rowsWindowed()) {
 			setActiveIsHeader(false);
 			setActiveInControl(false);
 			setActiveRow(absRow);
@@ -3533,7 +3885,7 @@ function DataTable(_props) {
 			if (switched) focusAbsCellWhenReady(absRow, localRow, c);
 			else focusActiveCell(localRow, c, false);
 		}
-		if (absRow !== prevAbs || prevIsHeader) _props.onActivecellChange?.({
+		if (absRow !== prevAbs || c !== prevCol || prevIsHeader) _props.onActivecellChange?.({
 			rowIndex: absRow,
 			colIndex: c
 		});
@@ -3649,7 +4001,7 @@ function DataTable(_props) {
 		applyGrouping,
 		clearGrouping
 	}) ?? <Key each={groupingKeys()} by={(gk) => gk}>{(gk) => <span class={"rdt-group-token"} data-group-token="" data-rozie-s-d5dcab4c="">{rozieDisplay(gk())}</span>}</Key>}
-    </div></Show>}{<Show when={local.virtual} fallback={<table aria-rowcount={rozieAttr(gridAriaRowCount())} class={"rozie-data-table " + rozieClass({ "rdt-sticky": local.stickyHeader })} role={rozieAttr(tableRole())} onKeyDown={($event) => {
+    </div></Show>}{<Show when={isWindowed()} fallback={<table aria-rowcount={rozieAttr(gridAriaRowCount())} class={"rozie-data-table " + rozieClass({ "rdt-sticky": local.stickyHeader })} role={rozieAttr(tableRole())} onKeyDown={($event) => {
 		onGridKeyDown($event);
 	}} onFocusIn={($event) => {
 		syncActiveFromEvent($event);
@@ -3836,8 +4188,11 @@ function DataTable(_props) {
           </td>
         </tr></Show>}</>}</Key>
       </tbody>
-    </table>}><div class={"rdt-scroll"} style={parseInlineStyle(local.maxHeight ? "max-height:" + local.maxHeight + ";overflow:auto;--rozie-data-table-max-height:" + local.maxHeight : "overflow:auto")} data-rozie-s-d5dcab4c="">
-    <table aria-rowcount={rozieAttr(gridAriaRowCount())} class={"rozie-data-table " + rozieClass({ "rdt-sticky": local.stickyHeader })} role={rozieAttr(tableRole())} onKeyDown={($event) => {
+    </table>}><div class={"rdt-scroll"} style={parseInlineStyle(rowsWindowed() && local.maxHeight ? "max-height:" + local.maxHeight + ";overflow:auto;--rozie-data-table-max-height:" + local.maxHeight : "overflow:auto")} data-rozie-s-d5dcab4c="">
+    <table aria-rowcount={rozieAttr(gridAriaRowCount())} class={"rozie-data-table " + rozieClass({
+		"rdt-sticky": local.stickyHeader,
+		"rdt-col-windowed": colsWindowed()
+	})} role={rozieAttr(tableRole())} onKeyDown={($event) => {
 		onGridKeyDown($event);
 	}} onFocusIn={($event) => {
 		syncActiveFromEvent($event);
@@ -3852,53 +4207,54 @@ function DataTable(_props) {
 	}} data-rozie-s-d5dcab4c="">
       <thead class={"rdt-thead"} role="rowgroup" data-rozie-s-d5dcab4c="">
         <Key each={headerGroups()} by={(hg) => hg.id}>{(hg, hgLevel) => <tr class={"rdt-tr"} role="row" aria-rowindex={rozieAttr(hgLevel() + 1)} data-rozie-s-d5dcab4c="">
-          <Key each={hg().headers} by={(header) => header.id}>{(header) => <th class={"rdt-th " + rozieClass({
-		"rdt-select-th": isSelectColumn(header().column.id),
-		"rdt-expander-th": isExpanderColumn(header().column.id),
-		"rdt-th-resizing": columnIsResizing(header().column.id),
-		"rdt-cell-active": isActiveCell("__header", headerColIndexOf(hg(), header()), hgLevel())
-	})} 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(headerColIndexOf(hg(), header()))} tabIndex={rozieAttr(cellTabindex("__header", headerColIndexOf(hg(), header()), hgLevel()))} aria-sort={rozieAttr(ariaSortFor(header().column.id))} style={parseInlineStyle(thStyle(header().column.id))} data-rozie-s-d5dcab4c="">
-            {<Show when={isSelectColumn(header().column.id)} fallback={<Show when={isExpanderColumn(header().column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {<Show when={header().column.getCanSort && header().column.getCanSort()} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
+          
+          {<Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle("width:" + colPadLeft() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" /></Show>}<Key each={windowedHeadersFor(hg(), hgLevel())} by={(wh) => wh.header.id}>{(wh) => <th class={"rdt-th " + rozieClass({
+		"rdt-select-th": isSelectColumn(wh().header.column.id),
+		"rdt-expander-th": isExpanderColumn(wh().header.column.id),
+		"rdt-th-resizing": columnIsResizing(wh().header.column.id),
+		"rdt-cell-active": isActiveCell("__header", headerColIndexOf(hg(), wh().header), hgLevel())
+	})} 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(headerColIndexOf(hg(), wh().header))} tabIndex={rozieAttr(cellTabindex("__header", headerColIndexOf(hg(), wh().header), hgLevel()))} aria-sort={rozieAttr(ariaSortFor(wh().header.column.id))} style={parseInlineStyle(thStyle(wh().header.column.id))} data-rozie-s-d5dcab4c="">
+            {<Show when={isSelectColumn(wh().header.column.id)} fallback={<Show when={isExpanderColumn(wh().header.column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
+              {<Show when={wh().header.column.getCanSort && wh().header.column.getCanSort()} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
                 <span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
                   {(_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
-		columnId: header().column.id,
-		column: header().column,
-		label: headerLabel(header().column.id)
-	}) ?? rozieDisplay(headerLabel(header().column.id))}
+		columnId: wh().header.column.id,
+		column: wh().header.column,
+		label: headerLabel(wh().header.column.id)
+	}) ?? rozieDisplay(headerLabel(wh().header.column.id))}
                 </span>
               </span>}><button type="button" class={"rdt-sort-btn"} onClick={($event) => {
-		onHeaderSort(header().column.id, $event);
+		onHeaderSort(wh().header.column.id, $event);
 	}} data-rozie-s-d5dcab4c="">
                 <span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
                   {(_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
-		columnId: header().column.id,
-		column: header().column,
-		label: headerLabel(header().column.id)
-	}) ?? rozieDisplay(headerLabel(header().column.id))}
+		columnId: wh().header.column.id,
+		column: wh().header.column,
+		label: headerLabel(wh().header.column.id)
+	}) ?? rozieDisplay(headerLabel(wh().header.column.id))}
                 </span>
-                <span class={"rdt-sort-ind"} aria-hidden="true" data-rozie-s-d5dcab4c="">{rozieDisplay(sortIndicator(header().column.id))}</span>
+                <span class={"rdt-sort-ind"} aria-hidden="true" data-rozie-s-d5dcab4c="">{rozieDisplay(sortIndicator(wh().header.column.id))}</span>
               </button></Show>}<Popover trigger="click" placement="bottom-end" strategy="fixed" offset={4} data-rozie-s-d5dcab4c="" anchorSlot={() => <>
-                  <button type="button" class={"rdt-col-menu-trigger"} aria-label={rozieAttr("Column options for " + headerLabel(header().column.id))} data-rozie-s-d5dcab4c="">⋯</button>
+                  <button type="button" class={"rdt-col-menu-trigger"} aria-label={rozieAttr("Column options for " + headerLabel(wh().header.column.id))} data-rozie-s-d5dcab4c="">⋯</button>
                 </>}><div class={"rdt-col-menu"} role="menu" data-rozie-s-d5dcab4c="">
-                  <button type="button" role="menuitem" aria-pressed={columnPinSide(header().column.id) === "left"} class={"rdt-col-menu-item"} onClick={($event) => {
-		onPinColumn(header().column.id, "left", $event);
+                  <button type="button" role="menuitem" aria-pressed={columnPinSide(wh().header.column.id) === "left"} class={"rdt-col-menu-item"} onClick={($event) => {
+		onPinColumn(wh().header.column.id, "left", $event);
 	}} data-rozie-s-d5dcab4c="">Pin left</button>
-                  <button type="button" role="menuitem" aria-pressed={columnPinSide(header().column.id) === "right"} class={"rdt-col-menu-item"} onClick={($event) => {
-		onPinColumn(header().column.id, "right", $event);
+                  <button type="button" role="menuitem" aria-pressed={columnPinSide(wh().header.column.id) === "right"} class={"rdt-col-menu-item"} onClick={($event) => {
+		onPinColumn(wh().header.column.id, "right", $event);
 	}} data-rozie-s-d5dcab4c="">Pin right</button>
-                  <button type="button" role="menuitem" aria-pressed={!columnPinSide(header().column.id)} class={"rdt-col-menu-item"} onClick={($event) => {
-		onPinColumn(header().column.id, false, $event);
+                  <button type="button" role="menuitem" aria-pressed={!columnPinSide(wh().header.column.id)} class={"rdt-col-menu-item"} onClick={($event) => {
+		onPinColumn(wh().header.column.id, false, $event);
 	}} data-rozie-s-d5dcab4c="">Unpin</button>
                   <hr class={"rdt-col-menu-sep"} data-rozie-s-d5dcab4c="" />
                   <button type="button" role="menuitem" class={"rdt-col-menu-item"} onClick={($event) => {
-		onHideColumn(header().column.id, $event);
+		onHideColumn(wh().header.column.id, $event);
 	}} data-rozie-s-d5dcab4c="">Hide column</button>
                 </div></Popover>
-              <button type="button" aria-label={rozieAttr("Resize " + headerLabel(header().column.id))} class={"rdt-resize-handle"} onPointerDown={($event) => {
-		onResizeStart(header().column.id, $event);
+              <button type="button" aria-label={rozieAttr("Resize " + headerLabel(wh().header.column.id))} class={"rdt-resize-handle"} onPointerDown={($event) => {
+		onResizeStart(wh().header.column.id, $event);
 	}} onTouchStart={($event) => {
-		onResizeStart(header().column.id, $event);
+		onResizeStart(wh().header.column.id, $event);
 	}} data-rozie-s-d5dcab4c=""><span class={"rdt-resize-grip"} aria-hidden="true" data-rozie-s-d5dcab4c="" /></button>
             </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {(_props.selectAllSlot ?? _props.slots?.["selectAll"])?.({
@@ -3909,30 +4265,31 @@ function DataTable(_props) {
 		onToggleAllRows($event);
 	}} data-rozie-s-d5dcab4c="" /></Show>}
             </span></Show>}</th>}</Key>
-        </tr>}</Key>
+          
+          {<Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle("width:" + colPadRight() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" /></Show>}</tr>}</Key>
         
         {<Show when={hasAnyFilterableColumn()}><tr class={"rdt-filter-row"} data-rozie-s-d5dcab4c="">
-          <Key each={headerGroups()[headerGroups().length - 1].headers} by={(header) => header.id}>{(header) => <th class={"rdt-filter-cell"} role="presentation" style={parseInlineStyle(pinStyle(header().column.id))} data-rozie-s-d5dcab4c="">
-            {<Show when={isSelectColumn(header().column.id)} fallback={<Show when={isExpanderColumn(header().column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {<Show when={columnIsFilterable(header().column.id) && !hasFilterSlot()}><input type="text" aria-label={rozieAttr("Filter " + headerLabel(header().column.id))} class={"rdt-col-filter"} value={columnFilterValue(header().column.id)} onInput={($event) => {
-		onColumnFilterInput(header().column.id, $event);
+          {<Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle("width:" + colPadLeft() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" /></Show>}<Key each={windowedHeadersFor(headerGroups()[headerGroups().length - 1], headerGroups().length - 1)} by={(wh) => wh.header.id}>{(wh) => <th class={"rdt-filter-cell"} role="presentation" data-col={rozieAttr(wh().header.column.id)} style={parseInlineStyle(pinStyle(wh().header.column.id))} data-rozie-s-d5dcab4c="">
+            {<Show when={isSelectColumn(wh().header.column.id)} fallback={<Show when={isExpanderColumn(wh().header.column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
+              {<Show when={columnIsFilterable(wh().header.column.id) && !hasFilterSlot()}><input type="text" aria-label={rozieAttr("Filter " + headerLabel(wh().header.column.id))} class={"rdt-col-filter"} value={columnFilterValue(wh().header.column.id)} onInput={($event) => {
+		onColumnFilterInput(wh().header.column.id, $event);
 	}} onClick={($event) => {
 		stopEvent($event);
-	}} data-rozie-s-d5dcab4c="" /></Show>}{<Show when={columnIsFilterable(header().column.id)}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
+	}} data-rozie-s-d5dcab4c="" /></Show>}{<Show when={columnIsFilterable(wh().header.column.id)}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
                 {(_props.filterSlot ?? _props.slots?.["filter"])?.({
-		columnId: header().column.id,
-		value: columnFilterValue(header().column.id),
-		uniqueValues: getFacetedUniqueValues$1(header().column.id),
-		minMax: getFacetedMinMaxValues$1(header().column.id),
+		columnId: wh().header.column.id,
+		value: columnFilterValue(wh().header.column.id),
+		uniqueValues: getFacetedUniqueValues$1(wh().header.column.id),
+		minMax: getFacetedMinMaxValues$1(wh().header.column.id),
 		setFilter: setColumnFilter
 	})}
               </span></Show>}</span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}</th>}</Key>
-        </tr></Show>}</thead>
+          {<Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle("width:" + colPadRight() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" /></Show>}</tr></Show>}</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(visibleColCount())} style={parseInlineStyle("height:" + padTop() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" />
+          <td colSpan={rozieAttr(windowedColSpan())} style={parseInlineStyle("height:" + padTop() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" />
         </tr>
         
         <Key each={windowedRows()} by={(wr) => wr.row.id}>{(wr) => <>
@@ -3940,7 +4297,8 @@ function DataTable(_props) {
 		"rdt-group-header": rowIsGrouped(wr().row),
 		"rdt-row-pinned": wr().pinned
 	})} role="row" data-row={rozieAttr(wr().vi.index)} aria-rowindex={rozieAttr(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(rowIsGrouped(wr().row) ? wr().row.id : null)} data-group-leaf={rozieAttr(groupingActive() && !rowIsGrouped(wr().row) ? wr().row.id : null)} aria-expanded={(rowIsGrouped(wr().row) ? !!rowIsExpanded(wr().row) : null) ?? void 0} aria-selected={(local.selectionMode !== "none" ? !!rowIsSelected(wr().row) : null) ?? void 0} aria-level={rozieAttr(groupingActive() ? wr().row.depth + 1 : null)} data-rozie-s-d5dcab4c="">
-          <Key each={visibleCellsFor(wr().row)} by={(cell) => cell.id}>{(cell) => <td class={"rdt-td " + rozieClass({
+          
+          {<Show when={colsWindowed()}><td class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle("width:" + colPadLeft() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" /></Show>}<Key each={windowedCells(wr().row)} by={(cell) => cell.id}>{(cell) => <td class={"rdt-td " + rozieClass({
 		"rdt-select-td": isSelectColumn(cell().column.id),
 		"rdt-expander-td": isExpanderColumn(cell().column.id),
 		"rdt-in-range": inRange(wr().vi.index, colIndexOf(wr().row, cell())),
@@ -4018,20 +4376,21 @@ function DataTable(_props) {
 	}} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(wr().row) ? "▾" : "▸")}</button></Show>}</span></Show>}{<Show when={isFillHandleCell(wr().vi.index, colIndexOf(wr().row, cell()))}><span data-fill-handle="" data-testid="fill-handle" aria-hidden="true" class={"rdt-fill-handle"} onPointerDown={($event) => {
 		onFillHandlePointerDown($event);
 	}} data-rozie-s-d5dcab4c="" /></Show>}</td>}</Key>
-        </tr>
+          
+          {<Show when={colsWindowed()}><td class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle("width:" + colPadRight() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" /></Show>}</tr>
         
         {<Show when={rowShowsDetail(wr().row)}><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(visibleColCount())} data-rozie-s-d5dcab4c="">
+          <td class={"rdt-detail-cell"} colSpan={rozieAttr(windowedColSpan())} data-rozie-s-d5dcab4c="">
             {(_props.detailSlot ?? _props.slots?.["detail"])?.({ row: wr().row.original })}
           </td>
         </tr></Show>}</>}</Key>
         
         <tr class={"rdt-spacer"} aria-hidden="true" data-rozie-s-d5dcab4c="">
-          <td colSpan={rozieAttr(visibleColCount())} style={parseInlineStyle("height:" + padBottom() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" />
+          <td colSpan={rozieAttr(windowedColSpan())} style={parseInlineStyle("height:" + padBottom() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" />
         </tr>
       </tbody>
     </table>
-    </div></Show>}{<Show when={!local.virtual}><div class={"rdt-pagination"} role="group" aria-label="Pagination" data-rozie-s-d5dcab4c="">
+    </div></Show>}{<Show when={!rowsWindowed()}><div class={"rdt-pagination"} role="group" aria-label="Pagination" data-rozie-s-d5dcab4c="">
       <button type="button" class={"rdt-page-btn rdt-page-prev"} disabled={!canPrevPage()} onClick={($event) => {
 		onPrevPage();
 	}} data-rozie-s-d5dcab4c="">Prev</button>