Composables
useXInlineEdit
In-place cell editing state for tables — tracks the editing cell, pending changes, and save/cancel lifecycle.
useXInlineEdit
State machine for inline (in-place) cell editing in tables. Tracks which cell is being edited, buffers pending changes, and runs your onSave callback when an edit is committed. Powers XATableEditableCell and the XAInline* components.
Usage
const { editingCell, isSaving, startEdit, stopEdit, saveEdit, cancelEdit, isEditing } = useXInlineEdit({
onSave: async (rowId, field, value) => {
await $fetch(`/api/users/${rowId}`, {
method: 'PATCH',
body: { [field]: value },
})
},
})
Options
| Option | Type | Description |
|---|---|---|
onSave | (rowId, field, value, originalValue) => Promise<void> | void | Called when an edit is saved. |
onCancel | (rowId, field) => void | Called when an edit is cancelled. |
onError | (error, rowId, field) => void | Called when a save fails. |
Returns
| Key | Type | Description |
|---|---|---|
editingCell | Ref<EditingCell | null> | The cell currently being edited (rowId, field, value, originalValue). |
isSaving | Ref<boolean> | true while onSave is in flight. |
pendingChanges | Ref<Map<string, EditingCell>> | Buffered edits not yet saved. |
isEditing | (rowId, field) => boolean | Whether a specific cell is being edited. |
startEdit / stopEdit | functions | Enter/exit edit mode for a cell. |
saveEdit / cancelEdit | functions | Commit (runs onSave) or discard the current edit. |
AI Context
composable: useXInlineEdit
package: "@xenterprises/nuxt-x-app"
use-when: Building click-to-edit table cells or inline field editing with a save/cancel lifecycle.