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

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { className, createComponent, delegateEvents, effect, insert, memo, setAttribute, style, template, use } from "solid-js/web";
 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";
@@ -94,6 +94,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) => {
@@ -102,6 +170,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, "\"\"") + "\"";
@@ -237,9 +323,153 @@ 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
 var _tmpl$$11 = /* @__PURE__ */ template(`<div class=rozie-data-table-wrap data-rozie-s-d5dcab4c=""><div class=rdt-column-defs aria-hidden=true data-rozie-s-d5dcab4c=""></div><div class=rdt-toolbar data-rozie-s-d5dcab4c=""><input type=text role=searchbox aria-label="Search table"class=rdt-global-filter data-rozie-s-d5dcab4c="">`), _tmpl$2$4 = /* @__PURE__ */ template(`<div class=rdt-sr-live role=status aria-live=polite aria-atomic=true data-rozie-s-d5dcab4c="">`), _tmpl$3$1 = /* @__PURE__ */ template(`<div class="rdt-sr-live rdt-sr-paste"data-testid=paste-announce role=status aria-live=polite aria-atomic=true data-rozie-s-d5dcab4c="">`), _tmpl$4$1 = /* @__PURE__ */ template(`<div class="rdt-sr-live rdt-sr-range"data-testid=range-announce role=status aria-live=polite aria-atomic=true data-rozie-s-d5dcab4c="">`), _tmpl$5$1 = /* @__PURE__ */ template(`<div class="rdt-sr-live rdt-sr-sortfilter"data-testid=sortfilter-announce role=status aria-live=polite aria-atomic=true data-rozie-s-d5dcab4c="">`), _tmpl$6 = /* @__PURE__ */ template(`<details class=rdt-colvis data-rozie-s-d5dcab4c=""><summary class=rdt-colvis-summary data-rozie-s-d5dcab4c="">Columns</summary><div class=rdt-colvis-menu role=group aria-label="Toggle columns"data-rozie-s-d5dcab4c="">`), _tmpl$7 = /* @__PURE__ */ template(`<label class=rdt-colvis-item data-rozie-s-d5dcab4c=""><input type=checkbox class=rdt-colvis-checkbox data-rozie-s-d5dcab4c=""><span class=rdt-colvis-label data-rozie-s-d5dcab4c="">`), _tmpl$8 = /* @__PURE__ */ template(`<div class=rdt-group-bar-host data-rozie-s-d5dcab4c="">`), _tmpl$9 = /* @__PURE__ */ template(`<span class=rdt-group-token data-group-token=""data-rozie-s-d5dcab4c="">`), _tmpl$0 = /* @__PURE__ */ template(`<div class=rdt-scroll data-rozie-s-d5dcab4c=""><table data-rozie-s-d5dcab4c=""><thead class=rdt-thead role=rowgroup data-rozie-s-d5dcab4c=""></thead><tbody class=rdt-tbody role=rowgroup data-rozie-s-d5dcab4c=""><tr class=rdt-spacer aria-hidden=true data-rozie-s-d5dcab4c=""><td data-rozie-s-d5dcab4c=""></td></tr><tr class=rdt-spacer aria-hidden=true data-rozie-s-d5dcab4c=""><td data-rozie-s-d5dcab4c="">`), _tmpl$1 = /* @__PURE__ */ template(`<table data-rozie-s-d5dcab4c=""><thead class=rdt-thead role=rowgroup data-rozie-s-d5dcab4c=""></thead><tbody class=rdt-tbody role=rowgroup data-rozie-s-d5dcab4c="">`), _tmpl$10 = /* @__PURE__ */ template(`<tr class=rdt-tr role=row data-rozie-s-d5dcab4c="">`), _tmpl$11 = /* @__PURE__ */ template(`<th role=columnheader data-grid-cell=""data-row=__header data-rozie-s-d5dcab4c="">`), _tmpl$12 = /* @__PURE__ */ template(`<span data-rozie-s-d5dcab4c="">`), _tmpl$13 = /* @__PURE__ */ template(`<div class=rdt-col-menu role=menu data-rozie-s-d5dcab4c=""><button type=button role=menuitem class=rdt-col-menu-item data-rozie-s-d5dcab4c="">Pin left</button><button type=button role=menuitem class=rdt-col-menu-item data-rozie-s-d5dcab4c="">Pin right</button><button type=button role=menuitem class=rdt-col-menu-item 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 data-rozie-s-d5dcab4c="">Hide column`), _tmpl$14 = /* @__PURE__ */ template(`<span data-rozie-s-d5dcab4c=""><button type=button class=rdt-resize-handle data-rozie-s-d5dcab4c=""><span class=rdt-resize-grip aria-hidden=true data-rozie-s-d5dcab4c="">`), _tmpl$15 = /* @__PURE__ */ template(`<button type=button class=rdt-sort-btn data-rozie-s-d5dcab4c=""><span class=rdt-header-label data-rozie-s-d5dcab4c=""></span><span class=rdt-sort-ind aria-hidden=true data-rozie-s-d5dcab4c="">`), _tmpl$16 = /* @__PURE__ */ template(`<span data-rozie-s-d5dcab4c=""><span class=rdt-header-label data-rozie-s-d5dcab4c="">`), _tmpl$17 = /* @__PURE__ */ template(`<button type=button class=rdt-col-menu-trigger data-rozie-s-d5dcab4c="">⋯`), _tmpl$18 = /* @__PURE__ */ template(`<input type=checkbox aria-label="Select all rows"class=rdt-select-all data-rozie-s-d5dcab4c="">`), _tmpl$19 = /* @__PURE__ */ template(`<tr class=rdt-filter-row data-rozie-s-d5dcab4c="">`), _tmpl$20 = /* @__PURE__ */ template(`<th role=presentation data-rozie-s-d5dcab4c="">`), _tmpl$21 = /* @__PURE__ */ template(`<input type=text class=rdt-col-filter data-rozie-s-d5dcab4c="">`), _tmpl$22 = /* @__PURE__ */ template(`<tr role=row data-rozie-s-d5dcab4c="">`), _tmpl$23 = /* @__PURE__ */ template(`<td data-grid-cell=""data-rozie-s-d5dcab4c="">`), _tmpl$24 = /* @__PURE__ */ template(`<span data-rozie-s-d5dcab4c=""><button type=button data-expander=""class="rdt-expander rdt-group-toggle"data-rozie-s-d5dcab4c=""></button><span class=rdt-group-value data-rozie-s-d5dcab4c=""></span><span class=rdt-group-count data-rozie-s-d5dcab4c="">`), _tmpl$25 = /* @__PURE__ */ template(`<span class=rdt-cell-value data-rozie-s-d5dcab4c="">`), _tmpl$26 = /* @__PURE__ */ template(`<input type=number data-editing-cell=""data-builtin-editor=""class=rdt-cell-editor data-rozie-s-d5dcab4c="">`), _tmpl$27 = /* @__PURE__ */ template(`<select data-editing-cell=""data-builtin-editor=""class=rdt-cell-editor data-rozie-s-d5dcab4c="">`), _tmpl$28 = /* @__PURE__ */ template(`<input type=checkbox data-editing-cell=""data-builtin-editor=""class=rdt-cell-editor data-rozie-s-d5dcab4c="">`), _tmpl$29 = /* @__PURE__ */ template(`<input type=text data-editing-cell=""data-builtin-editor=""class=rdt-cell-editor data-rozie-s-d5dcab4c="">`), _tmpl$30 = /* @__PURE__ */ template(`<option data-rozie-s-d5dcab4c="">`), _tmpl$31 = /* @__PURE__ */ template(`<input type=checkbox aria-label="Select row"class=rdt-select-row data-rozie-s-d5dcab4c="">`), _tmpl$32 = /* @__PURE__ */ template(`<button type=button data-expander=""class=rdt-expander data-rozie-s-d5dcab4c="">`), _tmpl$33 = /* @__PURE__ */ template(`<span data-fill-handle=""data-testid=fill-handle aria-hidden=true class=rdt-fill-handle data-rozie-s-d5dcab4c="">`), _tmpl$34 = /* @__PURE__ */ template(`<tr class=rdt-detail-row role=row data-rozie-s-d5dcab4c=""><td class=rdt-detail-cell data-rozie-s-d5dcab4c="">`), _tmpl$35 = /* @__PURE__ */ template(`<th class=rdt-col-spacer aria-hidden=true data-rozie-s-d5dcab4c="">`), _tmpl$36 = /* @__PURE__ */ template(`<td class=rdt-col-spacer aria-hidden=true data-rozie-s-d5dcab4c="">`), _tmpl$37 = /* @__PURE__ */ template(`<span data-rozie-s-d5dcab4c=""><input class=rdt-select-placeholder type=checkbox tabindex=-1 aria-hidden=true data-rozie-s-d5dcab4c="">`), _tmpl$38 = /* @__PURE__ */ template(`<span class=rdt-skeleton aria-hidden=true data-rozie-s-d5dcab4c="">&#8203;`), _tmpl$39 = /* @__PURE__ */ template(`<div class=rdt-pagination role=group aria-label=Pagination data-rozie-s-d5dcab4c=""><button type=button class="rdt-page-btn rdt-page-prev"data-rozie-s-d5dcab4c="">Prev</button><span class=rdt-page-status aria-live=polite data-rozie-s-d5dcab4c=""></span><button type=button class="rdt-page-btn rdt-page-next"data-rozie-s-d5dcab4c="">Next</button><select aria-label="Rows per page"class=rdt-page-size data-rozie-s-d5dcab4c=""><option value=10 data-rozie-s-d5dcab4c="">10</option><option value=25 data-rozie-s-d5dcab4c="">25</option><option value=50 data-rozie-s-d5dcab4c="">50</option><option value=100 data-rozie-s-d5dcab4c="">100`);
