Table
TableEditableCell
Double-click-to-edit table cell with text, number, textarea, select, and boolean input modes.
TableEditableCell
A self-managing editable table cell. Renders a display value with a pencil hint on hover, switches into an editor on double-click, and emits save when the user commits the change (Enter or blur) or cancel (Escape). Pairs well with useXCrud for inline edits that persist immediately.
Components
<XATableEditableCell />
<XATableEditableCell
:value="row.name"
type="text"
@save="(newValue, oldValue) => updateName(row, newValue)"
@cancel="onCancelEdit"
>
<span class="font-medium">{{ row.name }}</span>
</XATableEditableCell>
<XATableEditableCell
:value="row.status"
type="select"
:options="[
{ label: 'Active', value: 'active' },
{ label: 'Inactive', value: 'inactive' },
]"
@save="(v) => updateStatus(row, v)"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | number | boolean | object | array | null | Current cell value (also seeds the editor). |
editable | boolean | true | When false, the cell is read-only — no double-click edit. |
type | 'text' | 'email' | 'number' | 'textarea' | 'select' | 'boolean' | 'text' | Editor type to render. |
options | Array | [] | Options for type="select". Passed through to USelect. |
displayClass | string | '' | Extra CSS classes applied to the display text. |
formatter | Function | null | null | Optional (value) => string formatter for the display value. |
Emits
| Event | Payload | Description |
|---|---|---|
save | (newValue, oldValue) | Fired after a successful edit (Enter or blur). Not fired if the value did not change. |
cancel | () | Fired on Escape — value is reverted. |
Slots
| Slot | Description |
|---|---|
| default | Override the default display rendering. The pencil icon and edit-on-double-click behavior still apply. |
Exposed methods
The component exposes the following via defineExpose so a parent can imperatively start / cancel edits:
| Method | Description |
|---|---|
startEditing() | Switch into edit mode and focus the input. |
cancelEdit() | Revert and exit edit mode. |
isEditing | Reactive ref<boolean> indicating the current mode. |
AI Context
component: XATableEditableCell
package: "@xenterprises/nuxt-x-app"
category: Table
use-when: >
Tables where users need to tweak a single field without opening a full edit
modal. Pair with useXCrud('resource').all() and its update() in the @save
handler to persist immediately. Use XAInlineEdit for non-table contexts (cards, lists).
auto-save-trigger: "Enter or blur (after 100ms)"
cancel-trigger: "Escape"