@rozie-ui/data-table-lit 0.7.4 → 0.8.1

package/dist/index.mjs

@@ -96,6 +96,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) => {
@@ -104,6 +172,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, "\"\"") + "\"";
@@ -239,6 +325,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 \0@oxc-project+runtime@0.127.0/helpers/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -361,6 +591,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.singleClickEdit = false;
 		this.undoable = false;
 		this.undoLimit = 100;
+		this.holdView = false;
 		this.virtual = false;
 		this.estimateRowHeight = 40;
 		this.autoMeasure = false;
@@ -479,6 +710,48 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.undoStack = [];
 		this.redoStack = [];
 		this.restoringHistory = false;
+		this.holdCtrl = createHoldController();
+		this.heldFilteredRowModel = this.holdCtrl.wrapFiltered(getFilteredRowModel());
+		this.heldSortedRowModel = this.holdCtrl.wrapSorted(getSortedRowModel());
+		this.pendingViewChange = false;
+		this.pendingWrite = false;
+		this.prevRowIds = null;
+		this.lastFedData = null;
+		this.lastViewState = CLEAN_VIEW_STATE;
+		this.lastHoldSorting = null;
+		this.lastHoldColumnFilters = null;
+		this.lastHoldGlobalFilter = null;
+		this.holdFallbackWarned = false;
+		this.lastPageGrouping = null;
+		this.lastColumnSig = "";
+		this.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;
+		};
+		this.lastPropsData = null;
+		this.isExternalSwap = () => {
+			const pd = this.data;
+			if (pd === this.lastPropsData) return false;
+			return !(pd != null && pd[this.DATA_WRITE_TOKEN_KEY] != null);
+		};
+		this.syncHoldActive = (st) => {
+			const wanted = this.holdView === true;
+			const active = wanted && this.manual !== true && this.getSubRows == null && !(st.grouping || []).length;
+			const wasHolding = this.holdCtrl.isHolding();
+			this.holdCtrl.setActive(active);
+			if (wasHolding && !this.holdCtrl.isHolding()) this.pendingViewChange = true;
+			if (wanted && !active && !this.holdFallbackWarned) {
+				this.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.");
+			}
+		};
 		this.expandedTouched = false;
 		this.groupingActiveDefault = () => ((this.grouping != null ? this.grouping : this._groupingDefault.value) || []).length > 0;
 		this.effectiveColumnPinning = () => {
@@ -590,6 +863,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				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 : "",
 				...this.parseWidthToSize(c.width) != null ? { size: this.parseWidthToSize(c.width) } : {},
@@ -633,6 +907,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 					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 : "",
 					...this.parseWidthToSize(spec.width) != null ? { size: this.parseWidthToSize(spec.width) } : {},
@@ -831,6 +1106,9 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				this.recordSnapshot(this.currentData());
 				this.emitHistoryChangeIfEdged(prevU, prevR);
 			}
