Table
TableActionColumn
Per-row action cell with overflow dropdown for additional actions beyond view/edit/delete.
TableActionColumn
A flexible row action cell that combines inline icon buttons with an overflow dropdown menu. By default it renders View, Edit, and Delete buttons (each toggleable), plus any custom actions passed via the actions prop. The first maxVisible actions render inline; everything else drops into a ⋯ dropdown.
Components
<XATableActionColumn />
<XATableActionColumn
:row="row"
:show-view="true"
:show-edit="true"
:show-delete="true"
:max-visible="2"
:actions="[
{ name: 'duplicate', label: 'Duplicate', icon: 'i-lucide-copy' },
{ name: 'archive', label: 'Archive', icon: 'i-lucide-archive', overflow: true },
]"
@view="onView"
@edit="onEdit"
@delete="onDelete"
@duplicate="onDuplicate"
@archive="onArchive"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
row | Object | required | Current row data — passed as the emit payload. |
actions | Action[] | [] | Custom actions appended after the default view/edit/delete. Each item: { name, label?, icon?, disabled?, overflow? }. Set overflow: true to always send to the dropdown menu. |
showView | boolean | false | Render the default View action. |
showEdit | boolean | true | Render the default Edit action. |
showDelete | boolean | true | Render the default Delete action. |
maxVisible | number | 2 | Maximum number of actions to render inline before the rest spill into the dropdown. |
Emits
The component emits one event per action name. The three built-in actions (view, edit, delete) always emit those exact names; custom actions emit using the name you provided in the actions array.
| Event | Payload | Description |
|---|---|---|
view | (row) | Default view action triggered. |
edit | (row) | Default edit action triggered. |
delete | (row) | Default delete action triggered. |
<customName> | (row) | Custom action triggered — name matches the action's name field. |
Action shape
interface TableAction {
name: string // Required — used as emit event name
label?: string // Tooltip / dropdown label
icon?: string // Lucide icon name
disabled?: boolean // Disable the button
overflow?: boolean // Always show in dropdown, never inline
}
AI Context
component: XATableActionColumn
package: "@xenterprises/nuxt-x-app"
category: Table
use-when: >
Tables where rows can have varying numbers of actions. The component auto-
promotes excess actions into a dropdown so the row stays visually compact.
Prefer over XATableActions when more than 2-3 actions are common.
overflow-strategy: "first maxVisible inline, rest in 'more' dropdown"