@rozie-ui/data-table-solid 0.7.3 → 0.8.0

package/dist/source/index.jsx

@@ -1,6 +1,6 @@
 import { Show, createEffect, createSignal, mergeProps, on, onCleanup, onMount, splitProps, untrack, useContext } from "solid-js";
 import { Key } from "@solid-primitives/keyed";
-import { __rozieInjectStyle, createControllableSignal, parseInlineStyle, rozieAttr, rozieClass, rozieContext, rozieDisplay } from "@rozie/runtime-solid";
+import { __rozieInjectStyle, createControllableSignal, parseInlineStyle, rozieAttr, rozieClass, rozieContext, rozieDisplay, rozieSelectValue } from "@rozie/runtime-solid";
 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";
@@ -93,6 +93,74 @@ const columnSpecsEquivalent = (a, b, depth) => {
 	return true;
 };
 //#endregion
+//#region src/helpers/columnRuleUtils.ts
+const FILTER_FN_NAMES = [
+	"includesString",
+	"includesStringSensitive",
+	"equalsString",
+	"arrIncludes",
+	"arrIncludesAll",
+	"arrIncludesSome",
+	"equals",
+	"weakEquals",
+	"inNumberRange"
+];
+const SORTING_FN_NAMES = [
+	"alphanumeric",
+	"alphanumericCaseSensitive",
+	"text",
+	"textCaseSensitive",
+	"datetime",
+	"basic"
+];
+const warned = /* @__PURE__ */ new Set();
+const resolveName = (value, names, kind, columnId, warn) => {
+	if (value === "auto" || names.includes(value)) return value;
+	const key = kind + "\0" + columnId + "\0" + value;
+	if (!warned.has(key)) {
+		warned.add(key);
+		warn(`[data-table] column "${columnId}": unknown ${kind} "${value}"; falling back to "auto".`);
+	}
+	return "auto";
+};
+const resolveFilterFn = (value, columnId, warn = console.warn) => {
+	if (value == null) return void 0;
+	if (typeof value === "string") return resolveName(value, FILTER_FN_NAMES, "filterFn", columnId, warn);
+	if (typeof value !== "function") return void 0;
+	const fn = value;
+	const adapter = (row, colId, filterValue) => {
+		try {
+			return fn(row.getValue(colId), filterValue, row.original);
+		} catch (err) {
+			return true;
+		}
+	};
+	if (fn.autoRemove !== void 0) adapter.autoRemove = fn.autoRemove;
+	if (fn.resolveFilterValue !== void 0) adapter.resolveFilterValue = fn.resolveFilterValue;
+	return adapter;
+};
+const resolveSortingFn = (value, columnId, warn = console.warn) => {
+	if (value == null) return void 0;
+	if (typeof value === "string") return resolveName(value, SORTING_FN_NAMES, "sortingFn", columnId, warn);
+	if (typeof value !== "function") return void 0;
+	const fn = value;
+	return (rowA, rowB, colId) => {
+		try {
+			return fn(rowA.getValue(colId), rowB.getValue(colId), rowA.original, rowB.original);
+		} catch (err) {
+			return 0;
+		}
+	};
+};
+const columnRuleKeys = (spec, columnId, warn) => {
+	const out = {};
+	const f = resolveFilterFn(spec?.filterFn, columnId, warn);
+	if (f !== void 0) out.filterFn = f;
+	const s = resolveSortingFn(spec?.sortingFn, columnId, warn);
+	if (s !== void 0) out.sortingFn = s;
+	return out;
+};
+//#endregion
 //#region src/helpers/indexMath.ts
 const clamp = (v, lo, hi) => v < lo ? lo : v > hi ? hi : v;
 const focusables = (cellEl) => {
@@ -101,6 +169,24 @@ const focusables = (cellEl) => {
 };
 const applyUpdater = (updater, current) => typeof updater === "function" ? updater(current) : updater;
 //#endregion
+//#region src/helpers/activeFollow.ts
+function resolveFollow(prevIds, activeRow, nextIds, viewChangeOrWrite) {
+	if (!prevIds || !Number.isInteger(activeRow) || activeRow < 0 || activeRow >= prevIds.length) return { kind: "clamp" };
+	const id = prevIds[activeRow];
+	if (nextIds[activeRow] === id) return { kind: "stay" };
+	const index = nextIds.indexOf(id);
+	if (index >= 0) return {
+		kind: "move",
+		index
+	};
+	return viewChangeOrWrite ? { kind: "park" } : { kind: "clamp" };
+}
+function sameIdSequence(a, b) {
+	if (!a || a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+	return true;
+}
+//#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, "\"\"") + "\"";
@@ -236,6 +322,150 @@ const indexOfRowIn = (rows, rowOriginal, rowId) => {
 	return -1;
 };
 //#endregion
+//#region src/helpers/heldView.ts
+const CLEAN_VIEW_STATE = Object.freeze({
+	held: false,
+	filterMismatches: 0,
+	sortMismatches: 0
+});
+const viewStatesEqual = (a, b) => a.held === b.held && a.filterMismatches === b.filterMismatches && a.sortMismatches === b.sortMismatches;
+const changedIndices = (prev, next) => {
+	const out = [];
+	if (prev.length !== next.length) {
+		const n = Math.max(prev.length, next.length);
+		for (let i = 0; i < n; i++) out.push(i);
+		return out;
+	}
+	for (let i = 0; i < next.length; i++) if (prev[i] !== next[i]) out.push(i);
+	return out;
+};
+const rowIds = (model) => (model?.rows ?? []).map((r) => r.id);
+const createHoldController = () => {
+	let active = false;
+	let heldMembership = null;
+	let heldOrder = null;
+	const written = /* @__PURE__ */ new Set();
+	let version = 0;
+	let liveFilteredIds = /* @__PURE__ */ new Set();
+	let liveSortedIds = [];
+	const release = () => {
+		heldMembership = null;
+		heldOrder = null;
+		written.clear();
+		version++;
+	};
+	const wrapFiltered = (base) => (table) => {
+		const getBase = base(table);
+		let lastBase = void 0;
+		let lastVersion = -1;
+		let lastOut = void 0;
+		return () => {
+			const baseModel = getBase();
+			if (!heldMembership) return baseModel;
+			if (baseModel === lastBase && version === lastVersion) return lastOut;
+			liveFilteredIds = new Set(rowIds(baseModel));
+			const held = heldMembership;
+			const rows = table.getCoreRowModel().rows.filter((r) => held.has(r.id));
+			const rowsById = {};
+			for (const r of rows) rowsById[r.id] = r;
+			lastBase = baseModel;
+			lastVersion = version;
+			lastOut = {
+				rows,
+				flatRows: rows,
+				rowsById
+			};
+			return lastOut;
+		};
+	};
+	const wrapSorted = (base) => (table) => {
+		const getBase = base(table);
+		let lastBase = void 0;
+		let lastVersion = -1;
+		let lastOut = void 0;
+		return () => {
+			const baseModel = getBase();
+			if (!heldOrder) return baseModel;
+			if (baseModel === lastBase && version === lastVersion) return lastOut;
+			const baseRows = baseModel?.rows ?? [];
+			liveSortedIds = baseRows.map((r) => r.id);
+			const byId = /* @__PURE__ */ new Map();
+			for (const r of baseRows) byId.set(r.id, r);
+			const rows = [];
+			for (const id of heldOrder) {
+				const r = byId.get(id);
+				if (r) {
+					rows.push(r);
+					byId.delete(id);
+				}
+			}
+			for (const r of baseRows) if (byId.has(r.id)) rows.push(r);
+			lastBase = baseModel;
+			lastVersion = version;
+			lastOut = {
+				rows,
+				flatRows: rows,
+				rowsById: baseModel?.rowsById ?? {}
+			};
+			return lastOut;
+		};
+	};
+	return {
+		setActive(next) {
+			const was = active;
+			active = !!next;
+			if (!active && was) release();
+		},
+		isActive: () => active,
+		isHolding: () => heldMembership !== null,
+		capture(table) {
+			if (!active || heldMembership) return;
+			const filtered = table.getFilteredRowModel();
+			const sorted = typeof table.getSortedRowModel === "function" ? table.getSortedRowModel() : filtered;
+			heldMembership = new Set(rowIds(filtered));
+			heldOrder = rowIds(sorted);
+			written.clear();
+			version++;
+		},
+		release,
+		noteWrite(prev, next) {
+			if (!heldMembership) return;
+			for (const i of changedIndices(prev, next)) written.add(i);
+		},
+		wrapFiltered,
+		wrapSorted,
+		viewState(table) {
+			if (!active) return CLEAN_VIEW_STATE;
+			if (!heldMembership || !heldOrder) return {
+				held: true,
+				filterMismatches: 0,
+				sortMismatches: 0
+			};
+			table.getSortedRowModel();
+			const held = heldMembership;
+			let filterMismatches = 0;
+			for (const id of held) if (!liveFilteredIds.has(id)) filterMismatches++;
+			const coreRows = table.getCoreRowModel().rows;
+			for (const r of coreRows) if (!held.has(r.id) && liveFilteredIds.has(r.id)) filterMismatches++;
+			const heldPos = /* @__PURE__ */ new Map();
+			heldOrder.forEach((id, i) => heldPos.set(id, i));
+			const livePos = /* @__PURE__ */ new Map();
+			liveSortedIds.forEach((id, i) => livePos.set(id, i));
+			let sortMismatches = 0;
+			for (const i of written) {
+				const id = coreRows[i]?.id;
+				if (id === void 0 || !heldPos.has(id)) continue;
+				if (heldPos.get(id) !== livePos.get(id)) sortMismatches++;
+			}
+			return {
+				held: true,
+				filterMismatches,
+				sortMismatches
+			};
+		}
+	};
+};
+//#endregion
 //#region src/DataTable.tsx
 __rozieInjectStyle("DataTable-d5dcab4c", `[data-rozie-s-d5dcab4c]:host {
   --rdt-color: var(--rozie-data-table-fg, var(--rdt-ds-fg));
@@ -653,6 +883,7 @@ function DataTable(_props) {
 		singleClickEdit: false,
 		undoable: false,
 		undoLimit: 100,
+		holdView: false,
 		virtual: false,
 		estimateRowHeight: 40,
 		autoMeasure: false,
@@ -684,6 +915,7 @@ function DataTable(_props) {
 		"singleClickEdit",
 		"undoable",
 		"undoLimit",
+		"holdView",
 		"virtual",
 		"estimateRowHeight",
 		"autoMeasure",
@@ -706,6 +938,7 @@ function DataTable(_props) {
 		"onSelectionChange",
 		"onSortChange",
 		"onVisibilityChange",
+		"onViewStateChange",
 		"onVisibleRangeChange",
 		"groupBarSlot",
 		"selectAllSlot",
@@ -756,7 +989,9 @@ function DataTable(_props) {
 			redo,
 			canUndo,
 			canRedo,
-			clearHistory
+			clearHistory,
+			refreshView,
+			getViewState
 		});
 	});
 	const __ctx_data_table_columns = rozieContext("data-table:columns");
@@ -827,16 +1062,58 @@ function DataTable(_props) {
 	const [pasteAnnounce, setPasteAnnounce] = createSignal("");
 	const [rangeAnnounce, setRangeAnnounce] = createSignal("");
 	const [liveAnnounce, setLiveAnnounce] = createSignal("");
+	createEffect(on(() => windowVer(), (v) => untrack(() => emitVisibleRangeIfChanged()), { defer: true }));
+	createEffect(on(() => [
+		sorting(),
+		globalFilter(),
+		columnFilters(),
+		pagination(),
+		local.rowCount,
+		local.pageCount,
+		rowSelection(),
+		expanded(),
+		local.expandable,
+		grouping(),
+		local.groupable,
+		columnVisibility(),
+		columnSizing(),
+		columnOrder(),
+		columnPinning(),
+		local.selectionMode,
+		local.holdView,
+		(data() || []).length,
+		data(),
+		dataDefault(),
+		local.columns,
+		colReg()
+	], (v) => untrack(() => (() => {
+		seedColumnPinning();
+		reFeed();
+		maybeClearHistoryOnExternalSwap();
+	})()), { defer: true }));
+	createEffect(on(() => [
+		sorting(),
+		columnFilters(),
+		globalFilter(),
+		sortingDefault(),
+		columnFiltersDefault(),
+		globalFilterDefault()
+	], (v) => untrack(() => (() => {
+		const msg = buildSortFilterAnnounce();
+		if (msg) setLiveAnnounce(msg);
+	})()), { defer: true }));
 	onMount(() => {
 		setDataDefault(data() || []);
 		seedColumnPinning();
+		const cols0 = tableColumns();
+		lastColumnSig = columnSetSignature(cols0);
 		table = createTable({
 			data: feedData(),
-			columns: tableColumns(),
+			columns: cols0,
 			state: currentState(),
 			getCoreRowModel: getCoreRowModel(),
-			getSortedRowModel: getSortedRowModel(),
-			getFilteredRowModel: getFilteredRowModel(),
+			getSortedRowModel: heldSortedRowModel,
+			getFilteredRowModel: heldFilteredRowModel,
 			getPaginationRowModel: getPaginationRowModel(),
 			getExpandedRowModel: getExpandedRowModel(),
 			getSubRows: local.getSubRows || void 0,
@@ -871,6 +1148,21 @@ function DataTable(_props) {
 			renderFallbackValue: null,
 			onStateChange: () => {}
 		});
+		table.resetPageIndex = () => {
+			if (!table) return;
+			const pg = table.getState().pagination;
+			writePagination({
+				pageIndex: pg.pageIndex,
+				pageSize: pg.pageSize
+			});
+		};
+		const st0 = currentState();
+		lastHoldSorting = st0.sorting;
+		lastHoldColumnFilters = st0.columnFilters;
+		lastHoldGlobalFilter = st0.globalFilter;
+		lastPageGrouping = st0.grouping;
+		syncHoldActive(st0);
+		lastPropsData = data();
 		refreshRowModel = () => {
 			if (!table) return;
 			const nextRows = windowSource().slice();
@@ -885,7 +1177,17 @@ function DataTable(_props) {
 			}
 			remeasureColumnWindow();
 			const nextRowCount = nextRows.length;
-			clampActiveCell(nextRowCount, nextRows.length ? nextRows[0].getVisibleCells().length : nextGroups.length ? (nextGroups[nextGroups.length - 1].headers || []).length : 0);
+			const nextColCount = nextRows.length ? nextRows[0].getVisibleCells().length : nextGroups.length ? (nextGroups[nextGroups.length - 1].headers || []).length : 0;
+			const nextIds = nextRows.map((r) => r.id);
+			const fedData = table.options.data;
+			const dataChanged = fedData !== lastFedData;
+			lastFedData = fedData;
+			const viewChangeOrWrite = pendingViewChange || pendingWrite && dataChanged;
+			const swapWithoutIds = dataChanged && !pendingWrite && !pendingViewChange && table.options.getRowId == null;
+			pendingViewChange = false;
+			if (dataChanged) pendingWrite = false;
+			followActiveCell(swapWithoutIds ? null : prevRowIds, nextIds, viewChangeOrWrite, nextRowCount, nextColCount, pendingEditFollow != null);
+			prevRowIds = nextIds;
 			const pgState = table.getState().pagination;
 			const pc = table.getPageCount();
 			if (pc > 0 && pgState.pageIndex > pc - 1) writePagination({
@@ -901,6 +1203,11 @@ function DataTable(_props) {
 			syncIndeterminate();
 			if (typeof queueMicrotask !== "undefined") queueMicrotask(syncIndeterminate);
 			else Promise.resolve().then(syncIndeterminate);
+			const vs = holdCtrl.viewState(table);
+			if (!viewStatesEqual(vs, lastViewState)) {
+				lastViewState = vs;
+				_props.onViewStateChange?.(vs);
+			}
 		};
 		refreshRowModel();
 		gridRoot = __rozieRootRef ? __rozieRootRef.querySelector(".rozie-data-table") : null;
@@ -969,45 +1276,6 @@ function DataTable(_props) {
 		lastDataLen = d.length;
 		reFeed();
 	});
-	createEffect(on(() => windowVer(), (v) => untrack(() => emitVisibleRangeIfChanged()), { defer: true }));
-	createEffect(on(() => [
-		sorting(),
-		globalFilter(),
-		columnFilters(),
-		pagination(),
-		local.rowCount,
-		local.pageCount,
-		rowSelection(),
-		expanded(),
-		local.expandable,
-		grouping(),
-		local.groupable,
-		columnVisibility(),
-		columnSizing(),
-		columnOrder(),
-		columnPinning(),
-		local.selectionMode,
-		(data() || []).length,
-		data(),
-		dataDefault(),
-		local.columns,
-		colReg()
-	], (v) => untrack(() => (() => {
-		seedColumnPinning();
-		reFeed();
-		maybeClearHistoryOnExternalSwap();
-	})()), { defer: true }));
-	createEffect(on(() => [
-		sorting(),
-		columnFilters(),
-		globalFilter(),
-		sortingDefault(),
-		columnFiltersDefault(),
-		globalFilterDefault()
-	], (v) => untrack(() => (() => {
-		const msg = buildSortFilterAnnounce();
-		if (msg) setLiveAnnounce(msg);
-	})()), { defer: true }));
 	let __rozieRootRef = null;
 	let table = null;
 	let virtualizer = null;
@@ -1031,6 +1299,48 @@ function DataTable(_props) {
 	let undoStack = [];
 	let redoStack = [];
 	let restoringHistory = false;
+	const holdCtrl = createHoldController();
+	const heldFilteredRowModel = holdCtrl.wrapFiltered(getFilteredRowModel());
+	const heldSortedRowModel = holdCtrl.wrapSorted(getSortedRowModel());
+	let pendingViewChange = false;
+	let pendingWrite = false;
+	let prevRowIds = null;
+	let lastFedData = null;
+	let lastViewState = CLEAN_VIEW_STATE;
+	let lastHoldSorting = null;
+	let lastHoldColumnFilters = null;
+	let lastHoldGlobalFilter = null;
+	let holdFallbackWarned = false;
+	let lastPageGrouping = null;
+	let lastColumnSig = "";
+	function columnSetSignature(defs) {
+		let sig = "";
+		const stack = (defs || []).slice().reverse();
+		while (stack.length) {
+			const d = stack.pop();
+			if (!d) continue;
+			sig += String(d.id) + (d.enableSorting ? "+" : "") + (d.enableColumnFilter ? "*" : "") + "|";
+			if (Array.isArray(d.columns)) for (let i = d.columns.length - 1; i >= 0; i--) stack.push(d.columns[i]);
+		}
+		return sig;
+	}
+	let lastPropsData = null;
+	function isExternalSwap() {
+		const pd = data();
+		if (pd === lastPropsData) return false;
+		return !(pd != null && pd[DATA_WRITE_TOKEN_KEY] != null);
+	}
+	function syncHoldActive(st) {
+		const wanted = local.holdView === true;
+		const active = wanted && local.manual !== true && local.getSubRows == null && !(st.grouping || []).length;
+		const wasHolding = holdCtrl.isHolding();
+		holdCtrl.setActive(active);
+		if (wasHolding && !holdCtrl.isHolding()) pendingViewChange = true;
+		if (wanted && !active && !holdFallbackWarned) {
+			holdFallbackWarned = true;
+			console.warn("[rozie-data-table] holdView falls back to live behaviour while grouping is active, in manual mode, or with tree data (getSubRows); the view is not held.");
+		}
+	}
 	let expandedTouched = false;
 	function groupingActiveDefault() {
 		return ((grouping() != null ? grouping() : groupingDefault()) || []).length > 0;
@@ -1164,6 +1474,7 @@ function DataTable(_props) {
 			expandable: c.expandable === true,
 			groupable: c.groupable !== false,
 			aggregationFn: wrapAggregationFn(c.aggregationFn),
+			...columnRuleKeys(c, id),
 			pinned: c.pinned != null ? c.pinned : "",
 			width: c.width != null ? c.width : "",
 			...parseWidthToSize(c.width) != null ? { size: parseWidthToSize(c.width) } : {},
@@ -1207,6 +1518,7 @@ function DataTable(_props) {
 				expandable: spec.expandable === true,
 				groupable: spec.groupable !== false,
 				aggregationFn: wrapAggregationFn(spec.aggregationFn),
+				...columnRuleKeys(spec, id),
 				pinned: spec.pinned != null ? spec.pinned : "",
 				width: spec.width != null ? spec.width : "",
 				...parseWidthToSize(spec.width) != null ? { size: parseWidthToSize(spec.width) } : {},
@@ -1363,6 +1675,9 @@ function DataTable(_props) {
 			recordSnapshot(currentData());
 			emitHistoryChangeIfEdged(prevU, prevR);
 		}
+		if (table) holdCtrl.capture(table);
+		holdCtrl.noteWrite(currentData() || [], Array.isArray(next) ? next : []);
+		pendingWrite = true;
 		const fresh = Array.isArray(next) ? next.slice() : next;
 		try {
 			Object.defineProperty(fresh, DATA_WRITE_TOKEN_KEY, {
@@ -1986,13 +2301,60 @@ function DataTable(_props) {
 		if (local.selectionMode === "none") return false;
 		return lazyRowsActive() ? (row) => !rowIsLazyPlaceholder(row) : true;
 	}
+	function writePaginationSoon(next) {
+		if (!programmatic) {
+			writePagination(next);
+			return;
+		}
+		const run = () => writePagination(next);
+		if (typeof queueMicrotask !== "undefined") queueMicrotask(run);
+		else Promise.resolve().then(run);
+	}
 	function reFeed() {
 		if (!table) return;
+		const st0 = currentState();
+		syncHoldActive(st0);
+		let st = st0;
+		let pageReset = null;
+		const groupingChanged = st0.grouping !== lastPageGrouping;
+		lastPageGrouping = st0.grouping;
+		const viewChanged = st0.sorting !== lastHoldSorting || st0.columnFilters !== lastHoldColumnFilters || st0.globalFilter !== lastHoldGlobalFilter;
+		if (viewChanged) {
+			lastHoldSorting = st0.sorting;
+			lastHoldColumnFilters = st0.columnFilters;
+			lastHoldGlobalFilter = st0.globalFilter;
+			holdCtrl.release();
+			pendingViewChange = true;
+		}
+		if ((viewChanged || groupingChanged) && local.manual !== true && st0.pagination && st0.pagination.pageIndex !== 0) {
+			pageReset = {
+				pageIndex: 0,
+				pageSize: st0.pagination.pageSize
+			};
+			st = {
+				...st0,
+				pagination: pageReset
+			};
+		}
+		const cols = tableColumns();
+		const colSig = columnSetSignature(cols);
+		if (colSig !== lastColumnSig) {
+			lastColumnSig = colSig;
+			st = {
+				...st,
+				sorting: [...st.sorting || []],
+				columnFilters: [...st.columnFilters || []]
+			};
+		}
+		if (holdCtrl.isHolding() && isExternalSwap()) holdCtrl.release();
+		if (pendingWrite && isExternalSwap()) pendingWrite = false;
 		table.setOptions((prev) => ({
 			...prev,
 			data: feedData(),
-			columns: tableColumns(),
-			state: currentState(),
+			columns: cols,
+			state: st,
+			getFilteredRowModel: heldFilteredRowModel,
+			getSortedRowModel: heldSortedRowModel,
 			enableRowSelection: rowSelectionOption(),
 			enableMultiRowSelection: local.selectionMode === "multiple",
 			rowCount: local.rowCount ?? void 0,
@@ -2020,15 +2382,19 @@ function DataTable(_props) {
 			onColumnSizingInfoChange: onColumnSizingInfoChangeCb
 		}));
 		if (refreshRowModel) refreshRowModel();
+		if (pageReset) writePaginationSoon(pageReset);
 	}
-	let lastPropsData = null;
 	function maybeClearHistoryOnExternalSwap() {
 		const pd = data();
 		if (pd === lastPropsData) return;
 		lastPropsData = pd;
-		if (!local.undoable) return;
 		if (pd != null && pd[DATA_WRITE_TOKEN_KEY] != null) return;
-		clearHistory();
+		pendingWrite = false;
+		if (holdCtrl.isHolding()) {
+			holdCtrl.release();
+			if (refreshRowModel) refreshRowModel();
+		}
+		if (local.undoable) clearHistory();
 	}
 	let lastData = null;
 	let lastDataLen = -1;
@@ -2405,6 +2771,23 @@ function DataTable(_props) {
 	function cut() {
 		return cutRange();
 	}
+	function refreshView() {
+		holdCtrl.release();
+		pendingViewChange = true;
+		if (!table) return;
+		table.setOptions((p) => ({
+			...p,
+			state: {
+				...p.state,
+				columnFilters: [...p.state.columnFilters || []],
+				sorting: [...p.state.sorting || []]
+			}
+		}));
+		if (refreshRowModel) refreshRowModel();
+	}
+	function getViewState() {
+		return holdCtrl.viewState(table);
+	}
 	function isGrid() {
 		return local.interactionMode === "grid";
 	}
@@ -2937,6 +3320,7 @@ function DataTable(_props) {
 		if (!tgt || !tgt.closest) return;
 		const cellEl = tgt.closest("[data-grid-cell]");
 		if (!cellEl) return;
+		activeCellEngaged = true;
 		const rowAttr = cellEl.getAttribute("data-row");
 		const colAttr = cellEl.getAttribute("data-col-index");
 		if (rowAttr == null || colAttr == null) return;
@@ -3110,13 +3494,62 @@ function DataTable(_props) {
 		if (typeof requestAnimationFrame === "function") requestAnimationFrame(tryFocus);
 		else setTimeout(tryFocus, 0);
 	}
-	function clampActiveCell(rowCount, colCount) {
+	function followOpenEditors(prevIds, nextIds) {
+		if (!prevIds || sameIdSequence(prevIds, nextIds)) return false;
+		let owns = false;
+		const er = editingRow();
+		if (er >= 0) {
+			const ef = resolveFollow(prevIds, er, nextIds, true);
+			if (ef.kind === "move") {
+				setEditingRow(ef.index);
+				focusEditorWhenReady(ef.index, editingCol(), false);
+				owns = true;
+			} else if (ef.kind !== "stay") {
+				committedThisSession = true;
+				editTransition = true;
+				endEdit();
+				editTransition = false;
+			}
+		}
+		const rr = editingRowIndex();
+		if (rr != null && rr >= 0) {
+			const rf = resolveFollow(prevIds, rr, nextIds, true);
+			if (rf.kind === "move") {
+				setEditingRowIndex(rf.index);
+				owns = true;
+			} else if (rf.kind !== "stay") {
+				editTransition = true;
+				endRowEdit();
+				editTransition = false;
+			}
+		}
+		return owns;
+	}
+	function rowIdInModel(index) {
+		const row = windowSource()[index];
+		return row ? row.id : null;
+	}
+	function modelIndexOfRowId(id) {
+		const rows = windowSource();
+		for (let i = 0; i < rows.length; i++) if (rows[i].id === id) return i;
+		return -1;
+	}
+	function followActiveCell(prevIds, nextIds, viewChangeOrWrite, rowCount, colCount, editFollowPending = false) {
+		const editorOwnsFocus = followOpenEditors(prevIds, nextIds);
+		if (!isGrid()) return;
+		let follow = null;
+		if (activeCellEngaged && rowCount > 0 && !activeIsHeader() && !gridEmptyFallback) follow = resolveFollow(prevIds, activeRow(), nextIds, viewChangeOrWrite);
+		clampActiveCell(rowCount, colCount, follow, editFollowPending || editorOwnsFocus, rowCount <= 0 && viewChangeOrWrite);
+		if (viewChangeOrWrite && !sameIdSequence(prevIds, nextIds)) clearRange();
+	}
+	function clampActiveCell(rowCount, colCount, follow = null, editFollowPending = false, focusEmptyPark = false) {
 		if (!isGrid()) return;
 		const colN = colCount != null ? colCount : visibleColCount();
 		const rowN = rowCount != null ? rowCount : bodyRowCount();
 		let recoverFocus = false;
 		let doomedRow = -1;
 		let doomedCol = 0;
+		let focusOnBody = false;
 		if (gridRoot) {
 			const rootNode = gridRoot.getRootNode ? gridRoot.getRootNode() : null;
 			const focusedEl = rootNode ? rootNode.activeElement : null;
@@ -3125,6 +3558,7 @@ function DataTable(_props) {
 				const fRowAttr = focusedCell.getAttribute("data-row");
 				const fColAttr = focusedCell.getAttribute("data-col-index");
 				if (fRowAttr != null && fRowAttr !== "__header") {
+					focusOnBody = true;
 					const fr = parseInt(fRowAttr, 10);
 					const fc = parseInt(fColAttr, 10);
 					if (Number.isFinite(fr) && fr > rowN - 1) {
@@ -3144,6 +3578,7 @@ function DataTable(_props) {
 			setActiveColIndex(0);
 			gridEmptyFallback = true;
 			clampRange(rowN - 1, colN - 1);
+			if (focusEmptyPark && (focusOnBody || editFollowPending)) recoverGridFocus("__header", 0, headerLeafLevel());
 			return;
 		}
 		if (gridEmptyFallback) {
@@ -3151,6 +3586,31 @@ function DataTable(_props) {
 			setActiveIsHeader(false);
 			setActiveRow(0);
 		}
+		if (follow && follow.kind === "move") {
+			const nextRow = follow.index;
+			setActiveRow(nextRow);
+			clampRange(rowN - 1, colN - 1);
+			_props.onActivecellChange?.({
+				rowIndex: toAbsRow(nextRow),
+				colIndex: col,
+				isHeader: false
+			});
+			if (focusOnBody && !editFollowPending) focusCellWhenReady(nextRow, col);
+			return;
+		}
+		if (follow && follow.kind === "park") {
+			const level = headerLeafLevel();
+			setActiveIsHeader(true);
+			setActiveHeaderLevel(level);
+			clampRange(rowN - 1, colN - 1);
+			_props.onActivecellChange?.({
+				rowIndex: null,
+				colIndex: col,
+				isHeader: true
+			});
+			if (focusOnBody || editFollowPending) recoverGridFocus("__header", col, level);
+			return;
+		}
 		if (!activeIsHeader()) {
 			const lastRow = rowN - 1;
 			const maxRow = lastRow < 0 ? 0 : lastRow;
@@ -3216,6 +3676,7 @@ function DataTable(_props) {
 		colVirtualizer._willUpdate();
 	}
 	let gridEmptyFallback = false;
+	let activeCellEngaged = false;
 	let rangeTransition = false;
 	let rangeClickPending = null;
 	let rangeActive = false;
@@ -3936,6 +4397,7 @@ function DataTable(_props) {
 		const colId = columnIdAt(rowIndex, colIndex);
 		if (colId == null || !columnEditable(colId)) return;
 		committedThisSession = false;
+		outsidePointerDown = false;
 		setInvalid("");
 		setEditingRowIndex(null);
 		setRowDraft({});
@@ -4386,12 +4848,14 @@ function DataTable(_props) {
 			const fromRow = editingRow();
 			const fromCol = editingCol();
 			const target = e.shiftKey ? prevEditableCell(fromRow, fromCol) : nextEditableCell(fromRow, fromCol);
+			const targetRowId = target ? rowIdInModel(target.row) : null;
 			const committed = commitEdit(void 0, true);
-			if (committed && target) {
-				setActiveRow(target.row);
+			const advanceRow = targetRowId != null ? modelIndexOfRowId(targetRowId) : -1;
+			if (committed && target && advanceRow >= 0) {
+				setActiveRow(advanceRow);
 				setActiveColIndex(target.col);
-				beginEdit(target.row, target.col, null);
-			} else if (committed) focusCellWhenReady(fromRow, fromCol);
+				beginEdit(advanceRow, target.col, null);
+			} else if (committed && target) {} else if (committed) focusCellWhenReady(fromRow, fromCol);
 		} else if (key === "Escape") {
 			e.preventDefault();
 			cancelEdit();
@@ -4975,7 +5439,9 @@ function DataTable(_props) {
 		onEditorKeyDown($event);
 	}} onBlur={($event) => {
 		onEditorBlur($event);
-	}} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? "true" : null)} class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event) => {
+	}} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? "true" : null)} class={"rdt-cell-editor"} ref={(el) => {
+		rozieSelectValue(el, () => editorValueFor(cell().column.id));
+	}} onChange={($event) => {
 		onCellEditorInput(cell().column.id, $event);
 	}} onKeyDown={($event) => {
 		onEditorKeyDown($event);
@@ -5343,7 +5809,9 @@ function DataTable(_props) {
 		onEditorKeyDown($event);
 	}} onBlur={($event) => {
 		onEditorBlur($event);
-	}} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? "true" : null)} class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event) => {
+	}} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? "true" : null)} class={"rdt-cell-editor"} ref={(el) => {
+		rozieSelectValue(el, () => editorValueFor(cell().column.id));
+	}} onChange={($event) => {
 		onCellEditorInput(cell().column.id, $event);
 	}} onKeyDown={($event) => {
 		onEditorKeyDown($event);
@@ -5447,7 +5915,9 @@ function DataTable(_props) {
       <button type="button" class={"rdt-page-btn rdt-page-next"} disabled={!canNextPage()} onClick={($event) => {
 		onNextPage();
 	}} data-rozie-s-d5dcab4c="">Next</button>
-      <select aria-label="Rows per page" class={"rdt-page-size"} value={pageSize()} onChange={($event) => {
+      <select aria-label="Rows per page" class={"rdt-page-size"} ref={(el) => {
+		rozieSelectValue(el, () => pageSize());
+	}} onChange={($event) => {
 		onPageSizeChange($event);
 	}} data-rozie-s-d5dcab4c="">
         <option value={10} data-rozie-s-d5dcab4c="">10</option>
@@ -5473,6 +5943,8 @@ function Column(_props) {
 		expandable: false,
 		groupable: true,
 		aggregationFn: null,
+		filterFn: null,
+		sortingFn: null,
 		editable: false,
 		editor: "text",
 		editorOptions: [],
@@ -5488,12 +5960,36 @@ function Column(_props) {
 		"expandable",
 		"groupable",
 		"aggregationFn",
+		"filterFn",
+		"sortingFn",
 		"editable",
 		"editor",
 		"editorOptions",
 		"validate"
 	]);
 	const registry = useContext(rozieContext("data-table:columns"));
+	createEffect(on(() => [
+		local.id,
+		local.field,
+		local.header,
+		local.sortable,
+		local.filterable,
+		local.pinned,
+		local.width,
+		local.expandable,
+		local.groupable,
+		local.aggregationFn,
+		local.filterFn,
+		local.sortingFn,
+		local.editable,
+		local.editor,
+		local.editorOptions,
+		local.validate
+	], (v) => untrack(() => (() => {
+		latestFilterFn = local.filterFn;
+		latestSortingFn = local.sortingFn;
+		if (reg) reg.registerColumn(colId(), buildSpec());
+	})()), { defer: true }));
 	onMount(() => {
 		const _cleanup = (() => {
 			if (reg && !registered) {
@@ -5514,31 +6010,24 @@ function Column(_props) {
 		registered = true;
 		reg.registerColumn(colId(), buildSpec());
 	});
-	createEffect(on(() => [
-		local.id,
-		local.field,
-		local.header,
-		local.sortable,
-		local.filterable,
-		local.pinned,
-		local.width,
-		local.expandable,
-		local.groupable,
-		local.aggregationFn,
-		local.editable,
-		local.editor,
-		local.editorOptions,
-		local.validate
-	], (v) => untrack(() => (() => {
-		if (reg) reg.registerColumn(colId(), buildSpec());
-	})()), { defer: true }));
 	let reg = null;
 	reg = registry;
 	let registered = false;
+	let latestFilterFn = null;
+	let latestSortingFn = null;
+	const filterTrampoline = Object.assign((...args) => typeof latestFilterFn === "function" ? latestFilterFn(...args) : true, {
+		autoRemove: (value, column) => typeof latestFilterFn === "function" && typeof latestFilterFn.autoRemove === "function" ? latestFilterFn.autoRemove(value, column) : false,
+		resolveFilterValue: (value) => typeof latestFilterFn === "function" && typeof latestFilterFn.resolveFilterValue === "function" ? latestFilterFn.resolveFilterValue(value) : value
+	});
+	function sortingTrampoline(...args) {
+		return typeof latestSortingFn === "function" ? latestSortingFn(...args) : 0;
+	}
 	function colId() {
 		return local.id !== "" ? local.id : local.field;
 	}
 	function buildSpec() {
+		latestFilterFn = local.filterFn;
+		latestSortingFn = local.sortingFn;
 		return {
 			id: colId(),
 			field: local.field !== "" ? local.field : colId(),
@@ -5550,6 +6039,8 @@ function Column(_props) {
 			expandable: local.expandable,
 			groupable: local.groupable,
 			aggregationFn: local.aggregationFn,
+			filterFn: typeof local.filterFn === "function" ? filterTrampoline : local.filterFn,
+			sortingFn: typeof local.sortingFn === "function" ? sortingTrampoline : local.sortingFn,
 			editable: local.editable,
 			editor: local.editor,
 			editorOptions: local.editorOptions,
@@ -5585,12 +6076,12 @@ function EditorText(_props) {
 	]);
 	const [draft, setDraft] = createSignal("");
 	const [touched, setTouched] = createSignal(false);
-	onMount(() => {
-		if (local.autofocus) inputElRef?.focus();
-	});
 	createEffect(on(() => local.autofocus, (v) => untrack(() => ((v) => {
 		if (v) inputElRef?.focus();
 	})(v)), { defer: true }));
+	onMount(() => {
+		if (local.autofocus) inputElRef?.focus();
+	});
 	let inputElRef = null;
 	function draftValue() {
 		return touched() ? draft() : local.value != null ? String(local.value) : "";
@@ -5657,12 +6148,12 @@ function EditorNumber(_props) {
 	]);
 	const [draft, setDraft] = createSignal("");
 	const [touched, setTouched] = createSignal(false);
-	onMount(() => {
-		if (local.autofocus) inputElRef?.focus();
-	});
 	createEffect(on(() => local.autofocus, (v) => untrack(() => ((v) => {
 		if (v) inputElRef?.focus();
 	})(v)), { defer: true }));
+	onMount(() => {
+		if (local.autofocus) inputElRef?.focus();
+	});
 	let inputElRef = null;
 	function draftValue() {
 		return touched() ? draft() : local.value != null ? String(local.value) : "";
@@ -5738,12 +6229,12 @@ function EditorSelect(_props) {
 	]);
 	const [draft, setDraft] = createSignal("");
 	const [touched, setTouched] = createSignal(false);
-	onMount(() => {
-		if (local.autofocus) selectElRef?.focus();
-	});
 	createEffect(on(() => local.autofocus, (v) => untrack(() => ((v) => {
 		if (v) selectElRef?.focus();
 	})(v)), { defer: true }));
+	onMount(() => {
+		if (local.autofocus) selectElRef?.focus();
+	});
 	let selectElRef = null;
 	function draftValue() {
 		return touched() ? draft() : local.value != null ? String(local.value) : "";
@@ -5776,8 +6267,9 @@ function EditorSelect(_props) {
 	}
 	return <>
     <select data-editing-cell="" aria-label={rozieAttr(a11yLabel())} ref={(el) => {
+		rozieSelectValue(el, () => draftValue());
 		selectElRef = el;
-	}} class={"rdt-cell-editor"} value={draftValue()} onChange={($event) => {
+	}} class={"rdt-cell-editor"} onChange={($event) => {
 		onChange($event);
 	}} onKeyDown={($event) => {
 		onKeydown($event);
@@ -5810,12 +6302,12 @@ function EditorCheckbox(_props) {
 		"autofocus",
 		"columnLabel"
 	]);
-	onMount(() => {
-		if (local.autofocus) inputElRef?.focus();
-	});
 	createEffect(on(() => local.autofocus, (v) => untrack(() => ((v) => {
 		if (v) inputElRef?.focus();
 	})(v)), { defer: true }));
+	onMount(() => {
+		if (local.autofocus) inputElRef?.focus();
+	});
 	let inputElRef = null;
 	function onChange(e) {
 		local.commit && local.commit(!!(e && e.target ? e.target.checked : false));
@@ -5897,12 +6389,12 @@ function EditorDate(_props) {
 	]);
 	const [draft, setDraft] = createSignal("");
 	const [touched, setTouched] = createSignal(false);
-	onMount(() => {
-		if (local.autofocus) inputElRef?.focus();
-	});
 	createEffect(on(() => local.autofocus, (v) => untrack(() => ((v) => {
 		if (v) inputElRef?.focus();
 	})(v)), { defer: true }));
+	onMount(() => {
+		if (local.autofocus) inputElRef?.focus();
+	});
 	let inputElRef = null;
 	function draftValue() {
 		return touched() ? draft() : toIsoDateString(local.value);
@@ -6123,7 +6615,9 @@ function FilterSelect(_props) {
 		return local.columnId;
 	}
 	return <>
-    <select part="col-filter" aria-label={rozieAttr(a11yLabel())} class={"rdt-col-filter"} value={selectValue()} onChange={($event) => {
+    <select part="col-filter" aria-label={rozieAttr(a11yLabel())} class={"rdt-col-filter"} ref={(el) => {
+		rozieSelectValue(el, () => selectValue());
+	}} onChange={($event) => {
 		onChange($event);
 	}} data-rozie-s-d75b42b2="">
       <option value="" data-rozie-s-d75b42b2="">All</option>