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

package/dist/index.js

@@ -1,8 +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 { getRowItemKey, gridCommand } from "@vueye-table/core";
+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,
@@ -324,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. */
@@ -660,10 +839,11 @@ function treeKeydown(event, context, virtual) {
 	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(() => target.closest("table")?.ownerDocument.getElementById(id ?? "")?.focus());
+	nextTick(() => root?.ownerDocument.getElementById(id ?? "")?.focus());
 }
 const expandToggleProps = {
 	row: rowProp,
@@ -840,16 +1020,19 @@ const DataTableRoot = defineComponent({
 		},
 		as: asProp("table"),
 		...virtualProps,
-		...hierarchyProps
+		...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, {
 			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,
+			"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),
@@ -860,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
@@ -929,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);
@@ -947,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);
 		};
 	}
@@ -1088,6 +1272,7 @@ 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: () => {
@@ -1124,6 +1309,7 @@ const DataTableCell = defineComponent({
 	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableCell>");
+		const columnOffset = injectColumnOffset();
 		const hierarchy = injectHierarchy();
 		return () => {
 			const { row, column } = props;
@@ -1137,7 +1323,8 @@ const DataTableCell = defineComponent({
 			}) ?? display;
 			return h(props.as, {
 				"data-column": column.id,
-				"data-align": column.align
+				"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());
 		};
 	}
@@ -1153,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");
@@ -1188,25 +1667,41 @@ const DataGridRoot = defineComponent({
 		},
 		...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);
+		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,
@@ -1215,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,
@@ -1249,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);
 		};
@@ -1265,7 +1765,7 @@ const DataGridRoot = defineComponent({
 				"aria-label": props.label,
 				"aria-multiselectable": "true",
 				"aria-rowcount": (props.table.tree ? props.table.processedRows.length : binding ? props.table.rowCount : props.table.rows.length) + 1,
-				"aria-colcount": props.table.columns.length,
+				"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,
@@ -1341,12 +1841,17 @@ const DataGridBody = defineComponent({
 						rowIndex,
 						columnIndex,
 						tree: props.treeCell
-					}, slots.cell ? { default: (cellProps) => slots.cell?.(cellProps) } : void 0), "td");
+					}, {
+						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)
@@ -1365,6 +1870,7 @@ const DataGridBody = defineComponent({
 					role: "row",
 					"aria-rowindex": rowIndex + 2,
 					"data-key": String(row.key),
+					"data-dirty": flag(row.isDirty),
 					...hierarchyRowAttrs(table, row, hierarchy)
 				}, [slots.rowHeader?.({
 					row,
@@ -1376,7 +1882,11 @@ const DataGridBody = defineComponent({
 					rowIndex,
 					columnIndex,
 					tree: props.treeCell
-				}, slots.cell ? { default: (cellProps) => slots.cell?.(cellProps) } : void 0))]);
+				}, {
+					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, [
@@ -1394,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.
@@ -1468,10 +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)
@@ -1489,14 +1955,48 @@ 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 {
+			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,
@@ -1512,13 +2012,15 @@ const DataGridCell = defineComponent({
 				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;
@@ -1530,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, DataTableDetailRow, DataTableEmpty, DataTableExpandToggle, DataTableHeader, DataTableHeaderCell, DataTableHeaderRow, DataTableLoadMore, DataTablePageSize, DataTablePagination, DataTableRoot, DataTableRow, DataTableSearch, DataTableSelectAll, DataTableSelectRow, DataTableSortButton, DataTableStatus, DataTableTreeCell, DataTableViewport, DataTableVirtualColumns, cellId, columnStyle, expandToggleProps, hierarchyProps, injectVirtual as injectVirtualRenderer, resolveTreeColumn, treeCellProps, 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