@vueye-table/headless 3.0.0-alpha.8 → 3.0.0-beta.1

package/dist/index.js

@@ -1,7 +1,20 @@
 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
@@ -262,14 +277,16 @@ const DataTableStatus = defineComponent({
 				loadError: table.loadError,
 				canLoadMore: table.canLoadMore,
 				retry: () => table.retry(),
-				loadNext: () => table.loadNext()
+				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 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." : ""));
 		};
 	}
 });
@@ -319,6 +336,173 @@ const DataTableLoadMore = defineComponent({
 	}
 });
 
+//#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. */
@@ -556,6 +740,270 @@ 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();
+	const root = target.closest("table");
+	context.focus.value = next.key;
+	virtual?.rows.scrollToKey(next.key);
+	const id = itemId(context, next);
+	nextTick(() => root?.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
 /**
@@ -571,16 +1019,23 @@ const DataTableRoot = defineComponent({
 			required: true
 		},
 		as: asProp("table"),
-		...virtualProps
+		...virtualProps,
+		...hierarchyProps,
+		...columnLayoutProps
 	},
 	setup(props, { slots }) {
 		provideDataTable(props.table);
+		provideColumnOffset(() => props.leadingColumns);
+		const hierarchy = provideHierarchy(props.table, props);
 		const element = shallowRef();
+		const editingGrid = injectEditingGrid();
 		const render = (virtual) => h(props.as, {
-			"aria-rowcount": props.table.rowCount + 1,
-			"aria-colcount": props.table.columns.length,
+			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": ""
@@ -588,6 +1043,7 @@ const DataTableRoot = defineComponent({
 		}, 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
@@ -657,7 +1113,7 @@ const DataTableHeaderCell = defineComponent({
 	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableHeaderCell>");
-		const virtual = injectVirtual();
+		const columnOffset = injectColumnOffset();
 		return () => {
 			const { column } = props;
 			const sort = table.getSort(column.id);
@@ -675,7 +1131,7 @@ const DataTableHeaderCell = defineComponent({
 				"data-sortable": flag(column.sortable),
 				"data-sort": sort?.direction,
 				style: columnStyle(column),
-				...virtual?.columns ? { "aria-colindex": table.columns.indexOf(column) + 1 } : {}
+				"aria-colindex": table.columns.indexOf(column) + columnOffset() + 1
 			}, content);
 		};
 	}
@@ -729,20 +1185,28 @@ const DataTableBody = defineComponent({
 	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);
+			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
-			}));
+			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, sentinel ? [content, sentinel] : content);
+			return h(props.as, [
+				...Array.isArray(content) ? content : content ? [content] : [],
+				...retained,
+				...sentinel ? [sentinel] : []
+			]);
 		};
 	}
 });
-function renderTableBody(table, virtual, as, colspan, slots, element) {
+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) });
@@ -753,15 +1217,15 @@ function renderTableBody(table, virtual, as, colspan, slots, element) {
 		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" ? h(DataTableRow, {
-		key: item.key,
-		row: item.renderItem.row,
-		rowIndex: item.renderItem.rowIndex
-	}) : h("tr", {
-		key: item.key,
-		"data-detail": "",
-		ref: (target) => virtual.rows.measureElement(target, item.key)
-	}, [h("td", { colspan: Math.max(1, width) }, slots.detail?.(item.renderItem))])), ...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",
@@ -778,7 +1242,8 @@ const VirtualDataTableBody = defineComponent({
 		const table = injectDataTable("<DataTableBody>");
 		const element = shallowRef();
 		const virtual = createComponentVirtual(table, virtualOptions(props), () => element.value?.closest("table"));
-		return () => renderTableBody(table, virtual, props.as, props.colspan, slots, element);
+		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. */
@@ -796,6 +1261,7 @@ const DataTableRow = defineComponent({
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableRow>");
 		const virtual = injectVirtual();
+		const hierarchy = injectHierarchy();
 		return () => {
 			const { row } = props;
 			const selected = table.isSelected(row.key);
@@ -806,6 +1272,12 @@ const DataTableRow = defineComponent({
 				"aria-selected": table.selectionMode === "none" ? void 0 : String(selected),
 				"data-selected": flag(selected),
 				"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": ""
@@ -829,22 +1301,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());
 		};
 	}
 });
@@ -859,6 +1340,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");
@@ -893,24 +1666,42 @@ const DataGridRoot = defineComponent({
 			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 = () => {
-			nextTick(() => element.value?.focus());
+			nextTick(() => {
+				if (!grid.editor) element.value?.focus({ preventScroll: true });
+			});
 		};
 		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,
@@ -919,6 +1710,10 @@ const DataGridRoot = defineComponent({
 		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,
@@ -953,8 +1748,9 @@ 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);
 		};
@@ -964,12 +1760,12 @@ const DataGridRoot = defineComponent({
 			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": (binding ? props.table.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,
@@ -1015,12 +1811,18 @@ const DataGridBody = defineComponent({
 		colspan: {
 			type: Number,
 			default: void 0
+		},
+		treeCell: {
+			type: Boolean,
+			default: true
 		}
 	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataGridBody>");
 		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) {
@@ -1028,53 +1830,70 @@ const DataGridBody = defineComponent({
 				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);
 			}
-			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 h("tr", {
-					key: item.key,
-					"aria-hidden": "true",
-					"data-detail": "",
-					style: { height: `${item.size}px` }
-				}, [h("td", {
-					colspan: Math.max(1, table.columns.length),
-					style: { padding: "0" }
-				})]);
-				const { row, rowIndex } = item.renderItem;
-				const columns = renderColumns(table.columns, binding, (column, columnIndex) => h(DataGridCell, {
-					key: column.id,
-					row,
-					column,
-					rowIndex,
-					columnIndex
-				}, slots.cell ? { default: (cellProps) => slots.cell?.(cellProps) } : void 0), "td");
+			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": table.pageStart + rowIndex + 1,
+					"aria-rowindex": rowIndex + 2,
 					"data-key": String(row.key),
-					"data-virtual-row": "",
-					ref: (target) => binding.rows.measureElement(target, item.key)
+					"data-dirty": flag(row.isDirty),
+					...hierarchyRowAttrs(table, row, hierarchy)
 				}, [slots.rowHeader?.({
 					row,
 					index: rowIndex
-				}), ...columns]);
-			}), ...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.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))]));
+				}), ...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, sentinel ? [...content, sentinel] : content);
+			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 () => props.virtual && !virtual ? h(VirtualContent, {
 			table,
@@ -1085,52 +1904,6 @@ const DataGridBody = defineComponent({
 		}) : render(virtual);
 	}
 });
-/** 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 finish = (then) => {
-			grid.commitEdit(then);
-			context.focus();
-		};
-		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();
-				}
-			}
-		});
-	}
-});
 /**
 * A grid cell. A click selects it, Shift-click or dragging extends the range, and a double click
 * edits it. The `editor` slot replaces the default text box.
@@ -1142,6 +1915,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,
@@ -1155,9 +1932,12 @@ 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)
@@ -1175,33 +1955,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;
@@ -1213,13 +2032,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, DataTableLoadMore, DataTablePageSize, DataTablePagination, DataTableRoot, DataTableRow, DataTableSearch, DataTableSelectAll, DataTableSelectRow, DataTableSortButton, DataTableStatus, DataTableViewport, DataTableVirtualColumns, cellId, columnStyle, injectVirtual as injectVirtualRenderer, virtualProps };
+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