-/** A cell position as integers over the visible (display-order) model. */ /** The active (roving-focus) cell. A header cell reports `rowIndex: null` and `isHeader: true`. */ /** The rectangular cell-range selection. Both corners are `null` when there is no range. */ /** One data column offered to the `#groupBar` slot. */ /** One changed cell inside a row edit commit. */ /** The `activecell-change` payload. `isHeader` is set when the move landed on or left a header cell. */ /** The `cell-edit-commit` payload: one committed cell. */ /** The `row-edit-commit` payload: the row and every cell the save changed. */ /** The `filter-change` payload: `globalFilter` for the search box, `columnFilters` for a per-column filter. Exactly one key is set. */ /** The `history-change` payload: undo/redo availability. */ /** The `range-change` payload: the new range corners (both `null` when the range cleared). */ /** The `row-activate` payload. `row` is the original data object and `index` its position in the rendered model. */ /** The `visible-range-change` payload: the rendered row window, `end` exclusive. */ __rozieInjectStyle("DataTable-d5dcab4c", `[data-rozie-s-d5dcab4c]:host {
+/** A cell position as integers over the visible (display-order) model. */ /** The active (roving-focus) cell. A header cell reports `rowIndex: null` and `isHeader: true`. */ /** The rectangular cell-range selection. Both corners are `null` when there is no range. */ /** One data column offered to the `#groupBar` slot. */ /** One changed cell inside a row edit commit. */ /** The `activecell-change` payload. `isHeader` is set when the move landed on or left a header cell. */ /** The `cell-edit-commit` payload: one committed cell. */ /** The `row-edit-commit` payload: the row and every cell the save changed. */ /** The `filter-change` payload: `globalFilter` for the search box, `columnFilters` for a per-column filter. Exactly one key is set. */ /** The `history-change` payload: undo/redo availability. */ /** The held-view state (`holdView`): whether the view is held right now, and how many rows the held view disagrees with. */ /** The `range-change` payload: the new range corners (both `null` when the range cleared). */ /** The `row-activate` payload. `row` is the original data object and `index` its position in the rendered model. */ /** The `visible-range-change` payload: the rendered row window, `end` exclusive. */ __rozieInjectStyle("DataTable-d5dcab4c", `[data-rozie-s-d5dcab4c]:host {
   --rdt-color: var(--rozie-data-table-fg, var(--rdt-ds-fg));
   --rdt-select-accent: var(--rozie-data-table-select-accent, var(--rozie-data-table-accent, var(--rdt-ds-select-accent)));
   --rdt-border: 1px solid var(--rozie-data-table-border-color, var(--rdt-ds-border-color));
@@ -655,6 +885,7 @@ function DataTable(_props) {
 		singleClickEdit: false,
 		undoable: false,
 		undoLimit: 100,
+		holdView: false,
 		virtual: false,
 		estimateRowHeight: 40,
 		autoMeasure: false,
@@ -686,6 +917,7 @@ function DataTable(_props) {
 		"singleClickEdit",
 		"undoable",
 		"undoLimit",
+		"holdView",
 		"virtual",
 		"estimateRowHeight",
 		"autoMeasure",
@@ -708,6 +940,7 @@ function DataTable(_props) {
 		"onSelectionChange",
 		"onSortChange",
 		"onVisibilityChange",
+		"onViewStateChange",
 		"onVisibleRangeChange",
 		"groupBarSlot",
 		"selectAllSlot",
@@ -758,7 +991,9 @@ function DataTable(_props) {
 			redo,
 			canUndo,
 			canRedo,
-			clearHistory
+			clearHistory,
+			refreshView,
+			getViewState
 		});
 	});
 	const __ctx_data_table_columns = rozieContext("data-table:columns");
@@ -829,16 +1064,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,
@@ -873,6 +1150,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();
@@ -887,7 +1179,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({
@@ -903,6 +1205,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;
@@ -971,45 +1278,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;
@@ -1033,6 +1301,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;
@@ -1165,6 +1475,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) } : {},
@@ -1208,6 +1519,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) } : {},
@@ -1364,6 +1676,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, {
@@ -1987,13 +2302,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,
@@ -2021,15 +2383,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;
@@ -2406,6 +2772,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";
 	}
