@vueye-table/vue 3.0.0-alpha.1 → 3.0.0-alpha.11

package/dist/index.js

@@ -1,5 +1,5 @@
-import { computed, getCurrentScope, inject, onScopeDispose, provide, shallowRef, toRaw, toValue, watch } from "vue";
-import { clampPosition, createTable, gridCommand, moveSelection, rangeContains, selectCell, selectionRange } from "@vueye-table/core";
+import { computed, getCurrentInstance, getCurrentScope, inject, nextTick, onMounted, onScopeDispose, provide, shallowReactive, shallowRef, toRaw, toValue, unref, watch, watchEffect } from "vue";
+import { clampPosition, createTable, createVirtualizer, formatValue, getRowItemKey, gridCommand, moveSelection, rangeContains, selectCell, selectionRange, typeOf } from "@vueye-table/core";
 
 //#region src/injection.ts
 const tableKey = Symbol("vueye-table");
@@ -25,19 +25,193 @@ function injectDataGrid() {
 	return inject(gridKey, void 0);
 }
 
+//#endregion
+//#region src/row-draft.ts
+function rejectedDraft(rowKey, message) {
+	return refused([Object.freeze({
+		code: "stale_draft",
+		rowKey,
+		message
+	})]);
+}
+function refused(issues) {
+	return Object.freeze({
+		status: "rejected",
+		changes: Object.freeze([]),
+		rowChanges: Object.freeze([]),
+		pendingCells: Object.freeze([]),
+		issues: Object.freeze([...issues])
+	});
+}
+function equal(left, right, seen = /* @__PURE__ */ new WeakMap()) {
+	if (Object.is(left, right)) return true;
+	if (!left || !right || typeof left !== "object" || typeof right !== "object") return false;
+	if (left instanceof Date || right instanceof Date) return left instanceof Date && right instanceof Date && Object.is(left.getTime(), right.getTime());
+	if (Array.isArray(left) && Array.isArray(right) && left.length !== right.length) return false;
+	if (Object.getPrototypeOf(left) !== Object.getPrototypeOf(right)) return false;
+	if (seen.has(left)) return seen.get(left) === right;
+	seen.set(left, right);
+	if (left instanceof Map && right instanceof Map) return equal([...left], [...right], seen);
+	if (left instanceof Set && right instanceof Set) return equal([...left], [...right], seen);
+	if (left instanceof RegExp && right instanceof RegExp) return left.source === right.source && left.flags === right.flags;
+	if (left instanceof ArrayBuffer && right instanceof ArrayBuffer) return equal([...new Uint8Array(left)], [...new Uint8Array(right)], seen);
+	if (ArrayBuffer.isView(left) && ArrayBuffer.isView(right)) return equal([...new Uint8Array(left.buffer, left.byteOffset, left.byteLength)], [...new Uint8Array(right.buffer, right.byteOffset, right.byteLength)], seen);
+	const keys = Object.keys(left);
+	return keys.length === Object.keys(right).length && keys.every((key) => Object.hasOwn(right, key) && equal(Reflect.get(left, key), Reflect.get(right, key), seen));
+}
+/** Internal factory; disposal is shared with the binding's single engine subscription. */
+function createRowDraft(table, key, register) {
+	const snapshot = table.getSnapshot();
+	const original = snapshot.getRow(key)?.original;
+	const columns = snapshot.allColumns;
+	const values = shallowReactive(Object.create(null));
+	const initial = /* @__PURE__ */ new Map();
+	const inputs = /* @__PURE__ */ new Map();
+	const copyIssues = /* @__PURE__ */ new Map();
+	const issues = shallowRef([]);
+	const status = shallowRef("editing");
+	for (const column of columns) {
+		if (original === void 0) break;
+		try {
+			if (!column.isEditable(original)) continue;
+			const value = column.getValue(original);
+			initial.set(column.id, value);
+			values[column.id] = structuredClone(toRaw(value));
+		} catch {
+			copyIssues.set(column.id, Object.freeze({
+				code: "invalid_value",
+				rowKey: key,
+				column: column.id,
+				message: "This value cannot be copied into a row draft. Replace it explicitly before saving."
+			}));
+			issues.value = [...copyIssues.values()];
+		}
+	}
+	let saving;
+	let disposePending;
+	let disposed = false;
+	const stale = () => rejectedDraft(key, "This draft is closed, or its row or columns changed. Open a new draft.");
+	const unregister = register(() => {
+		disposed = true;
+		const result = stale();
+		status.value = "stale";
+		issues.value = result.issues;
+		disposePending?.(result);
+	});
+	return Object.freeze({
+		rowKey: key,
+		values,
+		get issues() {
+			return issues.value;
+		},
+		get status() {
+			return status.value;
+		},
+		get pending() {
+			return status.value === "saving";
+		},
+		setInput(column, input) {
+			if (status.value === "editing") inputs.set(column, input);
+		},
+		setValue(column, value) {
+			if (status.value === "editing") {
+				values[column] = value;
+				inputs.delete(column);
+			}
+		},
+		save() {
+			if (saving) return saving;
+			if (status.value !== "editing" || disposed || original === void 0 || table.getSnapshot().getRow(key)?.original !== original || columns.some((column) => table.getSnapshot().getColumn(column.id)?.definition !== column.definition)) {
+				const result = stale();
+				issues.value = result.issues;
+				status.value = "stale";
+				unregister();
+				return Promise.resolve(result);
+			}
+			const edits = [];
+			const uncopied = [...copyIssues.values()].filter((problem) => !Object.hasOwn(values, problem.column) && !inputs.has(problem.column));
+			if (uncopied.length) {
+				issues.value = Object.freeze(uncopied);
+				return Promise.resolve(refused(issues.value));
+			}
+			for (const column of /* @__PURE__ */ new Set([...Object.keys(values), ...inputs.keys()])) try {
+				const value = toRaw(values[column]);
+				if (inputs.has(column)) edits.push({
+					rowKey: key,
+					column,
+					input: inputs.get(column)
+				});
+				else if (!initial.has(column) || !equal(value, initial.get(column))) edits.push(typeof value === "string" ? {
+					rowKey: key,
+					column,
+					input: value
+				} : {
+					rowKey: key,
+					column,
+					value: value !== null && typeof value === "object" ? structuredClone(value) : value
+				});
+			} catch {
+				issues.value = Object.freeze([Object.freeze({
+					code: "invalid_value",
+					rowKey: key,
+					column,
+					message: "This draft value cannot be copied for submission. Replace it before saving."
+				})]);
+				return Promise.resolve(refused(issues.value));
+			}
+			status.value = "saving";
+			const result = table.edit(edits, { expectedRows: /* @__PURE__ */ new Map([[key, original]]) });
+			if (disposed) return Promise.resolve(stale());
+			const cancelled = new Promise((resolve) => {
+				disposePending = resolve;
+			});
+			saving = Promise.race([result.completion ?? Promise.resolve(result), cancelled]).then((final) => {
+				issues.value = final.issues;
+				status.value = disposed || final.issues.some((problem) => problem.code === "stale_draft") ? "stale" : final.status === "rejected" ? "editing" : "saved";
+				if (status.value !== "editing") unregister();
+				saving = void 0;
+				disposePending = void 0;
+				return final;
+			});
+			return saving;
+		},
+		cancel() {
+			if (status.value !== "editing") return false;
+			status.value = "cancelled";
+			unregister();
+			return true;
+		}
+	});
+}
+
 //#endregion
 //#region src/use-data-grid.ts