+			if (this.table) this.holdCtrl.capture(this.table);
+			this.holdCtrl.noteWrite(this.currentData() || [], Array.isArray(next) ? next : []);
+			this.pendingWrite = true;
 			const fresh = Array.isArray(next) ? next.slice() : next;
 			try {
 				Object.defineProperty(fresh, this.DATA_WRITE_TOKEN_KEY, {
@@ -1434,13 +1712,60 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			if (this.selectionMode === "none") return false;
 			return this.lazyRowsActive() ? (row) => !this.rowIsLazyPlaceholder(row) : true;
 		};
+		this.writePaginationSoon = (next) => {
+			if (!this.programmatic) {
+				this.writePagination(next);
+				return;
+			}
+			const run = () => this.writePagination(next);
+			if (typeof queueMicrotask !== "undefined") queueMicrotask(run);
+			else Promise.resolve().then(run);
+		};
 		this.reFeed = () => {
 			if (!this.table) return;
+			const st0 = this.currentState();
+			this.syncHoldActive(st0);
+			let st = st0;
+			let pageReset = null;
+			const groupingChanged = st0.grouping !== this.lastPageGrouping;
+			this.lastPageGrouping = st0.grouping;
+			const viewChanged = st0.sorting !== this.lastHoldSorting || st0.columnFilters !== this.lastHoldColumnFilters || st0.globalFilter !== this.lastHoldGlobalFilter;
+			if (viewChanged) {
+				this.lastHoldSorting = st0.sorting;
+				this.lastHoldColumnFilters = st0.columnFilters;
+				this.lastHoldGlobalFilter = st0.globalFilter;
+				this.holdCtrl.release();
+				this.pendingViewChange = true;
+			}
+			if ((viewChanged || groupingChanged) && this.manual !== true && st0.pagination && st0.pagination.pageIndex !== 0) {
+				pageReset = {
+					pageIndex: 0,
+					pageSize: st0.pagination.pageSize
+				};
+				st = {
+					...st0,
+					pagination: pageReset
+				};
+			}
+			const cols = this.tableColumns();
+			const colSig = this.columnSetSignature(cols);
+			if (colSig !== this.lastColumnSig) {
+				this.lastColumnSig = colSig;
+				st = {
+					...st,
+					sorting: [...st.sorting || []],
+					columnFilters: [...st.columnFilters || []]
+				};
+			}
+			if (this.holdCtrl.isHolding() && this.isExternalSwap()) this.holdCtrl.release();
+			if (this.pendingWrite && this.isExternalSwap()) this.pendingWrite = false;
 			this.table.setOptions((prev) => ({
 				...prev,
 				data: this.feedData(),
-				columns: this.tableColumns(),
-				state: this.currentState(),
+				columns: cols,
+				state: st,
+				getFilteredRowModel: this.heldFilteredRowModel,
+				getSortedRowModel: this.heldSortedRowModel,
 				enableRowSelection: this.rowSelectionOption(),
 				enableMultiRowSelection: this.selectionMode === "multiple",
 				rowCount: this.rowCount ?? void 0,
@@ -1468,15 +1793,19 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				onColumnSizingInfoChange: this.onColumnSizingInfoChangeCb
 			}));
 			if (this.refreshRowModel) this.refreshRowModel();
+			if (pageReset) this.writePaginationSoon(pageReset);
 		};
-		this.lastPropsData = null;
 		this.maybeClearHistoryOnExternalSwap = () => {
 			const pd = this.data;
 			if (pd === this.lastPropsData) return;
 			this.lastPropsData = pd;
-			if (!this.undoable) return;
 			if (pd != null && pd[this.DATA_WRITE_TOKEN_KEY] != null) return;
-			this.clearHistory();
+			this.pendingWrite = false;
+			if (this.holdCtrl.isHolding()) {
+				this.holdCtrl.release();
+				if (this.refreshRowModel) this.refreshRowModel();
+			}
+			if (this.undoable) this.clearHistory();
 		};
 		this.lastData = null;
 		this.lastDataLen = -1;
@@ -1815,6 +2144,21 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			return abs - this.pageRowOffset();
 		};
 		this.cut = () => this.cutRange();
+		this.refreshView = () => {
+			this.holdCtrl.release();
+			this.pendingViewChange = true;
+			if (!this.table) return;
+			this.table.setOptions((p) => ({
+				...p,
+				state: {
+					...p.state,
+					columnFilters: [...p.state.columnFilters || []],
+					sorting: [...p.state.sorting || []]
+				}
+			}));
+			if (this.refreshRowModel) this.refreshRowModel();
+		};
+		this.getViewState = () => this.holdCtrl.viewState(this.table);
 		this.isGrid = () => this.interactionMode === "grid";
 		this.tableRole = () => this.isGrid() ? "grid" : "table";
 		this.cellRole = () => this.isGrid() ? "gridcell" : "cell";
@@ -2325,6 +2669,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			if (!tgt || !tgt.closest) return;
 			const cellEl = tgt.closest("[data-grid-cell]");
 			if (!cellEl) return;
+			this.activeCellEngaged = true;
 			const rowAttr = cellEl.getAttribute("data-row");
 			const colAttr = cellEl.getAttribute("data-col-index");
 			if (rowAttr == null || colAttr == null) return;
@@ -2502,13 +2847,63 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			if (typeof requestAnimationFrame === "function") requestAnimationFrame(tryFocus);
 			else setTimeout(tryFocus, 0);
 		};
