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

package/dist/index.js

@@ -1,7 +1,20 @@
-import { injectDataGrid, injectDataTable, provideDataGrid, provideDataTable, useDataGrid } from "@vueye-table/vue";
-import { defineComponent, h, inject, nextTick, onMounted, onScopeDispose, provide, ref, useId, watch } from "vue";
+import { injectDataGrid, injectDataTable, provideDataGrid, provideDataTable, useDataGrid, useVirtualColumns, useVirtualRows } from "@vueye-table/vue";
+import { Fragment, computed, defineComponent, h, inject, nextTick, onMounted, onScopeDispose, provide, ref, shallowRef, useId, watch } from "vue";
+import { formatValue, getRowItemKey, gridCommand } from "@vueye-table/core";
 
 //#region src/shared.ts
+/** Leading native utility cells, independent of data-column coordinates. */
+const columnLayoutProps = { leadingColumns: {
+	type: Number,
+	default: 0
+} };
+const columnOffsetKey = Symbol("vt-leading-columns");
+function provideColumnOffset(offset) {
+	provide(columnOffsetKey, offset);
+}
+function injectColumnOffset() {
+	return inject(columnOffsetKey, () => 0);
+}
 /** The element a component renders. Every headless component accepts `as`. */
 const asProp = (tag) => ({
 	type: String,
@@ -76,14 +89,16 @@ const DataTableSelectRow = defineComponent({
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableSelectRow>");
 		return () => {
-			const selected = table.isSelected(props.row.key);
+			const selected = table.tree ? props.row.selection === "all" : table.isSelected(props.row.key);
+			const indeterminate = table.tree && props.row.selection === "some";
 			const toggle = () => table.toggleRow(props.row.key);
 			return slots.default?.({
 				selected,
+				indeterminate,
 				toggle
 			}) ?? checkbox({
 				checked: selected,
-				indeterminate: false,
+				indeterminate,
 				label: props.label,
 				disabled: table.selectionMode === "none",
 				onChange: toggle
@@ -244,10 +259,6 @@ const DataTableColumnVisibility = defineComponent({
 		};
 	}
 });
-/**
-* A polite live region describing what is shown, such as "1–10 of 57 rows". Screen readers
-* announce it after a search, filter, or page change.
-*/
 const DataTableStatus = defineComponent({
 	name: "DataTableStatus",
 	slots: Object,
@@ -260,16 +271,737 @@ const DataTableStatus = defineComponent({
 				end: table.pageEnd,
 				rowCount: table.rowCount,
 				totalRowCount: table.totalRowCount,
-				selectedCount: table.selectedCount
+				selectedCount: table.selectedCount,
+				loadState: table.loadState,
+				loadedRowCount: table.loadedRowCount,
+				loadError: table.loadError,
+				canLoadMore: table.canLoadMore,
+				retry: () => table.retry(),
+				loadNext: () => table.loadNext(),
+				loadingChildrenCount: table.tree ? table.processedRows.filter((row) => row.childStatus === "loading").length : 0,
+				childErrorCount: table.tree ? table.processedRows.filter((row) => row.childStatus === "error").length : 0
 			};
-			const text = table.rowCount === 0 ? "No rows" : `${table.pageStart}–${table.pageEnd} of ${table.rowCount} rows` + (table.selectedCount > 0 ? `, ${table.selectedCount} selected` : "");
+			const count = `Loaded ${table.loadedRowCount.toLocaleString()} ${table.loadedRowCount === 1 ? "row" : "rows"}`;
+			const text = table.loadingMode ? table.loadState === "error" ? `${count}. Could not load rows. Retry loading.` : table.loadState === "aborted" ? `${count}. Loading stopped.` : table.loadState === "loading" || table.loadState === "streaming" ? `${count}…` : `${count}${table.loadState === "done" ? ". All rows loaded." : "."}` : table.rowCount === 0 ? "No rows" : `${table.pageStart}–${table.pageEnd} of ${table.rowCount} rows` + (table.selectedCount > 0 ? `, ${table.selectedCount} selected` : "");
 			return h(props.as, {
 				role: "status",
 				"aria-live": "polite"
-			}, slots.default?.(slotProps) ?? text);
+			}, slots.default?.(slotProps) ?? text + (slotProps.loadingChildrenCount ? " Loading children…" : "") + (slotProps.childErrorCount ? " Could not load children. Retry children in the affected row." : ""));
+		};
+	}
+});
+
+//#endregion
+//#region src/loading.ts
+/** Keep this visual sentinel out of the live region and logical data-row count. */
+function loadSentinel(table, colspan) {
+	return table.loadingMode === "cursor" && table.loadedRowCount > 0 && (table.loadState === "loading" || table.loadState === "streaming") ? h("tr", {
+		key: "vt-load-sentinel",
+		"data-load-sentinel": "",
+		"aria-hidden": "true"
+	}, [h("td", {
+		colspan: Math.max(1, colspan),
+		class: "vt-load-sentinel"
+	}, "Loading more rows…")]) : void 0;
+}
+/** A keyboard-accessible alternative to automatic virtual-end loading, with error recovery. */
+const DataTableLoadMore = defineComponent({
+	name: "DataTableLoadMore",
+	props: {
+		label: {
+			type: String,
+			default: "Load more rows"
+		},
+		retryLabel: {
+			type: String,
+			default: "Retry loading"
+		},
+		loadingLabel: {
+			type: String,
+			default: "Loading rows…"
+		}
+	},
+	setup(props) {
+		const table = injectDataTable("<DataTableLoadMore>");
+		return () => table.loadState === "error" ? h("button", {
+			type: "button",
+			onClick: () => table.retry()
+		}, props.retryLabel) : table.loadingMode === "cursor" && table.loadState !== "done" ? h("button", {
+			type: "button",
+			disabled: !table.canLoadMore,
+			onClick: () => {
+				table.loadNext();
+			}
+		}, table.loadState === "loading" || table.loadState === "streaming" ? props.loadingLabel : props.label) : null;
+	}
+});
+
+//#endregion
+//#region src/editor.ts
+function editorText(value, kind) {
+	if (value === null || value === void 0) return "";
+	if (kind === "date" && value instanceof Date) return Number.isFinite(value.getTime()) ? value.toISOString().slice(0, 10) : "";
+	return formatValue(value);
+}
+const cellEditorProps = {
+	editor: {
+		type: Object,
+		required: true
+	},
+	spec: {
+		type: Object,
+		default: () => ({ kind: "text" })
+	},
+	/** Keyboard movement is owned by the surrounding cell. */
+	finish: {
+		type: Function,
+		default: void 0
+	},
+	autofocus: {
+		type: Boolean,
+		default: true
+	},
+	blurCommit: {
+		type: Boolean,
+		default: true
+	},
+	tabCommit: {
+		type: Boolean,
+		default: true
+	}
+};
+/** Plain native fields. Select results are searched and capped at 50 mounted options. */
+const DataCellEditor = defineComponent({
+	name: "DataCellEditor",
+	props: cellEditorProps,
+	setup(props) {
+		const field = ref();
+		const query = ref("");
+		const options = props.spec.options ?? [];
+		const matches = computed(() => {
+			const search = query.value.trim().toLocaleLowerCase();
+			return options.map((value, index) => ({
+				value,
+				index
+			})).filter(({ value }) => String(value ?? "").toLocaleLowerCase().includes(search));
+		});
+		onMounted(() => {
+			if (!props.autofocus) return;
+			field.value?.focus();
+			if (field.value && "setSelectionRange" in field.value && ["text", "number"].includes(props.spec.kind)) field.value.setSelectionRange(field.value.value.length, field.value.value.length);
+		});
+		const finish = (direction) => {
+			if (props.finish) props.finish(direction);
+			else props.editor.commit();
+		};
+		const keydown = (event) => {
+			if (event.isComposing) return;
+			if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				if (!props.editor.pending) props.editor.cancel();
+			} else if (event.key === "Enter" || event.key === "Tab") {
+				if (event.key === "Tab" && !props.tabCommit) return;
+				event.preventDefault();
+				event.stopPropagation();
+				if (!props.editor.pending) finish(event.key === "Tab" ? event.shiftKey ? "left" : "right" : event.shiftKey ? "up" : "down");
+			}
+		};
+		const paste = (event) => {
+			const text = event.clipboardData?.getData("text/plain");
+			if (text === void 0 || props.editor.pending) return;
+			event.preventDefault();
+			const target = event.target;
+			const start = target.selectionStart ?? 0;
+			const end = target.selectionEnd ?? target.value.length;
+			props.editor.input(target.value.slice(0, start) + text + target.value.slice(end));
+		};
+		return () => {
+			const { editor, spec } = props;
+			const attrs = {
+				...editor.attrs,
+				"aria-label": `Edit ${editor.column.header}`,
+				"data-editor": "",
+				disabled: editor.pending,
+				onKeydown: keydown
+			};
+			if (spec.kind === "select") {
+				const shown = matches.value.slice(0, 50);
+				return h("div", {
+					"data-select-editor": "",
+					onKeydown: (event) => {
+						if (event.key === "Escape") keydown(event);
+					}
+				}, [
+					h("input", {
+						ref: field,
+						type: "search",
+						value: query.value,
+						"aria-label": `Search ${editor.column.header} options`,
+						disabled: editor.pending,
+						onInput: (event) => {
+							query.value = event.target.value;
+						},
+						onKeydown: (event) => {
+							if (event.key === "Enter" && shown[0]) {
+								event.preventDefault();
+								editor.commit(shown[0].value);
+							} else keydown(event);
+						}
+					}),
+					h("select", {
+						...attrs,
+						value: options.findIndex((value) => Object.is(value, editor.value)),
+						size: Math.max(2, Math.min(5, shown.length)),
+						onChange: (event) => {
+							const index = Number(event.target.value);
+							if (index >= 0) editor.commit(options[index]);
+						}
+					}, shown.map(({ value, index }) => h("option", {
+						key: index,
+						value: index
+					}, String(value ?? "(empty)")))),
+					h("span", {
+						role: "status",
+						"data-editor-hint": ""
+					}, matches.value.length === 0 ? "No matching options. Change your search." : matches.value.length > 50 ? "Showing the first 50 matches. Refine your search." : `${matches.value.length} options`)
+				]);
+			}
+			return h("input", {
+				...attrs,
+				ref: field,
+				type: spec.kind === "date" ? "date" : spec.kind === "checkbox" ? "checkbox" : "text",
+				inputmode: spec.kind === "number" ? "decimal" : void 0,
+				value: editor.draft,
+				checked: spec.kind === "checkbox" ? editor.value === true : void 0,
+				onInput: spec.kind === "checkbox" ? void 0 : (event) => editor.input(event.target.value),
+				onChange: spec.kind === "checkbox" ? (event) => editor.commit(event.target.checked) : void 0,
+				onBlur: () => {
+					if (props.blurCommit && !editor.pending) finish();
+				},
+				onPaste: spec.kind === "checkbox" ? void 0 : paste
+			});
 		};
 	}
 });
+/** The cell owns the id so it remains stable while its editor mounts and unmounts. */
+function issueAttrs(id, issues, pending) {
+	return {
+		"aria-invalid": issues.length ? "true" : void 0,
+		"aria-describedby": issues.length ? id : void 0,
+		"aria-busy": pending ? "true" : void 0
+	};
+}
+function editorIssues(id, issues, pending = false) {
+	return issues.length || pending ? h("span", {
+		id,
+		"data-edit-issues": "",
+		role: "status"
+	}, pending ? "Checking changes…" : issues.map((problem) => problem.message).join(" ")) : null;
+}
+function useEditorId() {
+	return `vt-edit-${useId()}`;
+}
+
+//#endregion
+//#region src/virtual.ts
+/** Shared opt-in renderer props. Options are applied when the virtual renderer is created. */
+const virtualProps = {
+	virtual: {
+		type: [Boolean, Object],
+		default: false
+	},
+	height: {
+		type: String,
+		default: void 0
+	},
+	rowHeight: {
+		type: Number,
+		default: 40
+	},
+	overscan: {
+		type: Number,
+		default: 5
+	},
+	virtualColumns: {
+		type: Boolean,
+		default: false
+	},
+	columnWidth: {
+		type: Number,
+		default: 120
+	}
+};
+function virtualOptions(props) {
+	return {
+		rowHeight: props.rowHeight,
+		overscan: props.overscan,
+		columnWidth: props.columnWidth,
+		...typeof props.virtual === "object" ? props.virtual : {}
+	};
+}
+const viewportKey = Symbol("vt-viewport");
+const virtualKey = Symbol("vt-virtual-renderer");
+function injectVirtual() {
+	return inject(virtualKey, void 0);
+}
+/** A scroll container for a headless table/grid. It supplies its element without global reads. */
+const DataTableViewport = defineComponent({
+	name: "DataTableViewport",
+	slots: Object,
+	props: {
+		as: asProp("div"),
+		height: {
+			type: String,
+			default: "24rem"
+		}
+	},
+	setup(props, { slots, expose }) {
+		const element = shallowRef(null);
+		provide(viewportKey, element);
+		expose({ element });
+		return () => h(props.as, {
+			ref: element,
+			"data-virtual-viewport": "",
+			style: {
+				height: props.height,
+				overflow: "auto",
+				overflowAnchor: "none"
+			}
+		}, slots.default?.());
+	}
+});
+function createComponentVirtual(table, options, tableElement, grid, virtualColumns = false, gutter = 0) {
+	const scrollElement = inject(viewportKey, shallowRef(null));
+	const rows = useVirtualRows(table, {
+		scrollElement,
+		estimateRowHeight: options.rowHeight,
+		overscan: options.overscan,
+		initialCount: options.initialCount,
+		grid,
+		scrollMargin: () => tableElement()?.querySelector("thead")?.getBoundingClientRect().height ?? 0
+	});
+	onMounted(() => {
+		watch(() => [
+			rows.endIndex,
+			table.renderItems.length,
+			table.canLoadMore
+		], () => {
+			if (table.loadingMode === "cursor" && table.canLoadMore && rows.endIndex >= table.renderItems.length - 1 - table.endThreshold) table.loadNext();
+		}, { immediate: true });
+	});
+	const columns = grid && virtualColumns ? useVirtualColumns(grid, {
+		scrollElement,
+		estimateColumnWidth: (index) => table.columns[index]?.width ?? options.columnWidth ?? 120,
+		overscan: options.columnOverscan ?? 1,
+		initialCount: options.initialColumnCount ?? 5,
+		scrollMargin: gutter
+	}) : void 0;
+	const pinnedRows = computed(() => {
+		const result = [...rows.items];
+		const positions = /* @__PURE__ */ new Set([grid?.selection?.focus.row, grid?.editor?.position.row]);
+		for (const position of positions) {
+			if (position === void 0 || result.some((item) => item.renderItem.kind === "row" && item.renderItem.rowIndex === position)) continue;
+			const direct = table.renderItems[position];
+			const index = direct?.kind === "row" && direct.rowIndex === position ? position : table.renderItems.findIndex((item) => item.kind === "row" && item.rowIndex === position);
+			const item = rows.getItem(index);
+			if (item) result.push(item);
+		}
+		return result.sort((a, b) => a.index - b.index);
+	});
+	const pinnedColumns = computed(() => {
+		if (!columns) return void 0;
+		const result = [...columns.items];
+		const positions = /* @__PURE__ */ new Set([grid?.selection?.focus.column, grid?.editor?.position.column]);
+		for (const position of positions) {
+			if (position === void 0 || result.some((item) => item.index === position)) continue;
+			const item = columns.getItem(position);
+			if (item) result.push(item);
+		}
+		return result.sort((a, b) => a.index - b.index);
+	});
+	const binding = {
+		rows,
+		columns,
+		gutter,
+		get rowItems() {
+			return pinnedRows.value;
+		},
+		get columnItems() {
+			return pinnedColumns.value;
+		}
+	};
+	provide(virtualKey, binding);
+	return binding;
+}
+/** Create composables only for an enabled renderer, preserving the ordinary component path. */
+const VirtualContent = defineComponent({
+	name: "DataTableVirtualContent",
+	props: {
+		table: {
+			type: Object,
+			required: true
+		},
+		options: {
+			type: Object,
+			required: true
+		},
+		tableElement: {
+			type: Function,
+			required: true
+		},
+		grid: {
+			type: Object,
+			default: void 0
+		},
+		virtualColumns: {
+			type: Boolean,
+			default: false
+		},
+		gutter: {
+			type: Number,
+			default: 0
+		},
+		render: {
+			type: Function,
+			required: true
+		}
+	},
+	setup(props) {
+		const binding = createComponentVirtual(props.table, props.options, props.tableElement, props.grid, props.virtualColumns, props.gutter);
+		return () => props.render(binding);
+	}
+});
+function rowSpacer(size, colspan, key) {
+	return size > 0 ? h("tr", {
+		key,
+		"aria-hidden": "true",
+		role: "presentation",
+		"data-virtual-spacer": "",
+		style: { height: `${size}px` }
+	}, [h("td", {
+		colspan: Math.max(1, colspan),
+		style: {
+			height: `${size}px`,
+			padding: "0",
+			border: "0",
+			lineHeight: "0"
+		}
+	})]) : null;
+}
+function columnSpacer(size, tag, key) {
+	return size > 0 ? h(tag, {
+		key,
+		"aria-hidden": "true",
+		role: "presentation",
+		"data-virtual-spacer": "",
+		style: {
+			width: `${size}px`,
+			minWidth: `${size}px`,
+			padding: "0",
+			border: "0"
+		}
+	}) : null;
+}
+function renderColumns(tableColumns, binding, render, tag) {
+	if (!binding?.columns || !binding.columnItems) return tableColumns.map(render);
+	const result = [];
+	let end = 0;
+	for (const item of binding.columnItems) {
+		result.push(columnSpacer(item.start - end, tag, `gap-${item.index}`), render(item.column, item.index));
+		end = item.start + item.size;
+	}
+	result.push(columnSpacer(binding.columns.totalSize - end, tag, "gap-end"));
+	return result;
+}
+function renderRows(binding, colspan, render) {
+	const result = [];
+	let end = 0;
+	for (const item of binding.rowItems) {
+		result.push(rowSpacer(item.start - end, colspan, `gap-${item.index}`), render(item));
+		end = item.start + item.size;
+	}
+	result.push(rowSpacer(binding.rows.totalSize - end, colspan, "gap-end"));
+	return result;
+}
+function virtualColgroup(tableColumns, binding) {
+	if (!binding.columns || !binding.columnItems) return null;
+	const cols = binding.gutter ? [h("col", { style: { width: `${binding.gutter}px` } })] : [];
+	let end = 0;
+	for (const item of binding.columnItems) {
+		if (item.start > end) cols.push(h("col", { style: { width: `${item.start - end}px` } }));
+		cols.push(h("col", { style: { width: `${item.size}px` } }));
+		end = item.start + item.size;
+	}
+	if (binding.columns.totalSize > end) cols.push(h("col", { style: { width: `${binding.columns.totalSize - end}px` } }));
+	return h("colgroup", cols);
+}
+function virtualRow(binding, row) {
+	return binding.rowItems.find((item) => item.renderItem.kind === "row" && item.renderItem.row.key === row.key);
+}
+
+//#endregion
+//#region src/hierarchy.ts
+const hierarchyProps = {
+	treeColumn: {
+		type: String,
+		default: void 0
+	},
+	keepAliveDetail: {
+		type: Boolean,
+		default: false
+	}
+};
+const hierarchyKey = Symbol("vueye-table-hierarchy");
+function provideHierarchy(table, props) {
+	const focus = shallowRef();
+	const focusKey = computed(() => table.rows.some((row) => row.key === focus.value) ? focus.value : table.rows[0]?.key);
+	const context = {
+		id: `vt-tree-${useId()}`,
+		table,
+		get treeColumn() {
+			return props.treeColumn;
+		},
+		get keepAliveDetail() {
+			return props.keepAliveDetail;
+		},
+		focus,
+		get focusKey() {
+			return focusKey.value;
+		}
+	};
+	provide(hierarchyKey, context);
+	return context;
+}
+function injectHierarchy() {
+	return inject(hierarchyKey, void 0);
+}
+function resolveTreeColumn(table, column) {
+	return table.columns.find((candidate) => candidate.id === column)?.id ?? table.columns[0]?.id;
+}
+function itemId(context, row, detail = false) {
+	return context ? `${context.id}-${encodeURIComponent(getRowItemKey(row.key, detail ? "detail" : "row"))}` : void 0;
+}
+const siblingCache = /* @__PURE__ */ new WeakMap();
+function hierarchyRowAttrs(table, row, context) {
+	if (!table.tree) return {};
+	let positions = siblingCache.get(table.processedRows);
+	if (!positions) {
+		const groups = /* @__PURE__ */ new Map();
+		for (const candidate of table.processedRows) {
+			const group = groups.get(candidate.parentKey) ?? [];
+			group.push(candidate);
+			groups.set(candidate.parentKey, group);
+		}
+		const indices = new Map(table.processedRows.map((candidate, index) => [candidate.key, index]));
+		const result = /* @__PURE__ */ new Map();
+		for (const group of groups.values()) group.forEach((candidate, index) => result.set(candidate.key, {
+			position: index + 1,
+			size: group.length,
+			index: indices.get(candidate.key)
+		}));
+		positions = result;
+		siblingCache.set(table.processedRows, result);
+	}
+	const position = positions.get(row.key);
+	return {
+		id: itemId(context, row),
+		"data-tree-key": getRowItemKey(row.key),
+		"aria-level": row.depth + 1,
+		"aria-expanded": row.canExpand ? String(row.isExpanded) : void 0,
+		"aria-setsize": position?.size,
+		"aria-posinset": position?.position,
+		"aria-rowindex": position ? position.index + 2 : void 0,
+		"aria-busy": row.childStatus === "loading" ? "true" : void 0
+	};
+}
+/** Row-focused table navigation; cell-focused grids use the same pure core commands. */
+function treeKeydown(event, context, virtual) {
+	const table = context.table;
+	const target = event.target;
+	if (!table.tree || !target?.closest) return;
+	if (target.closest("input, textarea, select, [contenteditable=true]") || target.closest("button") && !target.closest("[data-expand-toggle]")) return;
+	const key = target.closest("tr")?.getAttribute("data-tree-key");
+	const index = table.rows.findIndex((row) => getRowItemKey(row.key) === key);
+	const row = table.rows[index];
+	if (!row) return;
+	const command = gridCommand(event, {
+		canExpand: row.canExpand,
+		expanded: row.isExpanded
+	});
+	let next = row;
+	if (command?.type === "tree") {
+		if (command.action === "expand" || command.action === "collapse") table.toggleExpanded(row.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") next = table.rows.find((candidate) => candidate.parentKey === row.key) ?? row;
+		else next = table.rows.find((candidate) => candidate.key === row.parentKey) ?? row;
+	} else if (event.key === "ArrowDown" || event.key === "ArrowUp") next = table.rows[index + (event.key === "ArrowDown" ? 1 : -1)] ?? row;
+	else if (event.key === "Home" || event.key === "End") next = table.rows[event.key === "Home" ? 0 : table.rows.length - 1] ?? row;
+	else return;
+	event.preventDefault();
+	context.focus.value = next.key;
+	virtual?.rows.scrollToKey(next.key);
+	const id = itemId(context, next);
+	nextTick(() => target.closest("table")?.ownerDocument.getElementById(id ?? "")?.focus());
+}
+const expandToggleProps = {
+	row: rowProp,
+	controls: {
+		type: String,
+		default: void 0
+	},
+	expandLabel: {
+		type: String,
+		default: "Expand row"
+	},
+	collapseLabel: {
+		type: String,
+		default: "Collapse row"
+	}
+};
+const treeCellProps = {
+	row: rowProp,
+	as: asProp("div")
+};
+const DataTableExpandToggle = defineComponent({
+	name: "DataTableExpandToggle",
+	props: expandToggleProps,
+	slots: Object,
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataTableExpandToggle>");
+		const context = injectHierarchy();
+		const grid = injectDataGrid();
+		return () => props.row.canExpand ? h("button", {
+			type: "button",
+			"data-expand-toggle": "",
+			tabindex: table.tree ? -1 : void 0,
+			"aria-expanded": String(props.row.isExpanded),
+			"aria-controls": props.controls ?? (!table.tree ? itemId(context, props.row, true) : props.row.isExpanded ? table.rows.filter((row) => row.parentKey === props.row.key).map((row) => itemId(context, row)).filter(Boolean).join(" ") || void 0 : void 0),
+			"aria-label": props.row.isExpanded ? props.collapseLabel : props.expandLabel,
+			onMousedown: (event) => event.stopPropagation(),
+			onDblclick: (event) => event.stopPropagation(),
+			onClick: (event) => {
+				event.stopPropagation();
+				if (grid?.table === table) grid.focusCell({
+					row: table.rows.indexOf(props.row),
+					column: Math.max(0, table.columns.findIndex((column) => column.id === resolveTreeColumn(table, context?.treeColumn)))
+				});
+				table.toggleExpanded(props.row.key);
+				if (grid?.table === table) nextTick(() => event.target.closest("table")?.focus());
+			}
+		}, slots.default?.({
+			row: props.row,
+			expanded: props.row.isExpanded
+		}) ?? (props.row.isExpanded ? props.collapseLabel : props.expandLabel)) : null;
+	}
+});
+const DataTableTreeCell = defineComponent({
+	name: "DataTableTreeCell",
+	props: treeCellProps,
+	slots: Object,
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataTableTreeCell>");
+		const context = injectHierarchy();
+		const grid = injectDataGrid();
+		return () => h(props.as, {
+			class: "vt-tree-cell",
+			"data-tree-cell": "",
+			style: { paddingInlineStart: `calc(var(--vt-tree-indent, 1.25rem) * ${props.row.depth})` }
+		}, [
+			h("span", { class: "vt-tree-toggle" }, slots.toggle?.({ row: props.row }) ?? h(DataTableExpandToggle, { row: props.row })),
+			h("span", { class: "vt-tree-label" }, [slots.default?.()]),
+			props.row.childStatus === "loading" ? h("span", { class: "vt-tree-loading" }, "Loading children…") : null,
+			props.row.childStatus === "error" ? h("span", { class: "vt-tree-error" }, ["Could not load children. ", h("button", {
+				type: "button",
+				class: "vt-tree-retry",
+				onMousedown: (event) => event.stopPropagation(),
+				onClick: (event) => {
+					event.stopPropagation();
+					const element = event.currentTarget.closest("table");
+					if (grid?.table === table) grid.focusCell({
+						row: table.rows.indexOf(props.row),
+						column: Math.max(0, table.columns.findIndex((column) => column.id === resolveTreeColumn(table, context?.treeColumn)))
+					});
+					table.toggleExpanded(props.row.key, true);
+					nextTick(() => {
+						if (grid?.table === table) element?.focus();
+						else element?.ownerDocument.getElementById(itemId(context, props.row) ?? "")?.focus();
+					});
+				}
+			}, "Retry children")]) : null
+		]);
+	}
+});
+/** One full-width detail; retained collapsed content remains hidden and unmeasured. */
+const DataTableDetailRow = defineComponent({
+	name: "DataTableDetailRow",
+	props: {
+		row: rowProp,
+		colspan: {
+			type: Number,
+			default: void 0
+		},
+		hidden: {
+			type: Boolean,
+			default: false
+		},
+		keepAlive: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	slots: Object,
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataTableDetailRow>");
+		const context = injectHierarchy();
+		const virtual = injectVirtual();
+		let opened = false;
+		return () => {
+			if (props.row.isExpanded && !props.hidden) opened = true;
+			if (!opened || (!props.row.isExpanded || props.hidden) && !(props.keepAlive ?? context?.keepAliveDetail)) return null;
+			const hidden = props.hidden || !props.row.isExpanded;
+			return h("tr", {
+				id: itemId(context, props.row, true),
+				"data-detail": "",
+				hidden,
+				...virtual && !hidden ? { ref: (target) => virtual.rows.measureElement(target, getRowItemKey(props.row.key, "detail")) } : {}
+			}, [h("td", {
+				colspan: Math.max(1, props.colspan ?? table.columns.length),
+				class: "vt-detail-cell"
+			}, [slots.default?.({ row: props.row })])]);
+		};
+	}
+});
+function createDetails(table, slot, colspan) {
+	const context = injectHierarchy();
+	const visited = /* @__PURE__ */ new Set();
+	const render = (row, rowIndex, hidden = false) => {
+		if (!hidden && context?.keepAliveDetail) visited.add(row.key);
+		return h(DataTableDetailRow, {
+			key: getRowItemKey(row.key, "detail"),
+			row,
+			colspan: colspan(),
+			hidden
+		}, { default: () => slot()?.({
+			row,
+			rowIndex
+		}) });
+	};
+	return {
+		render,
+		retained(visible) {
+			if (!context?.keepAliveDetail) return [];
+			return [...visited].flatMap((key) => {
+				const index = table.rows.findIndex((row) => row.key === key);
+				if (index < 0) {
+					visited.delete(key);
+					return [];
+				}
+				return visible.has(key) ? [] : [render(table.rows[index], index, true)];
+			});
+		}
+	};
+}
 
 //#endregion
 //#region src/table.ts