@@ -2938,6 +3321,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;
@@ -3111,13 +3495,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;
@@ -3126,6 +3559,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) {
@@ -3145,6 +3579,7 @@ function DataTable(_props) {
 			setActiveColIndex(0);
 			gridEmptyFallback = true;
 			clampRange(rowN - 1, colN - 1);
+			if (focusEmptyPark && (focusOnBody || editFollowPending)) recoverGridFocus("__header", 0, headerLeafLevel());
 			return;
 		}
 		if (gridEmptyFallback) {
@@ -3152,6 +3587,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;
@@ -3217,6 +3677,7 @@ function DataTable(_props) {
 		colVirtualizer._willUpdate();
 	}
 	let gridEmptyFallback = false;
+	let activeCellEngaged = false;
 	let rangeTransition = false;
 	let rangeClickPending = null;
 	let rangeActive = false;
@@ -3937,6 +4398,7 @@ function DataTable(_props) {
 		const colId = columnIdAt(rowIndex, colIndex);
 		if (colId == null || !columnEditable(colId)) return;
 		committedThisSession = false;
+		outsidePointerDown = false;
 		setInvalid("");
 		setEditingRowIndex(null);
 		setRowDraft({});
@@ -4387,12 +4849,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();
@@ -5334,6 +5798,9 @@ function DataTable(_props) {
 																						_el$64.addEventListener("change", ($event) => {
 																							onCellEditorInput(cell().column.id, $event);
 																						});
+																						use((el) => {
+																							rozieSelectValue(el, () => editorValueFor(cell().column.id));
+																						}, _el$64);
 																						insert(_el$64, createComponent(Key, {
 																							get each() {
 																								return editorOptionsOf(cell().column.id);
@@ -5347,7 +5814,6 @@ function DataTable(_props) {
 																							})()
 																						}));
 																						effect(() => setAttribute(_el$64, "aria-invalid", rozieAttr(invalidMsg() ? "true" : null)));
-																						effect(() => _el$64.value = editorValueFor(cell().column.id));
 																						return _el$64;
 																					}
 																				});
@@ -6215,6 +6681,9 @@ function DataTable(_props) {
 																											_el$122.addEventListener("change", ($event) => {
 																												onCellEditorInput(cell().column.id, $event);
 																											});
+																											use((el) => {
+																												rozieSelectValue(el, () => editorValueFor(cell().column.id));
+																											}, _el$122);
 																											insert(_el$122, createComponent(Key, {
 																												get each() {
 																													return editorOptionsOf(cell().column.id);
@@ -6228,7 +6697,6 @@ function DataTable(_props) {
 																												})()
 																											}));
 																											effect(() => setAttribute(_el$122, "aria-invalid", rozieAttr(invalidMsg() ? "true" : null)));
-																											effect(() => _el$122.value = editorValueFor(cell().column.id));
 																											return _el$122;
 																										}
 																									});