-		this.clampActiveCell = (rowCount, colCount) => {
+		this.followOpenEditors = (prevIds, nextIds) => {
+			if (!prevIds || sameIdSequence(prevIds, nextIds)) return false;
+			let owns = false;
+			const er = this._editingRow.value;
+			if (er >= 0) {
+				const ef = resolveFollow(prevIds, er, nextIds, true);
+				if (ef.kind === "move") {
+					this._editingRow.value = ef.index;
+					this.focusEditorWhenReady(ef.index, this._editingCol.value, false);
+					owns = true;
+				} else if (ef.kind !== "stay") {
+					this.committedThisSession = true;
+					this.editTransition = true;
+					this.endEdit();
+					this.editTransition = false;
+				}
+			}
+			const rr = this._editingRowIndex.value;
+			if (rr != null && rr >= 0) {
+				const rf = resolveFollow(prevIds, rr, nextIds, true);
+				if (rf.kind === "move") {
+					this._editingRowIndex.value = rf.index;
+					owns = true;
+				} else if (rf.kind !== "stay") {
+					this.editTransition = true;
+					this.endRowEdit();
+					this.editTransition = false;
+				}
+			}
+			return owns;
+		};
+		this.rowIdInModel = (index) => {
+			const row = this.windowSource()[index];
+			return row ? row.id : null;
+		};
+		this.modelIndexOfRowId = (id) => {
+			const rows = this.windowSource();
+			for (let i = 0; i < rows.length; i++) if (rows[i].id === id) return i;
+			return -1;
+		};
+		this.followActiveCell = (prevIds, nextIds, viewChangeOrWrite, rowCount, colCount, editFollowPending = false) => {
+			const editorOwnsFocus = this.followOpenEditors(prevIds, nextIds);
+			if (!this.isGrid()) return;
+			let follow = null;
+			if (this.activeCellEngaged && rowCount > 0 && !this._activeIsHeader.value && !this.gridEmptyFallback) follow = resolveFollow(prevIds, this._activeRow.value, nextIds, viewChangeOrWrite);
+			const focusEmptyPark = rowCount <= 0 && viewChangeOrWrite;
+			this.clampActiveCell(rowCount, colCount, follow, editFollowPending || editorOwnsFocus, focusEmptyPark);
+			if (viewChangeOrWrite && !sameIdSequence(prevIds, nextIds)) this.clearRange();
+		};
+		this.clampActiveCell = (rowCount, colCount, follow = null, editFollowPending = false, focusEmptyPark = false) => {
 			if (!this.isGrid()) return;
 			const colN = colCount != null ? colCount : this.visibleColCount();
 			const rowN = rowCount != null ? rowCount : this.bodyRowCount();
 			let recoverFocus = false;
 			let doomedRow = -1;
 			let doomedCol = 0;
+			let focusOnBody = false;
 			if (this.gridRoot) {
 				const rootNode = this.gridRoot.getRootNode ? this.gridRoot.getRootNode() : null;
 				const focusedEl = rootNode ? rootNode.activeElement : null;
@@ -2517,6 +2912,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 					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) {
@@ -2536,6 +2932,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				this._activeColIndex.value = 0;
 				this.gridEmptyFallback = true;
 				this.clampRange(rowN - 1, colN - 1);
+				if (focusEmptyPark && (focusOnBody || editFollowPending)) this.recoverGridFocus("__header", 0, this.headerLeafLevel());
 				return;
 			}
 			if (this.gridEmptyFallback) {
@@ -2543,6 +2940,39 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				this._activeIsHeader.value = false;
 				this._activeRow.value = 0;
 			}
+			if (follow && follow.kind === "move") {
+				const nextRow = follow.index;
+				this._activeRow.value = nextRow;
+				this.clampRange(rowN - 1, colN - 1);
+				this.dispatchEvent(new CustomEvent("activecell-change", {
+					detail: {
+						rowIndex: this.toAbsRow(nextRow),
+						colIndex: col,
+						isHeader: false
+					},
+					bubbles: true,
+					composed: true
+				}));
+				if (focusOnBody && !editFollowPending) this.focusCellWhenReady(nextRow, col);
+				return;
+			}
+			if (follow && follow.kind === "park") {
+				const level = this.headerLeafLevel();
+				this._activeIsHeader.value = true;
+				this._activeHeaderLevel.value = level;
+				this.clampRange(rowN - 1, colN - 1);
+				this.dispatchEvent(new CustomEvent("activecell-change", {
+					detail: {
+						rowIndex: null,
+						colIndex: col,
+						isHeader: true
+					},
+					bubbles: true,
+					composed: true
+				}));
+				if (focusOnBody || editFollowPending) this.recoverGridFocus("__header", col, level);
+				return;
+			}
 			if (!this._activeIsHeader.value) {
 				const lastRow = rowN - 1;
 				const maxRow = lastRow < 0 ? 0 : lastRow;
@@ -2606,6 +3036,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this.colVirtualizer._willUpdate();
 		};
 		this.gridEmptyFallback = false;
+		this.activeCellEngaged = false;
 		this.rangeTransition = false;
 		this.rangeClickPending = null;
 		this.rangeActive = false;
@@ -3329,6 +3760,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			const colId = this.columnIdAt(rowIndex, colIndex);
 			if (colId == null || !this.columnEditable(colId)) return;
 			this.committedThisSession = false;
+			this.outsidePointerDown = false;
 			this.setInvalid("");
 			this._editingRowIndex.value = null;
 			this._rowDraft.value = {};
@@ -3784,12 +4216,14 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				const fromRow = this._editingRow.value;
 				const fromCol = this._editingCol.value;
 				const target = e.shiftKey ? this.prevEditableCell(fromRow, fromCol) : this.nextEditableCell(fromRow, fromCol);
+				const targetRowId = target ? this.rowIdInModel(target.row) : null;
 				const committed = this.commitEdit(void 0, true);
-				if (committed && target) {
-					this._activeRow.value = target.row;
+				const advanceRow = targetRowId != null ? this.modelIndexOfRowId(targetRowId) : -1;
+				if (committed && target && advanceRow >= 0) {
+					this._activeRow.value = advanceRow;
 					this._activeColIndex.value = target.col;
-					this.beginEdit(target.row, target.col, null);
-				} else if (committed) this.focusCellWhenReady(fromRow, fromCol);
+					this.beginEdit(advanceRow, target.col, null);
+				} else if (committed && target) {} else if (committed) this.focusCellWhenReady(fromRow, fromCol);
 			} else if (key === "Escape") {
 				e.preventDefault();
 				this.cancelEdit();
@@ -4678,6 +5112,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				this.columnOrder,
 				this.columnPinning,
 				this.selectionMode,
+				this.holdView,
 				(this.data || []).length,
 				this.data,
 				this._dataDefault.value,
@@ -4734,13 +5169,15 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		}));
 		this._dataDefault.value = this.data || [];
 		this.seedColumnPinning();