@@ -285,15 +1017,36 @@ const DataTableRoot = defineComponent({
 			type: Object,
 			required: true
 		},
-		as: asProp("table")
+		as: asProp("table"),
+		...virtualProps,
+		...hierarchyProps,
+		...columnLayoutProps
 	},
 	setup(props, { slots }) {
 		provideDataTable(props.table);
-		return () => h(props.as, {
-			"aria-rowcount": props.table.rowCount + 1,
-			"aria-colcount": props.table.columns.length,
-			"data-empty": flag(props.table.rowCount === 0)
+		provideColumnOffset(() => props.leadingColumns);
+		const hierarchy = provideHierarchy(props.table, props);
+		const element = shallowRef();
+		const editingGrid = injectEditingGrid();
+		const render = (virtual) => h(props.as, {
+			role: props.table.tree ? "treegrid" : void 0,
+			"aria-rowcount": (props.table.tree ? props.table.processedRows.length : props.table.rowCount) + 1,
+			"aria-colcount": props.table.columns.length + props.leadingColumns,
+			"aria-busy": props.table.loadState === "loading" || props.table.loadState === "streaming" ? "true" : void 0,
+			"data-empty": flag(props.table.rowCount === 0),
+			onKeydown: (event) => treeKeydown(event, hierarchy, virtual),
+			...virtual ? {
+				ref: element,
+				"data-virtual": ""
+			} : {}
 		}, slots.default?.({ table: props.table }) ?? [h(DataTableHeader), h(DataTableBody)]);
+		return () => props.virtual ? h(VirtualContent, {
+			table: props.table,
+			...editingGrid ? { grid: editingGrid } : {},
+			options: virtualOptions(props),
+			tableElement: () => element.value,
+			render
+		}) : render();
 	}
 });
 const DataTableCaption = defineComponent({
@@ -311,7 +1064,11 @@ const DataTableHeader = defineComponent({
 	props: { as: asProp("thead") },
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableHeader>");
-		return () => h(props.as, slots.default?.({ columns: table.columns }) ?? h(DataTableHeaderRow, () => table.columns.map((column) => h(DataTableHeaderCell, {
+		const virtual = injectVirtual();
+		return () => h(props.as, slots.default?.({ columns: table.columns }) ?? h(DataTableHeaderRow, () => virtual?.columns ? h(DataTableVirtualColumns, null, { default: ({ column }) => [h(DataTableHeaderCell, {
+			key: column.id,
+			column
+		})] }) : table.columns.map((column) => h(DataTableHeaderCell, {
 			key: column.id,
 			column
 		}))));
@@ -325,6 +1082,23 @@ const DataTableHeaderRow = defineComponent({
 		return () => h(props.as, { "aria-rowindex": 1 }, slots.default?.());
 	}
 });
+/** Shared header/body column slice, with native spacer cells for omitted columns. */
+const DataTableVirtualColumns = defineComponent({
+	name: "DataTableVirtualColumns",
+	slots: Object,
+	props: { as: {
+		type: String,
+		default: "th"
+	} },
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataTableVirtualColumns>");
+		const virtual = injectVirtual();
+		return () => h(Fragment, renderColumns(table.columns, virtual, (column, index) => slots.default?.({
+			column,
+			index
+		}), props.as));
+	}
+});
 /**
 * A column header with `aria-sort`. Without a slot it shows the header text inside a sort button
 * for sortable columns.
@@ -338,6 +1112,7 @@ const DataTableHeaderCell = defineComponent({
 	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableHeaderCell>");
+		const columnOffset = injectColumnOffset();
 		return () => {
 			const { column } = props;
 			const sort = table.getSort(column.id);
@@ -354,7 +1129,8 @@ const DataTableHeaderCell = defineComponent({
 				"data-align": column.align,
 				"data-sortable": flag(column.sortable),
 				"data-sort": sort?.direction,
-				style: columnStyle(column)
+				style: columnStyle(column),
+				"aria-colindex": table.columns.indexOf(column) + columnOffset() + 1
 			}, content);
 		};
 	}
@@ -397,38 +1173,114 @@ const DataTableSortButton = defineComponent({
 const DataTableBody = defineComponent({
 	name: "DataTableBody",
 	slots: Object,
-	props: { as: asProp("tbody") },
+	props: {
+		as: asProp("tbody"),
+		...virtualProps,
+		colspan: {
+			type: Number,
+			default: void 0
+		}
+	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableBody>");
+		const virtual = injectVirtual();
+		const details = createDetails(table, () => slots.detail, () => props.colspan ?? table.columns.length);
 		return () => {
+			if (props.virtual && !virtual) return h(VirtualDataTableBody, props, slots);
+			if (virtual) return renderTableBody(table, virtual, props.as, props.colspan, slots, details);
 			let content = slots.default?.({ rows: table.rows });
-			if (!content) content = table.rows.length === 0 && slots.empty ? h("tr", { "data-empty": "" }, [h("td", { colspan: Math.max(1, table.columns.length) }, slots.empty())]) : table.rows.map((row) => h(DataTableRow, {
-				key: row.key,
-				row
-			}));
-			return h(props.as, content);
+			if (!content) content = table.rows.length === 0 && slots.empty ? h("tr", { "data-empty": "" }, [h("td", { colspan: Math.max(1, table.columns.length) }, slots.empty())]) : table.renderItems.map((item) => item.kind === "row" ? slots.row ? h(Fragment, { key: item.key }, [slots.row(item)]) : h(DataTableRow, {
+				key: item.key,
+				row: item.row,
+				rowIndex: item.rowIndex
+			}) : details.render(item.row, item.rowIndex));
+			const visibleDetails = new Set(table.renderItems.filter((item) => item.kind === "detail").map((item) => item.row.key));
+			const retained = slots.default ? [] : details.retained(visibleDetails);
+			const sentinel = loadSentinel(table, props.colspan ?? table.columns.length);
+			return h(props.as, [
+				...Array.isArray(content) ? content : content ? [content] : [],
+				...retained,
+				...sentinel ? [sentinel] : []
+			]);
 		};
 	}
 });
+function renderTableBody(table, virtual, as, colspan, slots, details, element) {
+	const width = colspan ?? table.columns.length;
+	const attrs = element ? { ref: element } : {};
+	const content = slots.default?.({ rows: virtual.rowItems.filter((item) => item.renderItem.kind === "row").map((item) => item.renderItem.row) });
+	if (table.rows.length === 0 && slots.empty) return h(as, attrs, h("tr", { "data-empty": "" }, [h("td", { colspan: Math.max(1, width) }, slots.empty())]));
+	if (content) return h(as, attrs, [
+		rowSpacer(virtual.rows.paddingStart, width, "gap-start"),
+		...content,
+		rowSpacer(virtual.rows.paddingEnd, width, "gap-end"),
+		...loadSentinel(table, width) ? [loadSentinel(table, width)] : []
+	]);
+	return h(as, attrs, [
+		...renderRows(virtual, width, (item) => item.renderItem.kind === "row" ? slots.row ? h(Fragment, { key: item.key }, [slots.row(item.renderItem)]) : h(DataTableRow, {
+			key: item.key,
+			row: item.renderItem.row,
+			rowIndex: item.renderItem.rowIndex
+		}) : details.render(item.renderItem.row, item.renderItem.rowIndex)),
+		...details.retained(new Set(virtual.rowItems.filter((item) => item.renderItem.kind === "detail").map((item) => item.renderItem.row.key))),
+		...loadSentinel(table, width) ? [loadSentinel(table, width)] : []
+	]);
+}
+const VirtualDataTableBody = defineComponent({
+	name: "DataTableVirtualBody",
+	props: {
+		as: asProp("tbody"),
+		...virtualProps,
+		colspan: {
+			type: Number,
+			default: void 0
+		}
+	},
+	slots: Object,
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataTableBody>");
+		const element = shallowRef();
+		const virtual = createComponentVirtual(table, virtualOptions(props), () => element.value?.closest("table"));
+		const details = createDetails(table, () => slots.detail, () => props.colspan ?? table.columns.length);
+		return () => renderTableBody(table, virtual, props.as, props.colspan, slots, details, element);
+	}
+});
 /** A body row; `aria-selected` and `data-selected` follow the selection. */
 const DataTableRow = defineComponent({
 	name: "DataTableRow",
 	slots: Object,
 	props: {
 		row: rowProp,
-		as: asProp("tr")
+		as: asProp("tr"),
+		rowIndex: {
+			type: Number,
+			default: void 0
+		}
 	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableRow>");
+		const virtual = injectVirtual();
+		const hierarchy = injectHierarchy();
 		return () => {
 			const { row } = props;
 			const selected = table.isSelected(row.key);
-			const position = table.rows.indexOf(row);
+			const item = virtual ? virtualRow(virtual, row) : void 0;
+			const position = props.rowIndex ?? item?.renderItem.rowIndex ?? table.rows.indexOf(row);
 			return h(props.as, {
 				"aria-rowindex": position === -1 ? void 0 : table.pageStart + position + 1,
 				"aria-selected": table.selectionMode === "none" ? void 0 : String(selected),
 				"data-selected": flag(selected),
-				"data-key": String(row.key)
+				"data-key": String(row.key),
+				"data-dirty": flag(row.isDirty),
+				...hierarchyRowAttrs(table, row, hierarchy),
+				tabindex: table.tree ? (hierarchy?.focusKey ?? table.rows[0]?.key) === row.key ? 0 : -1 : void 0,
+				onFocus: () => {
+					if (hierarchy) hierarchy.focus.value = row.key;
+				},
+				...virtual && item ? {
+					ref: (element) => virtual.rows.measureElement(element, item.key),
+					"data-virtual-row": ""
+				} : {}
 			}, slots.default?.({
 				row,
 				selected,
@@ -448,22 +1300,31 @@ const DataTableCell = defineComponent({
 	props: {
 		row: rowProp,
 		column: columnProp,
-		as: asProp("td")
+		as: asProp("td"),
+		tree: {
+			type: Boolean,
+			default: true
+		}
 	},
 	setup(props, { slots }) {
+		const table = injectDataTable("<DataTableCell>");
+		const columnOffset = injectColumnOffset();
+		const hierarchy = injectHierarchy();
 		return () => {
 			const { row, column } = props;
 			const value = row.getValue(column.id);
 			const display = row.getDisplay(column.id);
-			return h(props.as, {
-				"data-column": column.id,
-				"data-align": column.align
-			}, slots.default?.({
+			const content = () => slots.default?.({
 				row,
 				column,
 				value,
 				display
-			}) ?? display);
+			}) ?? display;
+			return h(props.as, {
+				"data-column": column.id,
+				"data-align": column.align,
+				"aria-colindex": table.columns.indexOf(column) + columnOffset() + 1
+			}, props.tree && table.tree && column.id === resolveTreeColumn(table, hierarchy?.treeColumn) ? h(DataTableTreeCell, { row }, { default: content }) : content());
 		};
 	}
 });
@@ -478,6 +1339,298 @@ const DataTableEmpty = defineComponent({
 	}
 });
 
+//#endregion
+//#region src/editing.ts
+const editingKey = Symbol("vueye-table-editing");
+function injectEditingGrid() {
+	return inject(editingKey, void 0)?.grid;
+}
+/** Renderless provider for editable data-table cells and row forms. */
+const DataTableEditRoot = defineComponent({
+	name: "DataTableEditRoot",
+	slots: Object,
+	props: {
+		table: {
+			type: Object,
+			required: true
+		},
+		mode: {
+			type: String,
+			default: "cell"
+		}
+	},
+	emits: {
+		save: (_result) => true,
+		cancel: (_key) => true
+	},
+	setup(props, { slots, emit, expose }) {
+		const grid = useDataGrid(props.table);
+		const draft = shallowRef();
+		const context = {
+			grid,
+			get mode() {
+				return props.mode;
+			},
+			get draft() {
+				return draft.value;
+			},
+			start(row) {
+				if (draft.value?.pending) return;
+				if (draft.value) context.cancel(draft.value.rowKey);
+				grid.cancelEdit();
+				const column = props.table.columns.findIndex((candidate) => candidate.isEditable(row.original));
+				grid.focusCell({
+					row: props.table.rows.findIndex((candidate) => candidate.key === row.key),
+					column
+				});
+				grid.startEdit();
+				draft.value = props.table.editRow(row.key);
+			},
+			async save() {
+				const active = draft.value;
+				if (!active || active.pending) return void 0;
+				const result = await active.save();
+				if (draft.value === active && active.status !== "editing" && !active.pending) {
+					draft.value = void 0;
+					grid.cancelEdit();
+				}
+				if (result.status !== "rejected") emit("save", result);
+				return result;
+			},
+			cancel(key) {
+				if (draft.value?.rowKey === key && !draft.value.pending) {
+					draft.value.cancel();
+					draft.value = void 0;
+					grid.cancelEdit();
+					emit("cancel", key);
+				}
+			}
+		};
+		provide(editingKey, context);
+		expose({ editing: context });
+		watch(() => props.table.rows, (rows) => {
+			if (draft.value && !rows.some((row) => row.key === draft.value?.rowKey)) context.cancel(draft.value.rowKey);
+		});
+		onScopeDispose(() => draft.value?.cancel());
+		return () => slots.default?.({ editing: context });
+	}
+});
+/** A cell with on-demand editing; row mode shares one draft and one save operation. */
+const DataTableEditCell = defineComponent({
+	name: "DataTableEditCell",
+	props: {
+		row: rowProp,
+		column: columnProp,
+		rowIndex: {
+			type: Number,
+			default: void 0
+		},
+		tree: {
+			type: Boolean,
+			default: true
+		}
+	},
+	slots: Object,
+	emits: {
+		save: (_result) => true,
+		cancel: (_key) => true
+	},
+	setup(props, { slots, emit }) {
+		const table = injectDataTable("<DataTableEditCell>");
+		const context = inject(editingKey);
+		if (!context) throw new Error("<DataTableEditCell> requires <DataTableEditRoot>.");
+		const { grid } = context;
+		const id = useEditorId();
+		const element = shallowRef();
+		const position = () => ({
+			row: props.rowIndex ?? table.rows.indexOf(props.row),
+			column: table.columns.indexOf(props.column)
+		});
+		const active = computed(() => context.mode === "row" ? context.draft?.rowKey === props.row.key : grid.isEditing(position()));
+		const pending = computed(() => context.mode === "row" ? !!context.draft?.pending : active.value && grid.lastResult?.status === "pending");
+		const localText = shallowRef("");
+		watch(active, (value) => {
+			if (value) localText.value = editorText(props.row.getValue(props.column.id), grid.editorFor(position())?.kind ?? "text");
+		});
+		const focus = (direction) => {
+			nextTick(() => {
+				if (!direction) {
+					element.value?.focus();
+					return;
+				}
+				const all = [...element.value?.closest("table")?.querySelectorAll("[data-edit-cell][data-editable]") ?? []];
+				all[all.indexOf(element.value) + (direction === "left" ? -1 : 1)]?.focus();
+			});
+		};
+		const submit = (value, direction) => {
+			if (context.mode === "row") {
+				if (value !== void 0) {
+					if (typeof value === "string") {
+						localText.value = value;
+						context.draft?.setValue(props.column.id, value);
+						context.draft?.setInput(props.column.id, value);
+					} else context.draft?.setValue(props.column.id, value);
+				}
+				return;
+			}
+			const result = grid.submitEdit(value === void 0 ? void 0 : typeof value === "string" ? { input: value } : { value });
+			const finish = (final) => {
+				if (final.status !== "rejected") {
+					emit("save", final);
+					focus(direction);
+				}
+			};
+			if (result?.completion) result.completion.then(finish);
+			else if (result) finish(result);
+			return result;
+		};
+		return () => {
+			const { row, column } = props;
+			const editable = column.isEditable(row.original);
+			const editing = editable && active.value;
+			const draft = context.draft?.rowKey === row.key ? context.draft : void 0;
+			const issues = draft?.issues.filter((problem) => problem.column === column.id) ?? (row.cellIssues?.get(column.id) ? [row.cellIssues.get(column.id)] : active.value ? grid.lastResult?.issues.filter((problem) => problem.rowKey === row.key && (problem.column === column.id || !problem.column)) ?? [] : []);
+			const spec = editing ? grid.editorFor(position()) ?? { kind: "text" } : void 0;
+			const input = (text) => {
+				localText.value = text;
+				if (context.mode === "row") {
+					draft?.setValue(column.id, text);
+					draft?.setInput(column.id, text);
+				} else grid.updateDraft(text);
+			};
+			const cancel = () => {
+				if (pending.value) return;
+				if (context.mode === "row") context.cancel(row.key);
+				else {
+					grid.cancelEdit();
+					emit("cancel", row.key);
+				}
+				focus();
+			};
+			const editor = {
+				row,
+				column,
+				value: context.mode === "row" ? Reflect.get(draft?.values ?? {}, column.id) : row.getValue(column.id),
+				draft: context.mode === "row" ? localText.value : grid.editor?.draft ?? "",
+				spec: spec ?? { kind: "text" },
+				finish: (direction) => {
+					if (context.mode === "row") context.save();
+					else submit(void 0, direction === "left" || direction === "right" ? direction : void 0);
+				},
+				input,
+				update: input,
+				commit: submit,
+				cancel,
+				issues,
+				pending: pending.value,
+				attrs: issueAttrs(id, issues, pending.value)
+			};
+			return h(DataTableCell, {
+				ref: (target) => {
+					element.value = target && typeof target === "object" && "$el" in target ? target.$el : void 0;
+				},
+				row,
+				column,
+				tree: props.tree,
+				"data-edit-cell": "",
+				"data-editable": editable ? "" : void 0,
+				"data-editing": editing ? "" : void 0,
+				"data-dirty": row.isDirty ? "" : void 0,
+				...issueAttrs(id, issues, pending.value),
+				tabindex: editable ? 0 : void 0,
+				onFocus: (event) => {
+					if (event.target === element.value && !grid.editor) grid.focusCell(position());
+				},
+				onDblclick: () => {
+					if (editable && context.mode === "cell") {
+						grid.focusCell(position());
+						grid.startEdit(editorText(row.getValue(column.id), grid.editorFor(position())?.kind ?? "text"));
+					}
+				},
+				onKeydown: (event) => {
+					if (event.target === element.value && event.key === "Enter" && editable) {
+						event.preventDefault();
+						event.stopPropagation();
+						if (context.mode === "row") context.start(row);
+						else {
+							grid.focusCell(position());
+							grid.startEdit(editorText(row.getValue(column.id), grid.editorFor(position())?.kind ?? "text"));
+						}
+					}
+				}
+			}, { default: ({ value, display }) => [editing ? slots.editor?.(editor) ?? h(DataCellEditor, {
+				editor,
+				spec: spec ?? { kind: "text" },
+				autofocus: context.mode === "cell" || table.columns.find((candidate) => candidate.isEditable(row.original))?.id === column.id,
+				blurCommit: context.mode === "cell",
+				tabCommit: context.mode === "cell",
+				finish: (direction) => {
+					if (context.mode === "row") context.save();
+					else submit(void 0, direction === "left" || direction === "right" ? direction : void 0);
+				}
+			}) : slots.default?.({
+				row,
+				value,
+				display
+			}) ?? display, editorIssues(id, issues, pending.value)] });
+		};
+	}
+});
+/** One active row form. Controls share the provider's draft and core save/undo path. */
+const DataTableRowActions = defineComponent({
+	name: "DataTableRowActions",
+	props: {
+		row: rowProp,
+		editable: {
+			type: Boolean,
+			default: true
+		},
+		removable: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(props) {
+		const table = injectDataTable("<DataTableRowActions>");
+		const context = inject(editingKey, void 0);
+		const id = useEditorId();
+		const element = shallowRef();
+		watch(() => context?.draft?.rowKey === props.row.key, (active, previous) => {
+			const target = element.value;
+			if (previous && !active && !context?.draft && target?.closest("tr")?.contains(target.ownerDocument.activeElement)) nextTick(() => target.querySelector("button[data-edit-row]")?.focus());
+		});
+		return () => {
+			const draft = context?.draft?.rowKey === props.row.key ? context.draft : void 0;
+			const issues = [...new Map(draft?.issues.map((problem) => [problem.message, problem])).values()];
+			const button = (label, action, disabled = false) => h("button", {
+				type: "button",
+				disabled,
+				"aria-label": `${label}, row ${String(props.row.key)}`,
+				"data-edit-row": label === "Edit row" ? "" : void 0,
+				...label === "Save row" ? issueAttrs(id, issues, !!draft?.pending) : {},
+				onClick: action
+			}, label);
+			return h("div", {
+				ref: element,
+				"data-row-actions": "",
+				role: "group",
+				"aria-label": `Row ${String(props.row.key)} actions`,
+				"aria-busy": draft?.pending ? "true" : void 0
+			}, [
+				...context?.mode === "row" && props.editable ? draft ? [button("Save row", () => context.save(), draft.pending), button("Cancel", () => context.cancel(props.row.key), draft.pending)] : [button("Edit row", () => context.start(props.row))] : [],
+				h("details", { onToggle: (event) => {
+					const menu = event.currentTarget;
+					if (menu.open) nextTick(() => menu.scrollIntoView?.({
+						block: "nearest",
+						inline: "nearest"
+					}));
+				} }, [h("summary", { "aria-label": `Actions for row ${String(props.row.key)}` }, "Actions"), h("div", { "data-row-menu": "" }, [button("Revert row", () => table.revert([props.row.key]), !props.row.isDirty || !!draft), props.removable ? button("Remove row", () => table.removeRows([props.row.key]), !!draft) : null])]),
+				editorIssues(id, issues, !!draft?.pending)
+			]);
+		};
+	}
+});
+
 //#endregion
 //#region src/grid.ts
 const gridContextKey = Symbol("vueye-table-grid-context");
@@ -510,12 +1663,26 @@ const DataGridRoot = defineComponent({
 		label: {
 			type: String,
 			default: void 0
+		},
+		...virtualProps,
+		...hierarchyProps,
+		...columnLayoutProps,
+		/** Width reserved before data columns, for a row-number/header column. */
+		gutter: {
+			type: Number,
+			default: 0
 		}
 	},
-	setup(props, { slots, expose }) {
+	emits: {
+		save: (_result) => true,
+		cancel: (_key) => true
+	},
+	setup(props, { slots, expose, emit }) {
 		provideDataTable(props.table);
-		const grid = useDataGrid(props.table);
+		provideColumnOffset(() => props.leadingColumns);
+		const grid = useDataGrid(props.table, { treeColumn: () => props.treeColumn });
 		provideDataGrid(grid);
+		provideHierarchy(props.table, props);
 		const element = ref();
 		const id = `vt-grid-${useId()}`;
 		const focus = () => {
@@ -523,14 +1690,52 @@ const DataGridRoot = defineComponent({
 		};
 		provide(gridContextKey, {
 			id,
-			focus
+			focus,
+			cancel: (key) => emit("cancel", key)
+		});
+		watch(() => grid.lastResult, (result) => {
+			if (result && [
+				"applied",
+				"partial",
+				"unchanged"
+			].includes(result.status)) emit("save", result);
 		});
 		expose({
 			grid,
 			focus
 		});
+		let virtual;
 		const onKeydown = (event) => {
 			if (event.target !== element.value) return;
+			if (event.key === " " && !grid.editor && !event.ctrlKey && !event.metaKey && !event.altKey && grid.toggleCheckbox()) {
+				event.preventDefault();
+				return;
+			}
+			if (virtual && !grid.editor && (event.ctrlKey || event.metaKey) && (event.key === "Home" || event.key === "End")) {
+				grid.focusCell(event.key === "Home" ? {
+					row: 0,
+					column: 0
+				} : {
+					row: props.table.rows.length - 1,
+					column: props.table.columns.length - 1
+				}, { extend: event.shiftKey });
+				event.preventDefault();
+				return;
+			}
+			if (virtual && !grid.editor && (event.key === "PageUp" || event.key === "PageDown")) {
+				const current = grid.selection?.focus ?? {
+					row: 0,
+					column: 0
+				};
+				const item = virtual.rowItems.find((entry) => entry.renderItem.rowIndex === current.row);
+				const step = Math.max(1, Math.floor(virtual.rows.viewportSize / (item?.size ?? props.rowHeight)));
+				grid.focusCell({
+					row: current.row + (event.key === "PageDown" ? step : -step),
+					column: current.column
+				}, { extend: event.shiftKey });
+				event.preventDefault();
+				return;
+			}
 			if (grid.handleKey(event)) event.preventDefault();
 		};
 		const onCopy = (event, cut = false) => {
@@ -540,32 +1745,54 @@ const DataGridRoot = defineComponent({
 			if (cut) grid.clear();
 		};
 		const onPaste = (event) => {
+			if (grid.editor || event.defaultPrevented) return;
 			const text = event.clipboardData?.getData("text/plain");
-			if (grid.editor || text === void 0 || text === "") return;
+			if (text === void 0 || text === "") return;
 			event.preventDefault();
 			grid.paste(text);
 		};
-		return () => {
+		const render = (binding) => {
+			virtual = binding;
 			const focusPosition = grid.selection?.focus;
 			return h(props.as, {
 				ref: element,
 				id,
-				role: "grid",
+				role: props.table.tree ? "treegrid" : "grid",
 				tabindex: 0,
 				"aria-label": props.label,
 				"aria-multiselectable": "true",
-				"aria-rowcount": props.table.rows.length + 1,
-				"aria-colcount": props.table.columns.length,
+				"aria-rowcount": (props.table.tree ? props.table.processedRows.length : binding ? props.table.rowCount : props.table.rows.length) + 1,
+				"aria-colcount": props.table.columns.length + props.leadingColumns,
+				"aria-busy": props.table.loadState === "loading" || props.table.loadState === "streaming" ? "true" : void 0,
 				"aria-activedescendant": focusPosition && !grid.editor ? cellId(id, focusPosition.row, focusPosition.column) : void 0,
 				onKeydown,
 				onCopy: (event) => onCopy(event),
 				onCut: (event) => onCopy(event, true),
-				onPaste
-			}, slots.default?.({
+				onPaste,
+				...binding ? {
+					"data-virtual": "",
+					style: binding.columns ? {
+						tableLayout: "fixed",
+						width: `${binding.columns.totalSize + binding.gutter}px`
+					} : void 0
+				} : {}
+			}, binding ? [virtualColgroup(props.table.columns, binding), slots.default?.({
+				table: props.table,
+				grid
+			}) ?? [h(DataTableHeader), h(DataGridBody)]] : slots.default?.({
 				table: props.table,
 				grid
 			}) ?? [h(DataTableHeader), h(DataGridBody)]);
 		};
+		return () => props.virtual ? h(VirtualContent, {
+			table: props.table,
+			grid,
+			options: virtualOptions(props),
+			virtualColumns: props.virtualColumns,
+			gutter: props.gutter,
+			tableElement: () => element.value,
+			render
+		}) : render();
 	}
 });
 /**
@@ -575,70 +1802,103 @@ const DataGridRoot = defineComponent({
 const DataGridBody = defineComponent({
 	name: "DataGridBody",
 	slots: Object,
-	props: { as: asProp("tbody") },
+	props: {
+		as: asProp("tbody"),
+		...virtualProps,
+		colspan: {
+			type: Number,
+			default: void 0
+		},
+		treeCell: {
+			type: Boolean,
+			default: true
+		}
+	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataGridBody>");
-		return () => h(props.as, slots.default?.({ rows: table.rows }) ?? table.rows.map((row, rowIndex) => h("tr", {
-			key: row.key,
-			role: "row",
-			"aria-rowindex": rowIndex + 2,
-			"data-key": String(row.key)
-		}, [slots.rowHeader?.({
-			row,
-			index: rowIndex
-		}), ...table.columns.map((column, columnIndex) => h(DataGridCell, {
-			key: column.id,
-			row,
-			column,
-			rowIndex,
-			columnIndex
-		}, slots.cell ? { default: (cellProps) => slots.cell?.(cellProps) } : void 0))])));
-	}
-});
-/** The text box shown in a cell while it is edited. */
-const DataGridEditor = defineComponent({
-	name: "DataGridEditor",
-	props: { label: {
-		type: String,
-		required: true
-	} },
-	setup(props) {
-		const { grid, context } = useGrid("<DataGridEditor>");
-		const input = ref();
-		onMounted(() => {
-			const element = input.value;
-			if (element) {
-				element.focus();
-				element.setSelectionRange(element.value.length, element.value.length);
+		const { grid } = useGrid("<DataGridBody>");
+		const virtual = injectVirtual();
+		const hierarchy = injectHierarchy();
+		const details = createDetails(table, () => slots.detail, () => props.colspan ?? table.columns.length + (slots.rowHeader ? 1 : 0));
+		const element = ref();
+		const render = (binding) => {
+			if (binding && slots.default) {
+				const sentinel = loadSentinel(table, props.colspan ?? table.columns.length + (slots.rowHeader ? 1 : 0));
+				const content = slots.default({ rows: binding.rowItems.filter((item) => item.renderItem.kind === "row").map((item) => item.renderItem.row) });
+				return h(props.as, { ref: element }, sentinel ? [...content, sentinel] : content);
 			}
-		});
-		const finish = (then) => {
-			grid.commitEdit(then);
-			context.focus();
+			if (binding) return h(props.as, { ref: element }, [
+				...renderRows(binding, props.colspan ?? table.columns.length + (slots.rowHeader ? 1 : 0), (item) => {
+					if (item.renderItem.kind !== "row") return details.render(item.renderItem.row, item.renderItem.rowIndex);
+					const { row, rowIndex } = item.renderItem;
+					const columns = renderColumns(table.columns, binding, (column, columnIndex) => h(DataGridCell, {
+						key: column.id,
+						row,
+						column,
+						rowIndex,
+						columnIndex,
+						tree: props.treeCell
+					}, {
+						default: slots.cell,
+						editor: slots.editor,
+						$stable: true
+					}), "td");
+					return h("tr", {
+						key: item.key,
+						role: "row",
+						"aria-rowindex": table.pageStart + rowIndex + 1,
+						"data-key": String(row.key),
+						"data-dirty": flag(row.isDirty),
+						...hierarchyRowAttrs(table, row, hierarchy),
+						"data-virtual-row": "",
+						ref: (target) => binding.rows.measureElement(target, item.key)
+					}, [slots.rowHeader?.({
+						row,
+						index: rowIndex
+					}), ...columns]);
+				}),
+				...details.retained(new Set(binding.rowItems.filter((item) => item.renderItem.kind === "detail").map((item) => item.renderItem.row.key))),
+				...loadSentinel(table, props.colspan ?? table.columns.length + (slots.rowHeader ? 1 : 0)) ? [loadSentinel(table, props.colspan ?? table.columns.length + (slots.rowHeader ? 1 : 0))] : []
+			]);
+			const content = slots.default?.({ rows: table.rows }) ?? table.renderItems.map((item) => item.kind === "detail" ? details.render(item.row, item.rowIndex) : (() => {
+				const { row, rowIndex } = item;
+				return h("tr", {
+					key: item.key,
+					role: "row",
+					"aria-rowindex": rowIndex + 2,
+					"data-key": String(row.key),
+					"data-dirty": flag(row.isDirty),
+					...hierarchyRowAttrs(table, row, hierarchy)
+				}, [slots.rowHeader?.({
+					row,
+					index: rowIndex
+				}), ...table.columns.map((column, columnIndex) => h(DataGridCell, {
+					key: column.id,
+					row,
+					column,
+					rowIndex,
+					columnIndex,
+					tree: props.treeCell
+				}, {
+					default: slots.cell,
+					editor: slots.editor,
+					$stable: true
+				}))]);
+			})());
+			const sentinel = loadSentinel(table, props.colspan ?? table.columns.length + (slots.rowHeader ? 1 : 0));
+			return h(props.as, [
+				...content,
+				...slots.default ? [] : details.retained(new Set(table.renderItems.filter((item) => item.kind === "detail").map((item) => item.row.key))),
+				sentinel
+			]);
 		};
-		return () => h("input", {
-			ref: input,
-			value: grid.editor?.draft ?? "",
-			"aria-label": props.label,
-			"data-editor": "",
-			onInput: (event) => grid.updateDraft(event.target.value),
-			onBlur: () => {
-				if (grid.editor) grid.commitEdit();
-			},
-			onKeydown: (event) => {
-				if (event.key === "Enter") {
-					event.preventDefault();
-					finish(event.shiftKey ? "up" : "down");
-				} else if (event.key === "Tab") {
-					event.preventDefault();
-					finish(event.shiftKey ? "left" : "right");
-				} else if (event.key === "Escape") {
-					event.preventDefault();
-					grid.cancelEdit();
-					context.focus();
-				}
-			}
-		});
+		return () => props.virtual && !virtual ? h(VirtualContent, {
+			table,
+			grid,
+			options: virtualOptions(props),
+			tableElement: () => element.value?.closest("table"),
+			render
+		}) : render(virtual);
 	}
 });
 /**
@@ -652,6 +1912,10 @@ const DataGridCell = defineComponent({
 		row: rowProp,
 		column: columnProp,
 		as: asProp("td"),
+		tree: {
+			type: Boolean,
+			default: true
+		},
 		/** The row's position on the page. Found by searching the rows when left out. */
 		rowIndex: {
 			type: Number,
@@ -665,14 +1929,18 @@ const DataGridCell = defineComponent({
 	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataGridCell>");
+		const columnOffset = injectColumnOffset();
 		const { grid, context } = useGrid("<DataGridCell>");
+		const virtual = injectVirtual();
+		const hierarchy = injectHierarchy();
 		const element = ref();
+		const issueId = useEditorId();
 		const position = () => ({
 			row: props.rowIndex ?? table.rows.indexOf(props.row),
 			column: props.columnIndex ?? table.columns.indexOf(props.column)
 		});
 		watch(() => grid.isFocused(position()), (focused) => {
-			if (focused) element.value?.scrollIntoView?.({
+			if (focused && !virtual) element.value?.scrollIntoView?.({
 				block: "nearest",
 				inline: "nearest"
 			});
@@ -684,33 +1952,72 @@ const DataGridCell = defineComponent({
 			const editable = column.isEditable(row.original);
 			const value = row.getValue(column.id);
 			const display = row.getDisplay(column.id);
+			const issues = row.cellIssues?.get(column.id) ? [row.cellIssues.get(column.id)] : grid.lastResult?.issues.filter((problem) => problem.rowKey === row.key && (problem.column === column.id || !problem.column)) ?? [];
+			const pending = table.pendingCells.some((cell) => cell.rowKey === row.key && cell.column === column.id);
+			const finish = (edit, direction) => {
+				const result = grid.submitEdit(edit, direction);
+				const focus = () => {
+					if (!grid.editor) context.focus();
+				};
+				if (result?.completion) result.completion.then(focus);
+				else focus();
+				return result;
+			};
 			let content;
-			if (editing) content = slots.editor?.({
-				draft: grid.editor?.draft ?? "",
-				update: (draft) => grid.updateDraft(draft),
-				commit: (then) => grid.commitEdit(then),
-				cancel: () => grid.cancelEdit()
-			}) ?? h(DataGridEditor, { label: `Edit ${column.header}` });
-			else content = slots.default?.({
-				row,
-				column,
-				value,
-				display,
-				editable
-			}) ?? display;
+			if (editing) {
+				const editor = {
+					row,
+					column,
+					value,
+					draft: grid.editor?.draft ?? "",
+					spec: grid.editorFor(at) ?? { kind: "text" },
+					finish: (direction) => {
+						finish(void 0, direction);
+					},
+					input: (text) => grid.updateDraft(text),
+					update: (text) => grid.updateDraft(text),
+					commit: (next) => finish(next === void 0 ? void 0 : typeof next === "string" ? { input: next } : { value: next }),
+					cancel: () => {
+						if (!pending) {
+							grid.cancelEdit();
+							context.cancel(row.key);
+							context.focus();
+						}
+					},
+					issues,
+					pending,
+					attrs: issueAttrs(issueId, issues, pending)
+				};
+				content = slots.editor?.(editor) ?? h(DataCellEditor, {
+					editor,
+					spec: grid.editorFor(at) ?? { kind: "text" },
+					finish: (direction) => finish(void 0, direction)
+				});
+			} else {
+				const children = () => slots.default?.({
+					row,
+					column,
+					value,
+					display,
+					editable
+				}) ?? display;
+				content = props.tree && table.tree && column.id === resolveTreeColumn(table, hierarchy?.treeColumn) ? h(DataTableTreeCell, { row }, { default: children }) : children();
+			}
 			return h(props.as, {
 				ref: element,
 				id: cellId(context.id, at.row, at.column),
 				role: "gridcell",
 				"aria-selected": String(grid.isSelected(at)),
 				"aria-readonly": editable ? void 0 : "true",
-				"aria-colindex": at.column + 1,
+				"aria-colindex": at.column + columnOffset() + 1,
 				"data-column": column.id,
 				"data-align": column.align,
 				"data-focused": flag(grid.isFocused(at)),
 				"data-selected": flag(grid.isSelected(at)),
 				"data-editing": flag(editing),
 				"data-readonly": flag(!editable),
+				"data-dirty": flag(row.isDirty),
+				...issueAttrs(issueId, issues, pending),
 				style: columnStyle(column),
 				onMousedown: (event) => {
 					if (editing || event.button !== 0) return;
@@ -722,13 +2029,13 @@ const DataGridCell = defineComponent({
 				},
 				onDblclick: () => {
 					grid.focusCell(at);
-					grid.startEdit();
+					grid.startEdit(editorText(value, grid.editorFor(at)?.kind ?? "text"));
 				}
-			}, content);
+			}, [content, editorIssues(issueId, issues, pending)]);
 		};
 	}
 });
 
 //#endregion
-export { DataGridBody, DataGridCell, DataGridRoot, DataTableBody, DataTableCaption, DataTableCell, DataTableColumnVisibility, DataTableEmpty, DataTableHeader, DataTableHeaderCell, DataTableHeaderRow, DataTablePageSize, DataTablePagination, DataTableRoot, DataTableRow, DataTableSearch, DataTableSelectAll, DataTableSelectRow, DataTableSortButton, DataTableStatus, cellId, columnStyle };
+export { DataCellEditor, DataGridBody, DataGridCell, DataGridRoot, DataTableBody, DataTableCaption, DataTableCell, DataTableColumnVisibility, DataTableDetailRow, DataTableEditCell, DataTableEditRoot, DataTableEmpty, DataTableExpandToggle, DataTableHeader, DataTableHeaderCell, DataTableHeaderRow, DataTableLoadMore, DataTablePageSize, DataTablePagination, DataTableRoot, DataTableRow, DataTableRowActions, DataTableSearch, DataTableSelectAll, DataTableSelectRow, DataTableSortButton, DataTableStatus, DataTableTreeCell, DataTableViewport, DataTableVirtualColumns, cellEditorProps, cellId, columnStyle, expandToggleProps, hierarchyProps, injectVirtual as injectVirtualRenderer, resolveTreeColumn, treeCellProps, virtualProps };
 //# sourceMappingURL=index.js.map