@nubitio/crud 0.5.26 → 0.5.27

package/dist/index.d.mts

@@ -23,6 +23,8 @@ interface GridHandle {
   getSelectedRows: () => DataRecord$1[];
   getFilter: () => unknown[];
   filter: (filterRule: FilterRule | null) => void;
+  hasEditData: () => boolean;
+  saveChanges: () => Promise<boolean>;
 }
 //#endregion
 //#region packages/crud/field/FieldType.d.ts
@@ -974,6 +976,13 @@ interface ResourceConfig<T extends DataRecord$1 = DataRecord$1> {
    * - `'row'` | `'cell'` | `'batch'` enable inline editing when supported.
    */
   editMode?: 'popup' | 'row' | 'cell' | 'batch';
+  /** Toolbar save/revert for inline edit. `false` hides them (use GridHandle instead). */
+  inlineEditToolbar?: boolean | {
+    save?: boolean;
+    revert?: boolean;
+  };
+  /** Per-row save/cancel in the actions column. Defaults by edit mode. */
+  inlineRowActions?: boolean;
   /** Optional layout descriptor for the dialog form: tabs or collapsible sections. */
   formLayout?: FormLayout;
   /** Named column visibility presets. When defined, a preset selector is shown in the toolbar. */
@@ -1543,6 +1552,8 @@ interface DataGridViewOptions {
   id: string;
   title: string;
   url: string;
+  /** Controlled rows. When provided, the grid renders this data instead of loading from url. */
+  data?: DataRecord$1[];
   detailUrl?: string;
   fields: Field[];
   detailFields?: Field[] | ((parentRow: DataRecord$1) => Field[]);
@@ -1581,7 +1592,20 @@ interface DataGridViewOptions {
   stateStoringEnabled?: boolean;
   toolbarVisible?: boolean;
   selectionMode?: 'single' | 'multiple';
-  inlineActions?: boolean;
+  /**
+   * Save / revert buttons shown in the toolbar when inline edits are pending.
+   * Set to `false` to hide and handle persistence via `GridHandle.saveChanges()`.
+   * Defaults to `true` for `cell` and `batch` edit modes.
+   */
+  inlineEditToolbar?: boolean | {
+    save?: boolean;
+    revert?: boolean;
+  };
+  /**
+   * Per-row save / cancel icons in the actions column while a row is being edited.
+   * Defaults to `true` for `row` mode and `false` for `cell` / `batch`.
+   */
+  inlineRowActions?: boolean;
   onBack?: () => void;
   onAdd?: () => void;
   onEdit?: (row: DataRecord$1) => void;
@@ -1591,6 +1615,8 @@ interface DataGridViewOptions {
   onRowPrepared?: (event: unknown) => void;
   onContentReady?: () => void;
   onFilterChange?: (filters: Record<string, string>) => void;
+  /** Custom batch persistence. Defaults to PATCHing each row to url/id when omitted. */
+  onBatchSave?: (rows: DataRecord$1[]) => void | Promise<void>;
   filterRow?: boolean;
   headerFilter?: boolean;
   manualLoad?: boolean;

package/dist/index.mjs

@@ -2156,10 +2156,20 @@ function serializeDetailRows(rows, detailFields, detailIdField, isEditMode, adap
 function canEditFieldInline(field) {
 	return !field.isIdentity && !field.readonly && field.type !== "file" && field.visibleOnForm !== false;
 }
-function useInlineEdit({ mode, url, idField, adapter = HydraAdapter, httpClient, fields, onSaveSuccess, onSaveError }) {
+function valuesEqual$1(a, b) {
+	if (a === b) return true;
+	if (a == null && b == null) return true;
+	if (a == null || b == null) return false;
+	const numA = Number(a);
+	const numB = Number(b);
+	if (!Number.isNaN(numA) && !Number.isNaN(numB)) return numA === numB;
+	return String(a) === String(b);
+}
+function useInlineEdit({ mode, url, idField, adapter = HydraAdapter, httpClient, fields, onSaveSuccess, onSaveError, onBatchSave }) {
 	const [draftRows, setDraftRows] = useState(/* @__PURE__ */ new Map());
 	const [savingRows, setSavingRows] = useState(/* @__PURE__ */ new Set());
 	const [rowErrors, setRowErrors] = useState(/* @__PURE__ */ new Map());
+	const [activeCell, setActiveCell] = useState(null);
 	const draftRowsRef = useRef(draftRows);
 	draftRowsRef.current = draftRows;
 	const optsRef = useRef({
@@ -2169,7 +2179,8 @@ function useInlineEdit({ mode, url, idField, adapter = HydraAdapter, httpClient,
 		httpClient,
 		fields,
 		onSaveSuccess,
-		onSaveError
+		onSaveError,
+		onBatchSave
 	});
 	optsRef.current = {
 		url,
@@ -2178,9 +2189,21 @@ function useInlineEdit({ mode, url, idField, adapter = HydraAdapter, httpClient,
 		httpClient,
 		fields,
 		onSaveSuccess,
-		onSaveError
+		onSaveError,
+		onBatchSave
 	};
-	const isEditing = useCallback((key) => draftRowsRef.current.has(key), []);
+	const isEditing = useCallback((key) => draftRows.has(key), [draftRows]);
+	const isCellActive = useCallback((key, fieldName) => activeCell != null && activeCell.key === key && activeCell.fieldName === fieldName, [activeCell]);
+	const isCellDirty = useCallback((key, fieldName, original) => {
+		const draft = draftRows.get(key);
+		if (!draft) return false;
+		return !valuesEqual$1(draft[fieldName], original[fieldName]);
+	}, [draftRows]);
+	const hasDraftChanges = useCallback((key, original) => {
+		const draft = draftRows.get(key);
+		if (!draft) return false;
+		return optsRef.current.fields.some((field) => canEditFieldInline(field) && !valuesEqual$1(draft[field.name], original[field.name]));
+	}, [draftRows]);
 	const startEdit = useCallback((row) => {
 		const key = row[optsRef.current.idField];
 		setDraftRows((prev) => {
@@ -2192,7 +2215,28 @@ function useInlineEdit({ mode, url, idField, adapter = HydraAdapter, httpClient,
 			next.delete(key);
 			return next;
 		});
+		setActiveCell(null);
 	}, [mode]);
+	const startCellEdit = useCallback((row, fieldName) => {
+		const key = row[optsRef.current.idField];
+		setDraftRows((prev) => {
+			const existing = prev.get(key);
+			const withoutKey = (mode === "row" ? [] : Array.from(prev.entries())).filter(([entryKey]) => entryKey !== key);
+			return new Map([...withoutKey, [key, existing ? { ...existing } : { ...row }]]);
+		});
+		setRowErrors((prev) => {
+			const next = new Map(prev);
+			next.delete(key);
+			return next;
+		});
+		setActiveCell({
+			key,
+			fieldName
+		});
+	}, [mode]);
+	const stopCellEdit = useCallback(() => {
+		setActiveCell(null);
+	}, []);
 	const cancelEdit = useCallback((key) => {
 		setDraftRows((prev) => {
 			const next = new Map(prev);
@@ -2204,10 +2248,12 @@ function useInlineEdit({ mode, url, idField, adapter = HydraAdapter, httpClient,
 			next.delete(key);
 			return next;
 		});
+		setActiveCell((current) => current?.key === key ? null : current);
 	}, []);
 	const discardAll = useCallback(() => {
 		setDraftRows(/* @__PURE__ */ new Map());
 		setRowErrors(/* @__PURE__ */ new Map());
+		setActiveCell(null);
 	}, []);
 	const updateDraft = useCallback((key, fieldName, value) => {
 		setDraftRows((prev) => {
@@ -2274,35 +2320,102 @@ function useInlineEdit({ mode, url, idField, adapter = HydraAdapter, httpClient,
 			});
 		}
 	}, []);
+	const validateDraft = useCallback((key, draft, fs) => {
+		const errors = {};
+		fs.forEach((field) => {
+			if (!canEditFieldInline(field)) return;
+			if (field.required && (draft[field.name] == null || draft[field.name] === "")) errors[field.name] = "required";
+		});
+		if (Object.keys(errors).length === 0) return true;
+		setRowErrors((prev) => new Map(prev).set(key, errors));
+		return false;
+	}, []);
+	const doSaveBatch = useCallback(async () => {
+		const { fields: fs, onBatchSave: saveBatch, onSaveError: onErr } = optsRef.current;
+		if (!saveBatch) return false;
+		const entries = Array.from(draftRowsRef.current.entries());
+		if (entries.length === 0) return false;
+		if (!entries.every(([key, draft]) => validateDraft(key, draft, fs))) return false;
+		const keys = entries.map(([key]) => key);
+		setSavingRows((prev) => new Set([...prev, ...keys]));
+		try {
+			await saveBatch(entries.map(([, draft]) => ({ ...draft })));
+			setDraftRows(/* @__PURE__ */ new Map());
+			setRowErrors(/* @__PURE__ */ new Map());
+			return true;
+		} catch (err) {
+			keys.forEach((key) => onErr?.(key, err));
+			return false;
+		} finally {
+			setSavingRows((prev) => {
+				const next = new Set(prev);
+				keys.forEach((key) => next.delete(key));
+				return next;
+			});
+		}
+	}, [validateDraft]);
 	return {
 		draftRows,
 		savingRows,
 		rowErrors,
+		activeCell,
 		isEditing,
+		isCellActive,
+		isCellDirty,
+		hasDraftChanges,
 		startEdit,
+		startCellEdit,
+		stopCellEdit,
 		cancelEdit,
 		discardAll,
 		updateDraft,
 		saveRow: useCallback(async (key) => {
-			if (await doSaveRow(key)) optsRef.current.onSaveSuccess?.();
-		}, [doSaveRow]),
+			if (optsRef.current.onBatchSave) {
+				const ok = await doSaveBatch();
+				if (ok) optsRef.current.onSaveSuccess?.();
+				return ok;
+			}
+			const ok = await doSaveRow(key);
+			if (ok) optsRef.current.onSaveSuccess?.();
+			return ok;
+		}, [doSaveBatch, doSaveRow]),
 		saveAll: useCallback(async () => {
+			if (optsRef.current.onBatchSave) {
+				const ok = await doSaveBatch();
+				if (ok) optsRef.current.onSaveSuccess?.();
+				return ok;
+			}
 			const keys = Array.from(draftRowsRef.current.keys());
-			if ((await Promise.allSettled(keys.map((key) => doSaveRow(key)))).some((r) => r.status === "fulfilled" && r.value)) optsRef.current.onSaveSuccess?.();
-		}, [doSaveRow])
+			const anySuccess = (await Promise.allSettled(keys.map((key) => doSaveRow(key)))).some((r) => r.status === "fulfilled" && r.value);
+			if (anySuccess) optsRef.current.onSaveSuccess?.();
+			return anySuccess;
+		}, [doSaveBatch, doSaveRow])
 	};
 }
-//#endregion
-//#region packages/crud/datagrid/InlineEditCell.tsx
+function focusInlineControl(container) {
+	if (!container) return;
+	const focusable = container.querySelector("input:not([type=\"hidden\"]):not([disabled]):not([readonly]), select:not([disabled]), textarea:not([disabled]), .nb-date-picker__input:not([readonly]), .nb-dropdown__trigger:not([disabled])");
+	focusable?.focus();
+	if (focusable instanceof HTMLInputElement && focusable.type !== "checkbox") focusable.select();
+}
 /**
-* Renders a single cell as an editable control during inline row editing.
-* Uses the same FieldTypeModule.ControlRender path as the full form, but
-* with a compact common-props class so controls fit inside a table cell.
+* Renders a single cell as an editable control during inline editing.
+* Uses the same FieldTypeModule.ControlRender path as the full form, with
+* compact styling so controls fit naturally inside a table cell.
 */
-function InlineEditCell({ field, rowKey, draft, onChange, errors, disabled = false, allRemoteOptions, httpClient, t }) {
+function InlineEditCell({ field, rowKey, draft, onChange, errors, disabled = false, allRemoteOptions, httpClient, t, autoFocus = true }) {
+	const containerRef = useRef(null);
 	const typeModule = getFieldTypeModule(field.type);
 	const fieldError = errors?.[field.name];
 	const errorClass = fieldError ? " is-error" : "";
+	useEffect(() => {
+		if (!autoFocus) return;
+		focusInlineControl(containerRef.current);
+	}, [
+		autoFocus,
+		field.name,
+		rowKey
+	]);
 	const commonProps = {
 		className: `nb-inline-control${errorClass}`,
 		disabled,
@@ -2323,7 +2436,16 @@ function InlineEditCell({ field, rowKey, draft, onChange, errors, disabled = fal
 		upsertUploadedFile: () => {}
 	};
 	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
 		className: `nb-inline-cell${errorClass ? " nb-inline-cell--error" : ""}`,
+		onKeyDown: (event) => {
+			if (event.key === "Escape") event.stopPropagation();
+		},
+		onMouseDown: (event) => {
+			if (event.target.closest(".nb-date-picker__panel, .nb-form__lookup-menu, .nb-dropdown__menu, .nb-datagrid__actions-popover")) return;
+			event.stopPropagation();
+		},
+		onClick: (event) => event.stopPropagation(),
 		children: typeModule.ControlRender({
 			field,
 			value: draft[field.name],
@@ -2452,6 +2574,25 @@ function normalizeIcon$1(icon) {
 function isDateLikeField(field) {
 	return field.type === "date" || field.type === "datetime";
 }
+function isCellEditMode(editMode) {
+	return editMode === "cell" || editMode === "batch";
+}
+function resolveInlineEditToolbar(editMode, inlineEditToolbar) {
+	if (inlineEditToolbar === false) return null;
+	const defaultShow = isCellEditMode(editMode);
+	if (inlineEditToolbar == null) return defaultShow ? {
+		save: true,
+		revert: true
+	} : null;
+	if (typeof inlineEditToolbar === "boolean") return inlineEditToolbar ? {
+		save: true,
+		revert: true
+	} : null;
+	return {
+		save: inlineEditToolbar.save !== false,
+		revert: inlineEditToolbar.revert !== false
+	};
+}
 function getToolbarKey(action, index) {
 	return action.key ?? action.text ?? String(index);
 }
@@ -2805,6 +2946,15 @@ const NativeDataGridView = forwardRef((options, ref) => {
 	fieldsRef.current = options.fields;
 	const loadSeqRef = useRef(0);
 	const loadRows = useCallback(async () => {
+		if (options.data) {
+			rowsRef.current = options.data;
+			setRows(options.data);
+			setTotalCount(options.data.length);
+			setGridSummary(options.gridSummary ?? null);
+			setIsGridLoading(false);
+			onContentReadyRef.current?.();
+			return options.data;
+		}
 		if (options.manualLoad) return rowsRef.current;
 		setIsGridLoading(true);
 		const seq = ++loadSeqRef.current;
@@ -2828,6 +2978,8 @@ const NativeDataGridView = forwardRef((options, ref) => {
 	}, [
 		filterOperators,
 		filters,
+		options.data,
+		options.gridSummary,
 		options.manualLoad,
 		options.paging,
 		page,
@@ -2871,30 +3023,58 @@ const NativeDataGridView = forwardRef((options, ref) => {
 		resourceStoreFactory,
 		visibleFields
 	]);
-	const canInlineEditMode = options.editMode === "row" || options.editMode === "batch";
+	const canInlineEditMode = options.editMode === "row" || options.editMode === "cell" || options.editMode === "batch";
+	const cellEditMode = isCellEditMode(options.editMode);
+	const rowInlineMode = options.editMode === "row";
+	const inlineEditToolbar = resolveInlineEditToolbar(options.editMode, options.inlineEditToolbar);
+	const showRowInlineActions = options.inlineRowActions ?? rowInlineMode;
 	const inlineEdit = useInlineEdit({
-		mode: options.editMode === "batch" ? "batch" : "row",
+		mode: cellEditMode ? "batch" : "row",
 		url: options.url,
 		idField,
 		adapter: options.adapter,
 		httpClient,
 		fields: options.fields,
 		onSaveSuccess: () => void loadRows(),
-		onSaveError: () => {}
+		onSaveError: () => {},
+		onBatchSave: options.onBatchSave
 	});
+	const dirtyRowCount = useMemo(() => rows.filter((row) => {
+		const key = row[idField] ?? row;
+		return inlineEdit.draftRows.has(key) && inlineEdit.hasDraftChanges(key, row);
+	}).length, [
+		rows,
+		idField,
+		inlineEdit.draftRows,
+		inlineEdit.hasDraftChanges
+	]);
+	const hasPendingInlineEdits = dirtyRowCount > 0;
+	useEffect(() => {
+		if (!inlineEdit.activeCell) return;
+		const handler = (event) => {
+			const target = event.target;
+			if (target.closest(".nb-datagrid__edit-cell")) return;
+			if (target.closest(".nb-date-picker__panel, .nb-form__lookup-menu, .nb-dropdown__menu, .nb-datagrid__actions-popover")) return;
+			inlineEdit.stopCellEdit();
+		};
+		document.addEventListener("mousedown", handler);
+		return () => document.removeEventListener("mousedown", handler);
+	}, [inlineEdit.activeCell, inlineEdit.stopCellEdit]);
 	const handleStateRef = useRef({
 		selectedKeys,
 		filters,
 		filterOperators,
 		loadRows,
-		idField
+		idField,
+		inlineEdit
 	});
 	handleStateRef.current = {
 		selectedKeys,
 		filters,
 		filterOperators,
 		loadRows,
-		idField
+		idField,
+		inlineEdit
 	};
 	useImperativeHandle(ref, () => ({
 		showLoading: (message) => {
@@ -2934,7 +3114,9 @@ const NativeDataGridView = forwardRef((options, ref) => {
 			setFilterInputs(nextFilters);
 			setFilterOperators(nextOperators);
 			setPage(0);
-		}
+		},
+		hasEditData: () => handleStateRef.current.inlineEdit.draftRows.size > 0,
+		saveChanges: () => handleStateRef.current.inlineEdit.saveAll()
 	}), [options.fields, t]);
 	const selectedRows = rows.filter((row) => selectedKeys.includes(row[idField]));
 	const selectRow = (row) => {
@@ -2948,7 +3130,7 @@ const NativeDataGridView = forwardRef((options, ref) => {
 	const rowEditable = (row) => options.canEditRow?.(row) !== false;
 	const rowDeletable = (row) => options.canDeleteRow?.(row) !== false;
 	const buildRowActions = (row) => [
-		...options.allowEdit && rowEditable(row) && canInlineEditMode && !inlineEdit.isEditing(row[idField]) ? [{
+		...options.allowEdit && rowEditable(row) && rowInlineMode && canInlineEditMode && !inlineEdit.isEditing(row[idField]) ? [{
 			text: t("grid.inlineEditRow"),
 			icon: "ph-pencil-simple",
 			disabled: options.editDisabled,
@@ -2978,7 +3160,7 @@ const NativeDataGridView = forwardRef((options, ref) => {
 		}] : []
 	];
 	const openRow = (row) => {
-		if (options.allowEdit && rowEditable(row) && canInlineEditMode) {
+		if (options.allowEdit && rowEditable(row) && rowInlineMode && canInlineEditMode) {
 			inlineEdit.startEdit(row);
 			return;
 		}
@@ -3113,7 +3295,7 @@ const NativeDataGridView = forwardRef((options, ref) => {
 	};
 	const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
 	const hasCheckbox = options.selectionMode === "multiple";
-	const hasBuiltInRowActions = Boolean(options.allowEdit && (canInlineEditMode || options.onEdit || options.events?.EDIT) || options.allowView && options.onView || options.allowDelete && (options.onDelete || options.events?.DELETE));
+	const hasBuiltInRowActions = Boolean(options.allowEdit && (rowInlineMode && showRowInlineActions || options.onEdit || options.events?.EDIT) || options.allowView && options.onView || options.allowDelete && (options.onDelete || options.events?.DELETE));
 	const hasRowActions = Boolean(options.mode !== "minimal" && (hasBuiltInRowActions || options.rowActions));
 	const colSpan = visibleFields.length + (hasCheckbox ? 1 : 0) + (options.detailFields ? 1 : 0) + (hasRowActions ? 1 : 0);
 	const hasDetail = Boolean(options.detailFields);
@@ -3128,15 +3310,26 @@ const NativeDataGridView = forwardRef((options, ref) => {
 		actionsColWidth
 	});
 	const resolvedColWidths = useMemo(() => {
-		if (visibleFields.length === 0) return colWidths;
-		const dataTotal = visibleFields.reduce((sum, f) => sum + getColumnWidth(f, colWidths), 0);
+		if (visibleFields.length === 0 || containerWidth <= 0) return colWidths;
+		const bases = visibleFields.map((f) => getColumnWidth(f, colWidths));
+		const dataTotal = bases.reduce((sum, width) => sum + width, 0);
 		const fixedTotal = (hasCheckbox ? CHECKBOX_COL_WIDTH : 0) + (hasDetail ? DETAIL_COL_WIDTH : 0) + (hasRowActions ? actionsColWidth : 0);
-		const extra = Math.max(0, containerWidth - dataTotal - fixedTotal);
+		const available = Math.max(0, containerWidth - fixedTotal);
+		if (dataTotal > available && available > 0) {
+			const scale = available / dataTotal;
+			const result = {};
+			visibleFields.forEach((field, index) => {
+				const floor = field.minWidth ?? MIN_COL_WIDTH;
+				result[field.name] = Math.max(floor, Math.floor(bases[index] * scale));
+			});
+			return result;
+		}
+		const extra = Math.max(0, available - dataTotal);
 		if (extra === 0 || dataTotal === 0) return colWidths;
 		let distributed = 0;
 		const result = {};
 		visibleFields.forEach((f, i) => {
-			const base = getColumnWidth(f, colWidths);
+			const base = bases[i];
 			const share = i < visibleFields.length - 1 ? Math.round(extra * (base / dataTotal)) : extra - distributed;
 			result[f.name] = base + share;
 			distributed += share;
@@ -3148,7 +3341,8 @@ const NativeDataGridView = forwardRef((options, ref) => {
 		hasCheckbox,
 		hasDetail,
 		hasRowActions,
-		containerWidth
+		containerWidth,
+		actionsColWidth
 	]);
 	const tableLayoutStyle = { "--nb-datagrid-layout-width": `${layoutWidth}px` };
 	const filterableFields = visibleFields.filter((field) => field.filterable);
@@ -3227,6 +3421,18 @@ const NativeDataGridView = forwardRef((options, ref) => {
 									children: activeFilterCount
 								})]
 							}),
+							inlineEditToolbar?.revert && hasPendingInlineEdits && /* @__PURE__ */ jsx(IconButton, {
+								className: "nb-datagrid__toolbar-icon-action nb-datagrid__toolbar-icon-action--revert",
+								icon: "ph ph-arrow-counter-clockwise",
+								label: t("grid.inlineRevertChanges"),
+								onClick: () => inlineEdit.discardAll()
+							}),
+							inlineEditToolbar?.save && hasPendingInlineEdits && /* @__PURE__ */ jsx(IconButton, {
+								className: "nb-datagrid__toolbar-icon-action nb-datagrid__toolbar-icon-action--save",
+								icon: "ph ph-floppy-disk",
+								label: t("grid.inlineSaveChanges"),
+								onClick: () => void inlineEdit.saveAll()
+							}),
 							toolbar.showRefresh !== false && /* @__PURE__ */ jsx(IconButton, {
 								icon: "ph ph-arrow-clockwise",
 								label: t("grid.buttonRefresh"),
@@ -3234,26 +3440,13 @@ const NativeDataGridView = forwardRef((options, ref) => {
 							})
 						]
 					}),
-					options.editMode === "batch" && inlineEdit.draftRows.size > 0 && /* @__PURE__ */ jsxs("div", {
-						className: "nb-datagrid__batch-bar",
+					cellEditMode && hasPendingInlineEdits && !inlineEditToolbar && /* @__PURE__ */ jsx("div", {
+						className: "nb-datagrid__batch-bar nb-datagrid__batch-bar--compact",
 						role: "status",
-						children: [/* @__PURE__ */ jsx("span", {
+						children: /* @__PURE__ */ jsx("span", {
 							className: "nb-datagrid__batch-bar-label",
-							children: t("grid.inlineUnsavedRows", { count: inlineEdit.draftRows.size })
-						}), /* @__PURE__ */ jsxs("div", {
-							className: "nb-datagrid__batch-bar-actions",
-							children: [/* @__PURE__ */ jsx("button", {
-								type: "button",
-								className: "nb-datagrid__batch-bar-btn nb-datagrid__batch-bar-btn--discard",
-								onClick: () => inlineEdit.discardAll(),
-								children: t("grid.inlineDiscardAll")
-							}), /* @__PURE__ */ jsx("button", {
-								type: "button",
-								className: "nb-datagrid__batch-bar-btn nb-datagrid__batch-bar-btn--save",
-								onClick: () => void inlineEdit.saveAll(),
-								children: t("grid.inlineSaveAll", { count: inlineEdit.draftRows.size })
-							})]
-						})]
+							children: t("grid.inlineUnsavedRows", { count: dirtyRowCount })
+						})
 					}),
 					options.aboveGrid ? /* @__PURE__ */ jsx("div", {
 						className: "nb-datagrid__above-grid",
@@ -3549,9 +3742,11 @@ const NativeDataGridView = forwardRef((options, ref) => {
 											const key = row[idField] ?? rowIndex;
 											const selected = selectedKeys.includes(key);
 											const editing = inlineEdit.draftRows.has(key);
+											const rowHasChanges = editing && inlineEdit.hasDraftChanges(key, row);
 											const saving = inlineEdit.savingRows.has(key);
 											const rowDraft = inlineEdit.draftRows.get(key) ?? row;
 											const rowFieldErrors = inlineEdit.rowErrors.get(key);
+											const rowInRowEdit = rowInlineMode && editing;
 											const detailFields = typeof options.detailFields === "function" ? options.detailFields(row) : options.detailFields;
 											const detailUrl = options.detailUrl?.replace("{id}", String(key));
 											const expanded = expandedKeys.has(key);
@@ -3561,17 +3756,19 @@ const NativeDataGridView = forwardRef((options, ref) => {
 													"nb-datagrid__row",
 													expanded ? "nb-datagrid__row--expanded" : "",
 													selected ? "nb-datagrid__row--selected" : "",
-													editing ? "nb-datagrid__row--editing" : "",
+													rowInRowEdit ? "nb-datagrid__row--editing" : "",
+													rowHasChanges ? "nb-datagrid__row--dirty" : "",
 													saving ? "nb-datagrid__row--saving" : ""
 												].filter(Boolean).join(" "),
 												tabIndex: 0,
 												"aria-selected": selected,
 												onClick: () => {
-													if (!editing) selectRow(row);
+													if (rowInRowEdit) return;
+													selectRow(row);
 												},
 												onDoubleClick: () => {
-													if (editing) return;
-													if (options.allowEdit && rowEditable(row) && canInlineEditMode) {
+													if (rowInRowEdit || inlineEdit.activeCell) return;
+													if (options.allowEdit && rowEditable(row) && rowInlineMode && canInlineEditMode) {
 														inlineEdit.startEdit(row);
 														return;
 													}
@@ -3583,9 +3780,10 @@ const NativeDataGridView = forwardRef((options, ref) => {
 													if (options.allowView && options.onView) options.onView(row);
 												},
 												onKeyDown: (event) => {
-													if (editing && event.key === "Escape") inlineEdit.cancelEdit(key);
-													else if (editing && event.key === "Enter") inlineEdit.saveRow(key);
-													else if (!editing && event.key === "Enter" && options.allowEdit && canInlineEditMode && rowEditable(row)) inlineEdit.startEdit(row);
+													if (inlineEdit.activeCell && event.key === "Escape") inlineEdit.stopCellEdit();
+													else if (rowInRowEdit && event.key === "Escape") inlineEdit.cancelEdit(key);
+													else if (rowInRowEdit && event.key === "Enter" && showRowInlineActions) inlineEdit.saveRow(key);
+													else if (!editing && event.key === "Enter" && options.allowEdit && rowInlineMode && canInlineEditMode && rowEditable(row)) inlineEdit.startEdit(row);
 													else if (!editing && event.key === "Enter" && options.allowEdit && (options.onEdit || options.events?.EDIT)) if (options.onEdit) options.onEdit(row);
 													else emit(options.events.EDIT, { row });
 													else if (!editing && event.key === "Enter" && options.allowView && options.onView) options.onView(row);
@@ -3635,13 +3833,29 @@ const NativeDataGridView = forwardRef((options, ref) => {
 													}),
 													visibleFields.map((field, columnIndex) => {
 														const width = getColumnWidth(field, resolvedColWidths);
-														if (editing && canEditFieldInline(field)) return /* @__PURE__ */ jsx("td", {
+														const editable = options.allowEdit && !options.editDisabled && rowEditable(row) && canEditFieldInline(field);
+														const cellActive = inlineEdit.isCellActive(key, field.name);
+														const cellDirty = editing && inlineEdit.isCellDirty(key, field.name, row);
+														const showCellEditor = editable && (rowInRowEdit && editing || cellEditMode && cellActive);
+														const displayRow = editing ? rowDraft : row;
+														const cellClassName = [
+															showCellEditor ? "nb-datagrid__edit-cell" : "nb-datagrid__data-cell",
+															editable && canInlineEditMode ? "nb-datagrid__cell--editable" : "",
+															cellDirty ? "nb-datagrid__cell--dirty" : "",
+															cellActive ? "nb-datagrid__cell--active" : ""
+														].filter(Boolean).join(" ");
+														const beginInlineEdit = () => {
+															if (!editable) return;
+															selectRow(row);
+															if (cellEditMode) inlineEdit.startCellEdit(row, field.name);
+															else if (rowInlineMode && !editing) inlineEdit.startEdit(row);
+														};
+														if (showCellEditor) return /* @__PURE__ */ jsx("td", {
 															style: {
 																width,
 																textAlign: field.align
 															},
-															className: "nb-datagrid__edit-cell",
-															onClick: (e) => e.stopPropagation(),
+															className: cellClassName,
 															children: /* @__PURE__ */ jsx(InlineEditCell, {
 																field,
 																rowKey: key,
@@ -3651,7 +3865,8 @@ const NativeDataGridView = forwardRef((options, ref) => {
 																disabled: saving,
 																allRemoteOptions: filterRemoteOptions,
 																httpClient,
-																t
+																t,
+																autoFocus: true
 															})
 														}, field.name);
 														return /* @__PURE__ */ jsx("td", {
@@ -3659,14 +3874,20 @@ const NativeDataGridView = forwardRef((options, ref) => {
 																width,
 																textAlign: field.align
 															},
-															title: getCellText(field, row, filterRemoteOptions[field.name], t("common.yes"), t("common.no")),
-															children: renderCell(field, row, rowIndex, columnIndex, filterRemoteOptions[field.name], t("common.yes"), t("common.no"))
+															className: cellClassName,
+															title: getCellText(field, displayRow, filterRemoteOptions[field.name], t("common.yes"), t("common.no")),
+															onClick: (event) => {
+																if (!editable || !canInlineEditMode) return;
+																event.stopPropagation();
+																beginInlineEdit();
+															},
+															children: renderCell(field, displayRow, rowIndex, columnIndex, filterRemoteOptions[field.name], t("common.yes"), t("common.no"))
 														}, field.name);
 													}),
 													hasRowActions && /* @__PURE__ */ jsx("td", {
 														className: "nb-datagrid__actions-cell",
 														onClick: (e) => e.stopPropagation(),
-														children: editing ? /* @__PURE__ */ jsxs("div", {
+														children: rowInRowEdit && showRowInlineActions ? /* @__PURE__ */ jsxs("div", {
 															className: "nb-datagrid__inline-actions",
 															children: [/* @__PURE__ */ jsx("button", {
 																type: "button",
@@ -6951,6 +7172,8 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 				selectionMode: hasMultipleSelection ? "multiple" : "single",
 				onSelectionChanged: handleSelectionChanged,
 				editMode: resolvedResource.editMode,
+				inlineEditToolbar: resolvedResource.inlineEditToolbar,
+				inlineRowActions: resolvedResource.inlineRowActions,
 				visibleColumns: presetState.visibleColumns,
 				beforeToolbar: renderPresetSelector,
 				aboveGrid: aboveGridContent,