+		const cols0 = this.tableColumns();
+		this.lastColumnSig = this.columnSetSignature(cols0);
 		this.table = createTable({
 			data: this.feedData(),
-			columns: this.tableColumns(),
+			columns: cols0,
 			state: this.currentState(),
 			getCoreRowModel: getCoreRowModel(),
-			getSortedRowModel: getSortedRowModel(),
-			getFilteredRowModel: getFilteredRowModel(),
+			getSortedRowModel: this.heldSortedRowModel,
+			getFilteredRowModel: this.heldFilteredRowModel,
 			getPaginationRowModel: getPaginationRowModel(),
 			getExpandedRowModel: getExpandedRowModel(),
 			getSubRows: this.getSubRows || void 0,
@@ -4775,6 +5212,21 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			renderFallbackValue: null,
 			onStateChange: () => {}
 		});
+		this.table.resetPageIndex = () => {
+			if (!this.table) return;
+			const pg = this.table.getState().pagination;
+			this.writePagination({
+				pageIndex: pg.pageIndex,
+				pageSize: pg.pageSize
+			});
+		};
+		const st0 = this.currentState();
+		this.lastHoldSorting = st0.sorting;
+		this.lastHoldColumnFilters = st0.columnFilters;
+		this.lastHoldGlobalFilter = st0.globalFilter;
+		this.lastPageGrouping = st0.grouping;
+		this.syncHoldActive(st0);
+		this.lastPropsData = this.data;
 		this.refreshRowModel = () => {
 			if (!this.table) return;
 			const nextRows = this.windowSource().slice();
@@ -4790,7 +5242,16 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this.remeasureColumnWindow();
 			const nextRowCount = nextRows.length;
 			const nextColCount = nextRows.length ? nextRows[0].getVisibleCells().length : nextGroups.length ? (nextGroups[nextGroups.length - 1].headers || []).length : 0;
-			this.clampActiveCell(nextRowCount, nextColCount);
+			const nextIds = nextRows.map((r) => r.id);
+			const fedData = this.table.options.data;
+			const dataChanged = fedData !== this.lastFedData;
+			this.lastFedData = fedData;
+			const viewChangeOrWrite = this.pendingViewChange || this.pendingWrite && dataChanged;
+			const swapWithoutIds = dataChanged && !this.pendingWrite && !this.pendingViewChange && this.table.options.getRowId == null;
+			this.pendingViewChange = false;
+			if (dataChanged) this.pendingWrite = false;
+			this.followActiveCell(swapWithoutIds ? null : this.prevRowIds, nextIds, viewChangeOrWrite, nextRowCount, nextColCount, this.pendingEditFollow != null);
+			this.prevRowIds = nextIds;
 			const pgState = this.table.getState().pagination;
 			const pc = this.table.getPageCount();
 			if (pc > 0 && pgState.pageIndex > pc - 1) this.writePagination({
@@ -4806,6 +5267,15 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this.syncIndeterminate();
 			if (typeof queueMicrotask !== "undefined") queueMicrotask(this.syncIndeterminate);
 			else Promise.resolve().then(this.syncIndeterminate);
+			const vs = this.holdCtrl.viewState(this.table);
+			if (!viewStatesEqual(vs, this.lastViewState)) {
+				this.lastViewState = vs;
+				this.dispatchEvent(new CustomEvent("view-state-change", {
+					detail: vs,
+					bubbles: true,
+					composed: true
+				}));
+			}
 		};
 		this.refreshRowModel();
 		this.gridRoot = this._ref__rozieRoot ? this._ref__rozieRoot.querySelector(".rozie-data-table") : null;
@@ -4853,7 +5323,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.announceState.globalFilter = this.effectiveGlobalFilter();
 	}
 	updated(changedProperties) {
-		if (this.__rozieFirstUpdateDone && (changedProperties.has("rowCount") || changedProperties.has("pageCount") || changedProperties.has("expandable") || changedProperties.has("groupable") || changedProperties.has("selectionMode") || changedProperties.has("columns"))) {
+		if (this.__rozieFirstUpdateDone && (changedProperties.has("rowCount") || changedProperties.has("pageCount") || changedProperties.has("expandable") || changedProperties.has("groupable") || changedProperties.has("selectionMode") || changedProperties.has("holdView") || changedProperties.has("columns"))) {
 			const __watchVal = untracked(() => [
 				this.sorting,
 				this.globalFilter,
@@ -4871,6 +5341,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				this.columnOrder,
 				this.columnPinning,
 				this.selectionMode,
+				this.holdView,
 				(this.data || []).length,
 				this.data,
 				this._dataDefault.value,
@@ -6065,6 +6536,11 @@ __decorate([property({
 	reflect: true,
 	attribute: "undo-limit"
 })], DataTable.prototype, "undoLimit", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "hold-view"
+})], DataTable.prototype, "holdView", void 0);
 __decorate([property({ converter: { fromAttribute: (v) => v === null ? false : v === "true" ? true : v === "false" ? false : v === "" ? true : v } })], DataTable.prototype, "virtual", void 0);
 __decorate([property({
 	type: Number,
@@ -6165,6 +6641,8 @@ let Column$1 = class Column extends SignalWatcher(LitElement) {
 		this.expandable = false;
 		this.groupable = true;
 		this.aggregationFn = null;
+		this.filterFn = null;
+		this.sortingFn = null;
 		this.editable = false;
 		this.editor = "text";
 		this.editorOptions = [];
@@ -6178,23 +6656,36 @@ let Column$1 = class Column extends SignalWatcher(LitElement) {
 		this._rozieTornDown = false;
 		this.reg = null;
 		this.registered = false;
-		this.colId = () => this.id !== "" ? this.id : this.field;
-		this.buildSpec = () => ({
-			id: this.colId(),
-			field: this.field !== "" ? this.field : this.colId(),
-			header: this.header,
-			sortable: this.sortable,
-			filterable: this.filterable,
-			pinned: this.pinned,
-			width: this.width,
-			expandable: this.expandable,
-			groupable: this.groupable,
-			aggregationFn: this.aggregationFn,
-			editable: this.editable,
-			editor: this.editor,
-			editorOptions: this.editorOptions,
-			validate: this.validate
+		this.latestFilterFn = null;
+		this.latestSortingFn = null;
+		this.filterTrampoline = Object.assign((...args) => typeof this.latestFilterFn === "function" ? this.latestFilterFn(...args) : true, {
+			autoRemove: (value, column) => typeof this.latestFilterFn === "function" && typeof this.latestFilterFn.autoRemove === "function" ? this.latestFilterFn.autoRemove(value, column) : false,
+			resolveFilterValue: (value) => typeof this.latestFilterFn === "function" && typeof this.latestFilterFn.resolveFilterValue === "function" ? this.latestFilterFn.resolveFilterValue(value) : value
 		});
+		this.sortingTrampoline = (...args) => typeof this.latestSortingFn === "function" ? this.latestSortingFn(...args) : 0;
+		this.colId = () => this.id !== "" ? this.id : this.field;
+		this.buildSpec = () => {
+			this.latestFilterFn = this.filterFn;
+			this.latestSortingFn = this.sortingFn;
+			return {
+				id: this.colId(),
+				field: this.field !== "" ? this.field : this.colId(),
+				header: this.header,
+				sortable: this.sortable,
+				filterable: this.filterable,
+				pinned: this.pinned,
+				width: this.width,
+				expandable: this.expandable,
+				groupable: this.groupable,
+				aggregationFn: this.aggregationFn,
+				filterFn: typeof this.filterFn === "function" ? this.filterTrampoline : this.filterFn,
+				sortingFn: typeof this.sortingFn === "function" ? this.sortingTrampoline : this.sortingFn,
+				editable: this.editable,
+				editor: this.editor,
+				editorOptions: this.editorOptions,
+				validate: this.validate
+			};
+		};
 	}
 	static {
 		this.styles = css`
@@ -6215,9 +6706,11 @@ let Column$1 = class Column extends SignalWatcher(LitElement) {
 		}
 	}
 	updated(changedProperties) {
-		if (this.__rozieFirstUpdateDone && (changedProperties.has("id") || changedProperties.has("field") || changedProperties.has("header") || changedProperties.has("sortable") || changedProperties.has("filterable") || changedProperties.has("pinned") || changedProperties.has("width") || changedProperties.has("expandable") || changedProperties.has("groupable") || changedProperties.has("aggregationFn") || changedProperties.has("editable") || changedProperties.has("editor") || changedProperties.has("editorOptions") || changedProperties.has("validate"))) {
-			this.id, this.field, this.header, this.sortable, this.filterable, this.pinned, this.width, this.expandable, this.groupable, this.aggregationFn, this.editable, this.editor, this.editorOptions, this.validate;
+		if (this.__rozieFirstUpdateDone && (changedProperties.has("id") || changedProperties.has("field") || changedProperties.has("header") || changedProperties.has("sortable") || changedProperties.has("filterable") || changedProperties.has("pinned") || changedProperties.has("width") || changedProperties.has("expandable") || changedProperties.has("groupable") || changedProperties.has("aggregationFn") || changedProperties.has("filterFn") || changedProperties.has("sortingFn") || changedProperties.has("editable") || changedProperties.has("editor") || changedProperties.has("editorOptions") || changedProperties.has("validate"))) {
+			this.id, this.field, this.header, this.sortable, this.filterable, this.pinned, this.width, this.expandable, this.groupable, this.aggregationFn, this.filterFn, this.sortingFn, this.editable, this.editor, this.editorOptions, this.validate;
 			(() => {
+				this.latestFilterFn = this.filterFn;
+				this.latestSortingFn = this.sortingFn;
 				if (this.reg) this.reg.registerColumn(this.colId(), this.buildSpec());
 			})();
 		}
@@ -6284,6 +6777,14 @@ __decorate([property({
 	type: String,
 	attribute: "aggregation-fn"
 })], Column$1.prototype, "aggregationFn", void 0);
+__decorate([property({
+	type: String,
+	attribute: "filter-fn"
+})], Column$1.prototype, "filterFn", void 0);
+__decorate([property({
+	type: String,
+	attribute: "sorting-fn"
+})], Column$1.prototype, "sortingFn", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true