@@ -6544,6 +7012,9 @@ function DataTable(_props) {
 					_el$139.addEventListener("change", ($event) => {
 						onPageSizeChange($event);
 					});
+					use((el) => {
+						rozieSelectValue(el, () => pageSize());
+					}, _el$139);
 					effect((_p$) => {
 						var _v$97 = !canPrevPage(), _v$98 = !canNextPage();
 						_v$97 !== _p$.e && (_el$136.disabled = _p$.e = _v$97);
@@ -6553,7 +7024,6 @@ function DataTable(_props) {
 						e: void 0,
 						t: void 0
 					});
-					effect(() => _el$139.value = pageSize());
 					return _el$135;
 				}
 			}), null);
@@ -6588,6 +7058,8 @@ function Column(_props) {
 		expandable: false,
 		groupable: true,
 		aggregationFn: null,
+		filterFn: null,
+		sortingFn: null,
 		editable: false,
 		editor: "text",
 		editorOptions: [],
@@ -6603,12 +7075,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) {
@@ -6629,31 +7125,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(),
@@ -6665,6 +7154,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,
@@ -6702,12 +7193,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) : "";
@@ -6783,12 +7274,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) : "";
@@ -6873,12 +7364,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) : "";
@@ -6921,6 +7412,7 @@ function EditorSelect(_props) {
 			onChange($event);
 		});
 		use((el) => {
+			rozieSelectValue(el, () => draftValue());
 			selectElRef = el;
 		}, _el$);
 		insert(_el$, createComponent(Key, {
@@ -6936,7 +7428,6 @@ function EditorSelect(_props) {
 			})()
 		}));
 		effect(() => setAttribute(_el$, "aria-label", rozieAttr(a11yLabel())));
-		effect(() => _el$.value = draftValue());
 		return _el$;
 	})();
 }
@@ -6964,12 +7455,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));
@@ -7059,12 +7550,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);
@@ -7327,6 +7818,9 @@ function FilterSelect(_props) {
 		_el$.addEventListener("change", ($event) => {
 			onChange($event);
 		});
+		use((el) => {
+			rozieSelectValue(el, () => selectValue());
+		}, _el$);
 		insert(_el$, createComponent(Key, {
 			get each() {
 				return local.uniqueValues;
@@ -7340,7 +7834,6 @@ function FilterSelect(_props) {
 			})()
 		}), null);
 		effect(() => setAttribute(_el$, "aria-label", rozieAttr(a11yLabel())));
-		effect(() => _el$.value = selectValue());
 		return _el$;
 	})();
 }