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

package/dist/index.js

@@ -1,8 +1,20 @@
-import { injectDataGrid, injectDataTable, provideDataGrid, provideDataTable, useDataGrid, useVirtualColumns, useVirtualRows } from "@vueye-table/vue";
+import { injectDataGrid, injectDataTable, provideDataGrid, provideDataTable, useDataGrid, useTableLocale, 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,
@@ -20,6 +32,13 @@ const rowProp = {
 function flag(value) {
 	return value ? "" : void 0;
 }
+/**
+* The direction an element is laid out in, read from the nearest `dir` attribute, so keyboard
+* arrows can follow what the reader sees. Without one, left to right.
+*/
+function directionOf(element) {
+	return element?.closest("[dir]")?.getAttribute("dir")?.toLowerCase() === "rtl" ? "rtl" : "ltr";
+}
 
 //#endregion
 //#region src/controls.ts
@@ -43,10 +62,11 @@ const DataTableSelectAll = defineComponent({
 	slots: Object,
 	props: { label: {
 		type: String,
-		default: "Select all rows"
+		default: void 0
 	} },
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableSelectAll>");
+		const locale = useTableLocale();
 		return () => {
 			const state = table.allSelection;
 			const toggle = () => table.toggleAll();
@@ -56,7 +76,7 @@ const DataTableSelectAll = defineComponent({
 			}) ?? checkbox({
 				checked: state === "all",
 				indeterminate: state === "some",
-				label: props.label,
+				label: props.label ?? locale().messages.selectAllRows,
 				disabled: table.selectionMode !== "multiple" || table.rows.length === 0,
 				onChange: toggle
 			});
@@ -69,13 +89,19 @@ const DataTableSelectRow = defineComponent({
 	slots: Object,
 	props: {
 		row: rowProp,
+		/** Defaults to the locale's "Select row 3", the row's place in the table as shown. */
 		label: {
 			type: String,
-			default: "Select row"
+			default: void 0
 		}
 	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableSelectRow>");
+		const locale = useTableLocale();
+		const position = () => {
+			const index = table.rows.indexOf(props.row);
+			return index < 0 ? props.row.index + 1 : Math.max(1, table.pageStart) + index;
+		};
 		return () => {
 			const selected = table.tree ? props.row.selection === "all" : table.isSelected(props.row.key);
 			const indeterminate = table.tree && props.row.selection === "some";
@@ -87,7 +113,7 @@ const DataTableSelectRow = defineComponent({
 			}) ?? checkbox({
 				checked: selected,
 				indeterminate,
-				label: props.label,
+				label: props.label ?? locale().messages.selectRow({ position: locale().count(position()) }),
 				disabled: table.selectionMode === "none",
 				onChange: toggle
 			});
@@ -107,7 +133,7 @@ const DataTableSearch = defineComponent({
 		},
 		label: {
 			type: String,
-			default: "Search"
+			default: void 0
 		},
 		placeholder: {
 			type: String,
@@ -116,13 +142,14 @@ const DataTableSearch = defineComponent({
 	},
 	setup(props) {
 		const table = injectDataTable("<DataTableSearch>");
+		const locale = useTableLocale();
 		let timer;
 		onScopeDispose(() => clearTimeout(timer));
 		return () => h("input", {
 			type: "search",
 			value: table.state.search,
 			placeholder: props.placeholder,
-			"aria-label": props.label,
+			"aria-label": props.label ?? locale().messages.search,
 			onInput: (event) => {
 				const { value } = event.target;
 				clearTimeout(timer);
@@ -143,12 +170,14 @@ const DataTablePagination = defineComponent({
 		as: asProp("nav"),
 		label: {
 			type: String,
-			default: "Pagination"
+			default: void 0
 		}
 	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTablePagination>");
+		const locale = useTableLocale();
 		return () => {
+			const { messages, count } = locale();
 			const slotProps = {
 				page: table.page,
 				pageCount: table.pageCount,
@@ -167,14 +196,14 @@ const DataTablePagination = defineComponent({
 				"data-current": flag(current),
 				onClick
 			}, content);
-			return h(props.as, { "aria-label": props.label }, slots.default?.(slotProps) ?? [
-				button("Previous page", "‹", !table.canPreviousPage, table.previousPage),
+			return h(props.as, { "aria-label": props.label ?? messages.pagination }, slots.default?.(slotProps) ?? [
+				button(messages.previousPage, "‹", !table.canPreviousPage, table.previousPage),
 				...table.pageItems.map((item) => item.type === "gap" ? h("span", {
 					key: item.key,
 					"aria-hidden": "true",
 					"data-gap": ""
-				}, "…") : button(`Page ${item.page}`, String(item.page), false, () => table.goToPage(item.page), item.current)),
-				button("Next page", "›", !table.canNextPage, table.nextPage)
+				}, "…") : button(messages.page(count(item.page)), count(item.page).text, false, () => table.goToPage(item.page), item.current)),
+				button(messages.nextPage, "›", !table.canNextPage, table.nextPage)
 			]);
 		};
 	}
@@ -194,22 +223,23 @@ const DataTablePageSize = defineComponent({
 		},
 		label: {
 			type: String,
-			default: "Rows per page"
+			default: void 0
 		}
 	},
 	setup(props) {
 		const table = injectDataTable("<DataTablePageSize>");
+		const locale = useTableLocale();
 		return () => {
 			const sizes = props.options.includes(table.pageSize) ? props.options : [...props.options, table.pageSize].toSorted((left, right) => left - right);
 			return h("select", {
 				value: table.pageSize,
-				"aria-label": props.label,
+				"aria-label": props.label ?? locale().messages.rowsPerPage,
 				onChange: (event) => table.setPageSize(Number(event.target.value))
 			}, sizes.map((size) => h("option", {
 				key: size,
 				value: size,
 				selected: size === table.pageSize
-			}, String(size))));
+			}, locale().count(size).text)));
 		};
 	}
 });
@@ -221,11 +251,12 @@ const DataTableColumnVisibility = defineComponent({
 		as: asProp("fieldset"),
 		legend: {
 			type: String,
-			default: "Columns"
+			default: void 0
 		}
 	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableColumnVisibility>");
+		const locale = useTableLocale();
 		return () => {
 			const hidden = new Set(table.state.hiddenColumns);
 			const columns = table.allColumns.map((column) => ({
@@ -235,7 +266,7 @@ const DataTableColumnVisibility = defineComponent({
 			return h(props.as, slots.default?.({
 				columns,
 				toggle: table.toggleColumn
-			}) ?? [props.as === "fieldset" ? h("legend", props.legend) : null, ...columns.map(({ column, visible }) => h("label", {
+			}) ?? [props.as === "fieldset" ? h("legend", props.legend ?? locale().messages.columns) : null, ...columns.map(({ column, visible }) => h("label", {
 				key: column.id,
 				"data-column": column.id
 			}, [h("input", {
@@ -253,7 +284,9 @@ const DataTableStatus = defineComponent({
 	props: { as: asProp("p") },
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableStatus>");
+		const locale = useTableLocale();
 		return () => {
+			const { messages, count } = locale();
 			const slotProps = {
 				start: table.pageStart,
 				end: table.pageEnd,
@@ -269,12 +302,23 @@ const DataTableStatus = defineComponent({
 				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` : "");
+			const text = table.loadingMode ? messages.loadedStatus({
+				loaded: count(table.loadedRowCount),
+				state: table.loadState
+			}) : table.rowCount === 0 ? messages.noRows : messages.rangeStatus({
+				start: count(table.pageStart),
+				end: count(table.pageEnd),
+				total: count(table.rowCount),
+				selected: count(table.selectedCount)
+			});
 			return h(props.as, {
 				role: "status",
 				"aria-live": "polite"
-			}, slots.default?.(slotProps) ?? text + (slotProps.loadingChildrenCount ? " Loading children…" : "") + (slotProps.childErrorCount ? " Could not load children. Retry children in the affected row." : ""));
+			}, slots.default?.(slotProps) ?? [
+				text,
+				slotProps.loadingChildrenCount ? messages.loadingChildren : "",
+				slotProps.childErrorCount ? messages.childrenError : ""
+			].filter((part) => part !== "").join(" "));
 		};
 	}
 });
@@ -282,7 +326,7 @@ const DataTableStatus = defineComponent({
 //#endregion
 //#region src/loading.ts
 /** Keep this visual sentinel out of the live region and logical data-row count. */
-function loadSentinel(table, colspan) {
+function loadSentinel(table, colspan, locale) {
 	return table.loadingMode === "cursor" && table.loadedRowCount > 0 && (table.loadState === "loading" || table.loadState === "streaming") ? h("tr", {
 		key: "vt-load-sentinel",
 		"data-load-sentinel": "",
@@ -290,7 +334,7 @@ function loadSentinel(table, colspan) {
 	}, [h("td", {
 		colspan: Math.max(1, colspan),
 		class: "vt-load-sentinel"
-	}, "Loading more rows…")]) : void 0;
+	}, locale?.messages.loadingMoreRows ?? "Loading more rows…")]) : void 0;
 }
 /** A keyboard-accessible alternative to automatic virtual-end loading, with error recovery. */
 const DataTableLoadMore = defineComponent({
@@ -298,32 +342,202 @@ const DataTableLoadMore = defineComponent({
 	props: {
 		label: {
 			type: String,
-			default: "Load more rows"
+			default: void 0
 		},
 		retryLabel: {
 			type: String,
-			default: "Retry loading"
+			default: void 0
 		},
 		loadingLabel: {
 			type: String,
-			default: "Loading rows…"
+			default: void 0
 		}
 	},
 	setup(props) {
 		const table = injectDataTable("<DataTableLoadMore>");
+		const locale = useTableLocale();
 		return () => table.loadState === "error" ? h("button", {
 			type: "button",
 			onClick: () => table.retry()
-		}, props.retryLabel) : table.loadingMode === "cursor" && table.loadState !== "done" ? h("button", {
+		}, props.retryLabel ?? locale().messages.retryLoading) : 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;
+		}, table.loadState === "loading" || table.loadState === "streaming" ? props.loadingLabel ?? locale().messages.loadingRows : props.label ?? locale().messages.loadMoreRows) : 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 locale = useTableLocale();
+		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 { messages, count } = locale();
+			const attrs = {
+				...editor.attrs,
+				"aria-label": messages.editCell(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": messages.searchOptions(editor.column.header),
+						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
+					}, value === null || value === void 0 ? messages.emptyOption : String(value)))),
+					h("span", {
+						role: "status",
+						"data-editor-hint": ""
+					}, matches.value.length === 0 ? messages.noMatchingOptions : matches.value.length > 50 ? messages.firstMatchesOnly(count(50)) : messages.optionCount(count(matches.value.length)))
+				]);
+			}
+			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. */
@@ -646,7 +860,14 @@ function treeKeydown(event, context, virtual) {
 	const index = table.rows.findIndex((row) => getRowItemKey(row.key) === key);
 	const row = table.rows[index];
 	if (!row) return;
-	const command = gridCommand(event, {
+	const command = gridCommand({
+		key: event.key,
+		shiftKey: event.shiftKey,
+		ctrlKey: event.ctrlKey,
+		metaKey: event.metaKey,
+		altKey: event.altKey,
+		direction: directionOf(target)
+	}, {
 		canExpand: row.canExpand,
 		expanded: row.isExpanded
 	});
@@ -660,10 +881,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,
@@ -673,11 +895,11 @@ const expandToggleProps = {
 	},
 	expandLabel: {
 		type: String,
-		default: "Expand row"
+		default: void 0
 	},
 	collapseLabel: {
 		type: String,
-		default: "Collapse row"
+		default: void 0
 	}
 };
 const treeCellProps = {
@@ -692,13 +914,15 @@ const DataTableExpandToggle = defineComponent({
 		const table = injectDataTable("<DataTableExpandToggle>");
 		const context = injectHierarchy();
 		const grid = injectDataGrid();
+		const locale = useTableLocale();
+		const label = () => props.row.isExpanded ? props.collapseLabel ?? locale().messages.collapseRow : props.expandLabel ?? locale().messages.expandRow;
 		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,
+			"aria-label": label(),
 			onMousedown: (event) => event.stopPropagation(),
 			onDblclick: (event) => event.stopPropagation(),
 			onClick: (event) => {
@@ -713,7 +937,7 @@ const DataTableExpandToggle = defineComponent({
 		}, slots.default?.({
 			row: props.row,
 			expanded: props.row.isExpanded
-		}) ?? (props.row.isExpanded ? props.collapseLabel : props.expandLabel)) : null;
+		}) ?? label()) : null;
 	}
 });
 const DataTableTreeCell = defineComponent({
@@ -724,6 +948,7 @@ const DataTableTreeCell = defineComponent({
 		const table = injectDataTable("<DataTableTreeCell>");
 		const context = injectHierarchy();
 		const grid = injectDataGrid();
+		const locale = useTableLocale();
 		return () => h(props.as, {
 			class: "vt-tree-cell",
 			"data-tree-cell": "",
@@ -731,8 +956,8 @@ const DataTableTreeCell = defineComponent({
 		}, [
 			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", {
+			props.row.childStatus === "loading" ? h("span", { class: "vt-tree-loading" }, locale().messages.loadingChildren) : null,
+			props.row.childStatus === "error" ? h("span", { class: "vt-tree-error" }, [`${locale().messages.childrenError} `, h("button", {
 				type: "button",
 				class: "vt-tree-retry",
 				onMousedown: (event) => event.stopPropagation(),
@@ -749,7 +974,7 @@ const DataTableTreeCell = defineComponent({
 						else element?.ownerDocument.getElementById(itemId(context, props.row) ?? "")?.focus();
 					});
 				}
-			}, "Retry children")]) : null
+			}, locale().messages.retryChildren)]) : null
 		]);
 	}
 });
@@ -840,16 +1065,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 +1088,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 +1158,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 +1176,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);
 		};
 	}
@@ -971,13 +1200,14 @@ const DataTableSortButton = defineComponent({
 	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableSortButton>");
+		const locale = useTableLocale();
 		return () => {
 			const sort = table.getSort(props.column.id);
 			const next = !sort ? "ascending" : sort.direction === "asc" ? "descending" : "unsorted";
 			return h(props.as, {
 				type: props.as === "button" ? "button" : void 0,
 				"data-sort": sort?.direction,
-				"aria-label": `${props.column.header}, sort ${next}`,
+				"aria-label": locale().messages.sortBy(props.column.header, next),
 				onClick: (event) => table.toggleSort(props.column.id, { multi: event.shiftKey })
 			}, [slots.default?.({ sort }) ?? props.column.header, slots.indicator?.({ sort })]);
 		};
@@ -1000,6 +1230,7 @@ const DataTableBody = defineComponent({
 	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableBody>");
+		const locale = useTableLocale();
 		const virtual = injectVirtual();
 		const details = createDetails(table, () => slots.detail, () => props.colspan ?? table.columns.length);
 		return () => {
@@ -1013,7 +1244,7 @@ const DataTableBody = defineComponent({
 			}) : 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);
+			const sentinel = loadSentinel(table, props.colspan ?? table.columns.length, locale());
 			return h(props.as, [
 				...Array.isArray(content) ? content : content ? [content] : [],
 				...retained,
@@ -1088,6 +1319,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 +1356,7 @@ const DataTableCell = defineComponent({
 	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableCell>");
+		const columnOffset = injectColumnOffset();
 		const hierarchy = injectHierarchy();
 		return () => {
 			const { row, column } = props;
@@ -1137,7 +1370,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 +1387,301 @@ 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 locale = useTableLocale();
+		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 { messages } = locale();
+			const rowName = String(props.row.key);
+			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, role) => h("button", {
+				type: "button",
+				disabled,
+				"aria-label": messages.actionOnRow(label, rowName),
+				"data-edit-row": role === "edit" ? "" : void 0,
+				...role === "save" ? issueAttrs(id, issues, !!draft?.pending) : {},
+				onClick: action
+			}, label);
+			return h("div", {
+				ref: element,
+				"data-row-actions": "",
+				role: "group",
+				"aria-label": messages.rowActionsFor(rowName),
+				"aria-busy": draft?.pending ? "true" : void 0
+			}, [
+				...context?.mode === "row" && props.editable ? draft ? [button(messages.saveRow, () => context.save(), draft.pending, "save"), button(messages.cancel, () => context.cancel(props.row.key), draft.pending)] : [button(messages.editRow, () => context.start(props.row), false, "edit")] : [],
+				h("details", { onToggle: (event) => {
+					const menu = event.currentTarget;
+					if (menu.open) nextTick(() => menu.scrollIntoView?.({
+						block: "nearest",
+						inline: "nearest"
+					}));
+				} }, [h("summary", { "aria-label": messages.actionsForRow(rowName) }, messages.actions), h("div", { "data-row-menu": "" }, [button(messages.revertRow, () => table.revert([props.row.key]), !props.row.isDirty || !!draft), props.removable ? button(messages.removeRow, () => 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 +1717,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 +1760,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,
@@ -1240,7 +1789,14 @@ const DataGridRoot = defineComponent({
 				event.preventDefault();
 				return;
 			}
-			if (grid.handleKey(event)) event.preventDefault();
+			if (grid.handleKey({
+				key: event.key,
+				shiftKey: event.shiftKey,
+				ctrlKey: event.ctrlKey,
+				metaKey: event.metaKey,
+				altKey: event.altKey,
+				direction: directionOf(event.currentTarget)
+			})) event.preventDefault();
 		};
 		const onCopy = (event, cut = false) => {
 			if (grid.editor || !grid.range || !event.clipboardData) return;
@@ -1249,8 +1805,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 +1822,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 +1898,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 +1927,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 +1939,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 +1961,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 +1989,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 +2012,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 +2069,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 +2089,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