-function useDataGrid(table) {
+function useDataGrid(table, gridOptions = {}) {
 	const selection = shallowRef();
 	const editor = shallowRef();
 	const lastResult = shallowRef();
+	let editing;
+	let resultToken;
+	const invalidEditors = /* @__PURE__ */ new WeakSet();
+	const editorSpecs = /* @__PURE__ */ new WeakMap();
+	let submitting;
+	const record = (result) => {
+		const token = {};
+		resultToken = token;
+		lastResult.value = result;
+		result.completion?.then((final) => {
+			if (resultToken === token) lastResult.value = final;
+		});
+		return result;
+	};
 	const bounds = computed(() => ({
 		rows: table.rows.length,
 		columns: table.columns.length
 	}));
 	const range = computed(() => selection.value ? selectionRange(selection.value) : void 0);
 	const same = (left, right) => left !== void 0 && left.row === right.row && left.column === right.column;
-	watch(bounds, (next) => {
+	watch(() => table.snapshot, () => {
+		const next = bounds.value;
 		const current = selection.value;
 		if (current && (next.rows === 0 || next.columns === 0)) selection.value = void 0;
 		else if (current) {
@@ -48,9 +222,32 @@ function useDataGrid(table) {
 				focus
 			};
 		}
-		const position = editor.value?.position;
-		if (position && (position.row >= next.rows || position.column >= next.columns)) editor.value = void 0;
-	});
+		const active = editing;
+		if (active && editor.value) {
+			const row = table.rows.findIndex((candidate) => candidate.key === active.key);
+			const column = table.columns.findIndex((candidate) => candidate.id === active.column.id);
+			if (row < 0 || column < 0 || !submitting && table.getRow(active.key)?.original !== active.original || table.getColumn(active.column.id)?.definition !== active.column.definition) {
+				editor.value = void 0;
+				editing = void 0;
+				record(rejectedDraft(active.key, "The edited cell changed or left the visible grid. Start a new edit."));
+			} else if (!same(editor.value.position, {
+				row,
+				column
+			})) {
+				editor.value = {
+					...editor.value,
+					position: {
+						row,
+						column
+					}
+				};
+				selection.value = selectCell({
+					row,
+					column
+				});
+			}
+		}
+	}, { flush: "sync" });
 	const cellAt = (position) => {
 		const row = table.rows[position.row];
 		const column = table.columns[position.column];
@@ -68,6 +265,7 @@ function useDataGrid(table) {
 		return selection.value;
 	};
 	const grid = {
+		table,
 		get selection() {
 			return selection.value;
 		},
@@ -82,10 +280,60 @@ function useDataGrid(table) {
 		},
 		bounds,
 		cellAt,
+		editorFor(position) {
+			const cell = cellAt(position);
+			if (!cell || !cell.column.isEditable(cell.row.original)) return void 0;
+			const spec = cell.column.definition.editor;
+			const cached = editorSpecs.get(cell.column.definition);
+			if (cached) return cached;
+			if (spec && [
+				"text",
+				"number",
+				"select",
+				"checkbox",
+				"date"
+			].includes(spec.kind) && (spec.options === void 0 || Array.isArray(spec.options) && spec.options.every((value) => value === null || [
+				"string",
+				"number",
+				"boolean"
+			].includes(typeof value)))) {
+				const resolved = Object.freeze({
+					kind: spec.kind,
+					...spec.options ? { options: Object.freeze([...spec.options]) } : {},
+					...spec.min !== void 0 ? { min: spec.min } : {},
+					...spec.max !== void 0 ? { max: spec.max } : {},
+					...spec.maxLength !== void 0 ? { maxLength: spec.maxLength } : {},
+					...spec.pattern !== void 0 ? { pattern: spec.pattern } : {}
+				});
+				editorSpecs.set(cell.column.definition, resolved);
+				return resolved;
+			}
+			if (spec) {
+				if (!invalidEditors.has(cell.column.definition)) {
+					invalidEditors.add(cell.column.definition);
+					record(Object.freeze({
+						status: "rejected",
+						changes: Object.freeze([]),
+						rowChanges: Object.freeze([]),
+						pendingCells: Object.freeze([]),
+						issues: Object.freeze([Object.freeze({
+							code: "invalid_value",
+							rowKey: cell.row.key,
+							column: cell.column.id,
+							message: "Invalid editor metadata; text metadata is used."
+						})])
+					}));
+				}
+				return Object.freeze({ kind: "text" });
+			}
+			const type = cell.column.definition.type ?? typeOf(cell.row.getValue(cell.column.id)) ?? "text";
+			return Object.freeze({ kind: type === "boolean" ? "checkbox" : type });
+		},
 		isFocused: (position) => same(selection.value?.focus, position),
 		isSelected: (position) => range.value ? rangeContains(range.value, position) : false,
 		isEditing: (position) => same(editor.value?.position, position),
 		focusCell(position, { extend = false } = {}) {
+			if (submitting) return;
 			const target = clampPosition(position, bounds.value);
 			if (editor.value && !same(editor.value.position, target)) grid.commitEdit();
 			selection.value = extend && selection.value ? {
@@ -110,12 +358,21 @@ function useDataGrid(table) {
 			};
 		},
 		startEdit(initial) {
+			if (submitting) return false;
 			const focus = ensureSelection()?.focus;
 			const cell = focus ? cellAt(focus) : void 0;
 			if (!focus || !cell || !cell.column.isEditable(cell.row.original)) return false;
+			const value = cell.row.getValue(cell.column.id);
+			const kind = grid.editorFor(focus)?.kind;
+			const text = kind === "date" && value instanceof Date ? Number.isFinite(value.getTime()) ? value.toISOString().slice(0, 10) : "" : kind && kind !== "text" ? value === null || value === void 0 ? "" : formatValue(value) : cell.row.getDisplay(cell.column.id);
 			editor.value = {
 				position: focus,
-				draft: initial ?? cell.row.getDisplay(cell.column.id)
+				draft: initial ?? text
+			};
+			editing = {
+				key: cell.row.key,
+				column: cell.column,
+				original: cell.row.original
 			};
 			return true;
 		},
@@ -128,43 +385,104 @@ function useDataGrid(table) {
 		commitEdit(then) {
 			const current = editor.value;
 			if (!current) return;
-			const cell = cellAt(current.position);
+			const active = editing;
 			editor.value = void 0;
-			if (!cell) return;
-			const result = table.edit({
-				rowKey: cell.row.key,
-				column: cell.column.id,
+			editing = void 0;
+			if (!active) return;
+			const result = record(table.edit({
+				rowKey: active.key,
+				column: active.column.id,
 				input: current.draft
-			});
-			lastResult.value = result;
+			}, { expectedRows: /* @__PURE__ */ new Map([[active.key, active.original]]) }));
 			if (then) grid.move(then);
 			return result;
 		},
+		submitEdit(edit, then) {
+			const current = editor.value;
+			const active = editing;
+			if (!current || !active || submitting) return void 0;
+			const token = {};
+			submitting = token;
+			const cell = {
+				rowKey: active.key,
+				column: active.column.id,
+				...edit ?? { input: current.draft }
+			};
+			const result = record(table.edit(cell, { expectedRows: /* @__PURE__ */ new Map([[active.key, active.original]]) }));
+			const settle = (final) => {
+				if (submitting !== token) return;
+				submitting = void 0;
+				if (editing !== active) return;
+				if (final.status !== "rejected" || final.issues.some((problem) => problem.code === "stale_draft")) {
+					editor.value = void 0;
+					editing = void 0;
+					if (then) grid.move(then);
+				} else editing = {
+					...active,
+					original: table.getRow(active.key)?.original ?? active.original
+				};
+			};
+			if (result.completion) result.completion.then(settle);
+			else settle(result);
+			return result;
+		},
 		cancelEdit() {
 			editor.value = void 0;
+			editing = void 0;
+			submitting = void 0;
 		},
-		copy() {
-			return range.value ? table.copy(range.value) : "";
+		toggleCheckbox() {
+			const focus = ensureSelection()?.focus;
+			const cell = focus ? cellAt(focus) : void 0;
+			if (!focus || !cell || grid.editorFor(focus)?.kind !== "checkbox") return false;
+			record(table.edit({
+				rowKey: cell.row.key,
+				column: cell.column.id,
+				value: cell.row.getValue(cell.column.id) !== true
+			}, { expectedRows: /* @__PURE__ */ new Map([[cell.row.key, cell.row.original]]) }));
+			return true;
+		},
+		copy(options) {
+			return range.value ? table.copy(range.value, options) : "";
 		},
 		paste(text) {
 			if (!range.value) return;
-			const result = table.paste({
+			return record(table.paste({
 				row: range.value.top,
 				column: range.value.left
-			}, text);
-			lastResult.value = result;
-			return result;
+			}, text));
 		},
 		clear() {
 			if (!range.value) return;
-			const result = table.clear(range.value);
-			lastResult.value = result;
-			return result;
+			return record(table.clear(range.value));
 		},
 		handleKey(event) {
 			if (editor.value) return false;
-			const command = gridCommand(event);
+			const current = selection.value?.focus ?? {
+				row: 0,
+				column: 0
+			};
+			const row = table.rows[current.row];
+			const treeColumn = table.columns.find((column) => column.id === gridOptions.treeColumn?.()) ?? table.columns[0];
+			const command = gridCommand(event, table.tree && row && table.columns[current.column] === treeColumn ? {
+				canExpand: row.canExpand,
+				expanded: row.isExpanded
+			} : void 0);
 			switch (command?.type) {
+				case "tree": {
+					if (!row) return false;
+					let key = row.key;
+					if (command.action === "expand" || command.action === "collapse") table.toggleExpanded(key, command.action === "expand");
+					else if (command.action === "siblings") for (const sibling of table.processedRows.filter((candidate) => candidate.parentKey === row.parentKey && candidate.canExpand)) table.toggleExpanded(sibling.key, true);
+					else if (command.action === "child") key = table.rows.find((candidate) => candidate.parentKey === row.key)?.key ?? key;
+					else key = row.parentKey ?? key;
+					const index = table.rows.findIndex((candidate) => candidate.key === key);
+					if (index >= 0) grid.focusCell({
+						row: index,
+						column: current.column
+					});
+					return true;
+				}
 				case "move":
 					grid.move(command.direction, command.options);
 					return true;
@@ -187,12 +505,441 @@ function useDataGrid(table) {
 	return grid;
 }
 
+//#endregion
+//#region src/use-virtual.ts
+function useVirtualAxis(source, keyOf, estimate, options, horizontal, project) {
+	let items = source();
+	let mounted = false;
+	let disposed = false;
+	let element;
+	let observer;
+	let detach;
+	const elements = /* @__PURE__ */ new Map();
+	const keysByElement = /* @__PURE__ */ new Map();
+	const requestedCount = options.initialCount ?? 10;
+	const initialCount = Number.isSafeInteger(requestedCount) && requestedCount >= 0 ? requestedCount : 10;
+	const initialIssue = initialCount === requestedCount ? void 0 : Object.freeze({
+		code: "invalid_virtual_option",
+		message: "Initial count must be a non-negative safe integer; 10 is used."
+	});
+	const layoutOptions = () => ({
+		count: items.length,
+		estimateSize: estimate,
+		overscan: mounted ? options.overscan : 0,
+		getKey: (index) => keyOf(items[index])
+	});
+	const virtual = createVirtualizer(layoutOptions());
+	function seed() {
+		let size = 0;
+		for (let index = 0; index < Math.min(initialCount, items.length); index += 1) {
+			const value = typeof estimate === "number" ? estimate : estimate(index);
+			size += Number.isFinite(value) && value > 0 ? value : 40;
+		}
+		virtual.setViewport(0, size);
+	}
+	seed();
+	const view = shallowRef(virtual.getWindow());
+	const projected = computed(() => Object.freeze(view.value.items.map((item) => Object.freeze(project(item, items[item.index])))));
+	const unsubscribe = virtual.subscribe((next) => {
+		view.value = next;
+	});
+	const marginIssue = shallowRef();
+	function margin() {
+		const value = toValue(options.scrollMargin) ?? 0;
+		if (Number.isFinite(value) && value >= 0) {
+			marginIssue.value = void 0;
+			return value;
+		}
+		marginIssue.value ??= Object.freeze({
+			code: "invalid_virtual_option",
+			message: "Scroll margin must be non-negative and finite; 0 is used."
+		});
+		return 0;
+	}
+	function viewportSize() {
+		return element ? Math.max(0, (horizontal ? element.clientWidth : element.clientHeight) - margin()) : virtual.getWindow().viewportSize;
+	}
+	function move(offset) {
+		if (element) {
+			if (horizontal) element.scrollLeft = offset === 0 ? 0 : offset + margin();
+			else element.scrollTop = offset === 0 ? 0 : offset + margin();
+		}
+		virtual.setViewport(offset, viewportSize());
+	}
+	function anchor() {
+		const current = virtual.getWindow();
+		const first = current.items.find((item) => item.start + item.size > current.offset);
+		return first ? {
+			key: first.key,
+			inset: current.offset - first.start
+		} : void 0;
+	}
+	function restore(saved, fallback) {
+		const index = saved ? items.findIndex((item) => keyOf(item) === saved.key) : -1;
+		move(index >= 0 && saved ? virtual.getOffsetForIndex(index, "start") + saved.inset : fallback);
+		if (element) {
+			const offset = virtual.getWindow().offset;
+			if (horizontal) element.scrollLeft = offset === 0 ? 0 : offset + margin();
+			else element.scrollTop = offset === 0 ? 0 : offset + margin();
+		}
+	}
+	function measure(target, key) {
+		const saved = anchor();
+		const offset = virtual.getWindow().offset;
+		const box = target.getBoundingClientRect();
+		const size = horizontal ? box.width : box.height;
+		if (size > 0 && Number.isFinite(size)) {
+			const previous = virtual.getWindow();
+			virtual.measure(key, size);
+			if (virtual.getWindow() === previous) return;
+			restore(saved, offset);
+		}
+	}
+	function readViewport() {
+		if (element) virtual.setViewport(Math.max(0, (horizontal ? element.scrollLeft : element.scrollTop) - margin()), viewportSize());
+	}
+	const stopSource = watch(source, (next) => {
+		const saved = anchor();
+		const offset = virtual.getWindow().offset;
+		items = next;
+		virtual.setOptions(layoutOptions());
+		if (mounted) restore(saved, offset);
+		else seed();
+	}, { flush: "sync" });
+	let stopElement;
+	if (getCurrentInstance()) onMounted(() => {
+		mounted = true;
+		virtual.setOptions(layoutOptions());
+		stopElement = watch(() => toValue(options.scrollElement), (next) => {
+			detach?.();
+			observer?.disconnect();
+			observer = void 0;
+			element = next;
+			if (!next) {
+				seed();
+				return;
+			}
+			const owner = next.ownerDocument.defaultView;
+			const Observer = owner?.ResizeObserver;
+			if (Observer) {
+				observer = new Observer((entries) => {
+					for (const entry of entries) if (entry.target === element) readViewport();
+					else {
+						const key = keysByElement.get(entry.target);
+						if (key !== void 0) measure(entry.target, key);
+					}
+				});
+				observer.observe(next);
+				for (const target of elements.values()) observer.observe(target);
+			} else owner?.addEventListener("resize", readViewport);
+			next.addEventListener("scroll", readViewport, { passive: true });
+			detach = () => {
+				next.removeEventListener("scroll", readViewport);
+				owner?.removeEventListener("resize", readViewport);
+			};
+			readViewport();
+			for (const [key, target] of elements) measure(target, key);
+		}, {
+			immediate: true,
+			flush: "post"
+		});
+	});
+	if (getCurrentScope()) onScopeDispose(() => {
+		disposed = true;
+		stopSource();
+		stopElement?.();
+		detach?.();
+		observer?.disconnect();
+		unsubscribe();
+		elements.clear();
+		keysByElement.clear();
+		element = void 0;
+	});
+	margin();
+	const binding = {
+		getItem(index) {
+			view.value;
+			const item = virtual.getItem(index);
+			return item ? Object.freeze(project(item, items[index])) : void 0;
+		},
+		scrollToIndex(index, { align = "auto" } = {}) {
+			move(virtual.getOffsetForIndex(index, align));
+		},
+		scrollToKey(key, align) {
+			const index = items.findIndex((item) => keyOf(item) === key);
+			if (index >= 0) binding.scrollToIndex(index, align);
+		},
+		measureElement(target, key) {
+			if (disposed) return;
+			const previous = elements.get(key);
+			if (previous === target) return;
+			if (previous) {
+				observer?.unobserve(previous);
+				keysByElement.delete(previous);
+				elements.delete(key);
+			}
+			if (!target || !("getBoundingClientRect" in target)) return;
+			elements.set(key, target);
+			keysByElement.set(target, key);
+			if (mounted) {
+				observer?.observe(target);
+				nextTick(() => {
+					if (!disposed && elements.get(key) === target) measure(target, key);
+				});
+			}
+		}
+	};
+	for (const key of Object.keys(view.value)) Object.defineProperty(binding, key, {
+		enumerable: true,
+		get: () => key === "items" ? projected.value : key === "issues" && (initialIssue || marginIssue.value) ? Object.freeze([
+			...view.value.issues,
+			...initialIssue ? [initialIssue] : [],
+			...marginIssue.value ? [marginIssue.value] : []
+		]) : view.value[key]
+	});
+	return Object.freeze(binding);
+}
+/** Virtualize data and detail render items. scrollToKey accepts the parent data-row key. */
+function useVirtualRows(table, options) {
+	const virtual = useVirtualAxis(() => table.renderItems, (item) => item.key, options.estimateRowHeight ?? 40, options, false, (item, renderItem) => ({
+		...item,
+		renderItem
+	}));
+	const stopFocus = watch(() => options.grid?.selection?.focus.row, (row) => {
+		if (row === void 0) return;
+		const direct = table.renderItems[row];
+		const index = direct?.kind === "row" && direct.rowIndex === row ? row : table.renderItems.findIndex((item) => item.kind === "row" && item.rowIndex === row);
+		if (index >= 0) virtual.scrollToIndex(index);
+	}, { flush: "sync" });
+	if (getCurrentScope()) onScopeDispose(stopFocus);
+	const binding = Object.defineProperties({}, {
+		...Object.getOwnPropertyDescriptors(virtual),
+		scrollToKey: {
+			enumerable: true,
+			value: (key, align) => virtual.scrollToKey(getRowItemKey(key), align)
+		}
+	});
+	return Object.freeze(binding);
+}
+/** Virtualize visible columns and bring the active logical column into view. */
+function useVirtualColumns(grid, options) {
+	const virtual = useVirtualAxis(() => grid.table.columns, (column) => column.id, options.estimateColumnWidth ?? 120, options, true, (item, column) => ({
+		...item,
+		column
+	}));
+	const stopFocus = watch(() => grid.selection?.focus.column, (column) => {
+		if (column !== void 0) virtual.scrollToIndex(column);
+	}, { flush: "sync" });
+	if (getCurrentScope()) onScopeDispose(stopFocus);
+	return virtual;
+}
+
+//#endregion
+//#region src/source.ts
+/** Internal owner of one cancellable source, using the engine's ingestion/conflict boundary. */
+function createSource(table, options, seed, publish) {
+	const instance = getCurrentInstance();
+	const requestedThreshold = options.endThreshold ?? 5;
+	const endThreshold = Number.isSafeInteger(requestedThreshold) && requestedThreshold >= 0 ? requestedThreshold : 5;
+	const optionIssues = requestedThreshold === endThreshold ? [] : [Object.freeze({
+		code: "invalid_stream_option",
+		message: "endThreshold must be a non-negative safe integer; 5 is used."
+	})];
+	const mode = shallowRef(void 0);
+	const more = shallowRef(false);
+	const retryVersion = shallowRef(0);
+	const query = shallowRef(table.getState());
+	let cursor;
+	let controller;
+	let task;
+	let cancelFrame;
+	let pending;
+	let active = false;
+	let disposed = false;
+	let mounted = !instance;
+	let first = true;
+	let cursorFailed = false;
+	let generation = 0;
+	let stops = [];
+	const initialMode = () => unref(options.source) ? "source" : unref(options.loadMore) ? "cursor" : void 0;
+	const schedule = options.scheduleFrame ?? ((flush) => {
+		const view = (instance?.proxy?.$el)?.ownerDocument?.defaultView;
+		if (view) {
+			const id = view.requestAnimationFrame(flush);
+			return () => view.cancelAnimationFrame(id);
+		}
+		const id = setTimeout(flush, 16);
+		return () => clearTimeout(id);
+	});
+	const project = (next) => {
+		const loadState = !mounted && initialMode() ? "loading" : mode.value === "cursor" && more.value && next.loadState === "done" ? "idle" : next.loadState;
+		return loadState === next.loadState && optionIssues.length === 0 ? next : Object.freeze({
+			...next,
+			loadState,
+			issues: Object.freeze([...next.issues, ...optionIssues])
+		});
+	};
+	const flush = () => {
+		cancelFrame = void 0;
+		if (pending && !disposed) {
+			active = pending.loadState === "loading" || pending.loadState === "streaming";
+			publish(project(pending));
+		}
+		pending = void 0;
+	};
+	const update = (next) => {
+		const state = next.state;
+		const previous = query.value;
+		if (previous.sorting !== state.sorting || previous.search !== state.search || previous.filters !== state.filters) {
+			query.value = state;
+			next = table.getSnapshot();
+		}
+		if (active) {
+			pending = next;
+			cancelFrame ??= schedule(flush);
+		} else publish(project(next));
+	};
+	const stop = () => {
+		controller?.abort();
+		controller = void 0;
+		task = void 0;
+		active = false;
+		cancelFrame?.();
+		cancelFrame = void 0;
+		pending = void 0;
+	};
+	const reset = () => {
+		stop();
+		cursor = void 0;
+		cursorFailed = false;
+		if (!first) table.setData(seed());
+		first = false;
+	};
+	const loadNext = () => {
+		if (disposed || !mounted || mode.value !== "cursor" || !more.value || cursorFailed) return Promise.resolve();
+		if (task) return task;
+		const loader = unref(options.loadMore);
+		const run = new AbortController();
+		controller = run;
+		active = true;
+		const state = table.getState();
+		const previousCursor = cursor;
+		const source = { async *[Symbol.asyncIterator]() {
+			const result = await loader({
+				cursor: previousCursor,
+				state,
+				signal: run.signal
+			});
+			if (run.signal.aborted) return;
+			if (!Array.isArray(result.rows) || typeof result.done !== "boolean") throw new Error("loadMore must return rows and a boolean done flag.");
+			if (!result.done && result.rows.length === 0 && Object.is(result.cursor, previousCursor)) throw new Error("loadMore returned no rows or cursor progress. Retry after correcting the response.");
+			cursor = result.cursor;
+			more.value = !result.done;
+			yield result.rows;
+		} };
+		task = table.stream(source, {
+			...options.streamOptions,
+			signal: run.signal
+		}).then((result) => {
+			if (controller !== run || disposed) return void 0;
+			cursorFailed = result.status === "error";
+			task = void 0;
+			if (!cancelFrame) active = false;
+		});
+		return task;
+	};
+	const start = () => {
+		if (disposed) return;
+		mounted = true;
+		stops = [watchEffect((cleanup) => {
+			retryVersion.value;
+			const source = unref(options.source);
+			const loader = unref(options.loadMore);
+			const run = new AbortController();
+			const ticket = ++generation;
+			cleanup(() => run.abort());
+			let iterable;
+			if (source) {
+				try {
+					iterable = typeof source === "function" ? source({ signal: run.signal }) : source;
+				} catch (error) {
+					iterable = { [Symbol.asyncIterator]: () => ({ next: () => Promise.reject(error) }) };
+				}
+				if (loader) iterable = { [Symbol.asyncIterator]: () => ({ next: () => Promise.reject(/* @__PURE__ */ new Error("Choose source or loadMore, rather than combining them.")) }) };
+			}
+			queueMicrotask(() => {
+				if (disposed || run.signal.aborted || ticket !== generation) return;
+				reset();
+				mode.value = source ? "source" : loader ? "cursor" : void 0;
+				more.value = !!loader && !source;
+				if (iterable) {
+					controller = run;
+					active = true;
+					table.stream(iterable, {
+						...options.streamOptions,
+						signal: run.signal
+					}).then(() => {
+						if (controller === run && !cancelFrame) active = false;
+					});
+				} else if (loader) loadNext();
+				else update(table.getSnapshot());
+			});
+		}), watch(query, () => {
+			if (mode.value !== "cursor") return;
+			reset();
+			more.value = true;
+			loadNext();
+		}, { flush: "sync" })];
+	};
+	if (instance) onMounted(start);
+	else queueMicrotask(start);
+	return {
+		endThreshold,
+		get loadingMode() {
+			return mode.value ?? (!mounted ? initialMode() : void 0);
+		},
+		get canLoadMore() {
+			return more.value && !cursorFailed && !task;
+		},
+		get loadError() {
+			const next = table.getSnapshot();
+			return next.loadState === "error" ? next.issues.find((item) => item.code === "stream_error") : void 0;
+		},
+		loadNext,
+		retry() {
+			if (disposed) return;
+			if (mode.value === "cursor" && cursorFailed) {
+				cursorFailed = false;
+				loadNext();
+			} else retryVersion.value++;
+		},
+		update,
+		initial: () => project(table.getSnapshot()),
+		dispose() {
+			disposed = true;
+			stop();
+			for (const disposeWatch of stops) disposeWatch();
+			stops = [];
+		}
+	};
+}
+
 //#endregion
 //#region src/use-data-table.ts
 const OPERATIONS = [
+	"appendData",
+	"upsertData",
+	"removeData",
+	"stream",
+	"insertRows",
+	"removeRows",
+	"getPendingChanges",
+	"markSaved",
+	"revert",
 	"setState",
 	"setData",
 	"setColumns",
+	"setTreeFilter",
 	"setRowCount",
 	"toggleSort",
 	"sort",
@@ -210,6 +957,9 @@ const OPERATIONS = [
 	"toggleAll",
 	"clearSelection",
 	"getSelectedRows",
+	"toggleExpanded",
+	"expandAll",
+	"collapseAll",
 	"toggleColumn",
 	"moveColumn",
 	"edit",
@@ -225,27 +975,33 @@ const OPERATIONS = [
 function definedEntries(patch) {
 	return Object.fromEntries(Object.entries(patch ?? {}).filter(([, value]) => value !== void 0));
 }
-/**
-* Create a table bound to the current effect scope. The table follows its reactive data,
-* columns, row count, and state, and stops listening when the scope ends.
-*/
 function useDataTable(options) {
+	const empty = Object.freeze([]);
+	const seed = () => toRaw(toValue(options.data) ?? empty);
 	const table = createTable({
 		...options,
-		data: toRaw(toValue(options.data)),
+		manual: options.manual ?? !!unref(options.loadMore),
+		data: seed(),
 		columns: toValue(options.columns),
 		rowCount: toValue(options.rowCount),
+		treeFilter: toValue(options.treeFilter),
 		initialState: {
 			...options.initialState,
 			...definedEntries(toValue(options.state))
-		}
+		},
+		createChildLoadController: options.createChildLoadController ?? (() => new AbortController())
 	});
+	const drafts = /* @__PURE__ */ new Set();
+	let disposed = false;
 	const snapshot = shallowRef(table.getSnapshot());
-	const unsubscribe = table.subscribe((next) => {
+	const source = createSource(table, options, seed, (next) => {
 		snapshot.value = next;
 	});
+	snapshot.value = source.initial();
+	const unsubscribe = table.subscribe(source.update);
 	const stops = [
-		watch(() => toValue(options.data), (data) => table.setData(toRaw(data))),
+		watch(() => toValue(options.treeFilter), (mode) => table.setTreeFilter(mode)),
+		watch(() => toValue(options.data), (data) => table.setData(toRaw(data ?? empty))),
 		watch(() => toValue(options.columns), (columns) => table.setColumns(columns)),
 		watch(() => toValue(options.rowCount), (rowCount) => {
 			if (rowCount !== void 0) table.setRowCount(rowCount);
@@ -254,24 +1010,63 @@ function useDataTable(options) {
 			if (state) table.setState(state);
 		}, { deep: true })
 	];
-	if (getCurrentScope()) onScopeDispose(() => {
+	const dispose = () => {
+		if (disposed) return;
+		disposed = true;
+		source.dispose();
+		for (const disposeDraft of drafts) disposeDraft();
+		drafts.clear();
 		for (const stop of stops) stop();
 		unsubscribe();
 		table.destroy();
-	});
+	};
+	if (getCurrentScope()) onScopeDispose(dispose);
 	const binding = { table };
+	for (const key of [
+		"endThreshold",
+		"loadingMode",
+		"canLoadMore",
+		"loadError"
+	]) Object.defineProperty(binding, key, {
+		enumerable: true,
+		get: () => {
+			snapshot.value;
+			return source[key];
+		}
+	});
+	binding["retry"] = source.retry;
+	binding["loadNext"] = source.loadNext;
 	Object.defineProperty(binding, "snapshot", {
 		enumerable: true,
 		get: () => snapshot.value
 	});
+	Object.defineProperty(binding, "expanded", {
+		enumerable: true,
+		get: () => snapshot.value.state.expanded
+	});
+	Object.defineProperty(binding, "pendingChanges", {
+		enumerable: true,
+		get: () => {
+			snapshot.value;
+			return table.getPendingChanges();
+		}
+	});
+	binding["editRow"] = (key) => createRowDraft(table, key, (disposeDraft) => {
+		if (disposed) disposeDraft();
+		else drafts.add(disposeDraft);
+		return () => {
+			drafts.delete(disposeDraft);
+		};
+	});
 	for (const key of Object.keys(snapshot.value)) Object.defineProperty(binding, key, {
 		enumerable: true,
 		get: () => snapshot.value[key]
 	});
 	for (const name of OPERATIONS) binding[name] = table[name];
+	binding["destroy"] = dispose;
 	return Object.freeze(binding);
 }
 
 //#endregion
-export { injectDataGrid, injectDataTable, provideDataGrid, provideDataTable, useDataGrid, useDataTable };
+export { injectDataGrid, injectDataTable, provideDataGrid, provideDataTable, useDataGrid, useDataTable, useVirtualColumns, useVirtualRows };
 //# sourceMappingURL=index.js.map