Table
TableActions
Per-row view/edit/delete action buttons with an extra-actions slot for custom controls.
TableActions
A compact set of row-level action buttons used inside <XATable> cells. Renders three ghost buttons — view, edit, and delete — each individually toggleable. The view button can navigate to a configurable route (with :id or {id} placeholders), or emit a view event when no route is set. An extra-actions slot lets you append additional buttons to the row.
Components
<XATableActions />
<XATableActions
:row="row"
:show-view="true"
:show-edit="true"
:show-delete="true"
view-route="/users/:id"
@view="onView"
@edit="onEdit"
@delete="onDelete"
>
<UButton icon="i-lucide-archive" variant="ghost" color="neutral" size="xs" @click="archive(row)" />
</XATableActions>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
row | Object | required | The current row data — used as the navigation param when viewRoute is set. |
showView | boolean | true | Show the eye-icon view button. |
showEdit | boolean | true | Show the pencil-icon edit button. |
showDelete | boolean | true | Show the trash-icon delete button. |
viewRoute | string | '' | Route pattern for the view button. :id and {id} are replaced with row.id. If empty, the button emits view instead of navigating. |
Emits
| Event | Payload | Description |
|---|---|---|
view | (row) | View button clicked and no viewRoute is set. |
edit | (row) | Edit button clicked. |
delete | (row) | Delete button clicked. |
Slots
| Slot | Scope | Description |
|---|---|---|
| default | { row } | Extra action buttons appended after the built-in buttons. |
AI Context
component: XATableActions
package: "@xenterprises/nuxt-x-app"
category: Table
use-when: >
Standard list pages that need a predictable view/edit/delete action set
per row. Prefer XATableActions for simple CRUD tables; use XATableActionColumn
when you need an overflow dropdown for many actions.
route-pattern: ":id or {id} in viewRoute is replaced with row.id at click time"