Bulk Action
BulkActionAssign
Assign selected rows to an option from a dropdown.
Bulk Action
Bulk action components sit in a table toolbar and operate on an array of selected rows. Each component is disabled when no rows are selected and emits success/error events so the parent can refresh data and clear the selection.
Components
<XABulkActionAssign />
Renders a neutral dropdown button listing options. Selecting an option sends a PATCH to endpoint with { [assignField]: value } for each selected item ID.
<XABulkActionAssign
:selected="selectedRows"
endpoint="api/tasks"
:options="[
{ value: 1, label: 'Alice', avatar: '/avatars/alice.png' },
{ value: 2, label: 'Bob' },
]"
item-name="tasks"
target-name="assignee"
allow-unassign
:on-success="() => refresh()"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
selected | unknown[] | — | Required. Array of selected row data objects. |
endpoint | string | — | Required. API endpoint path (no leading slash). |
options | AssignOption[] | — | Required. Items to list: { value, label, icon?, avatar? }. |
idKey | string | 'id' | Key used to extract the ID from each item. |
assignField | string | 'assigneeId' | Payload field name for the assignment value. |
label | string | 'Assign' | Button label text. |
icon | string | 'i-lucide-user-plus' | Button icon name. |
showLabel | boolean | true | Show label text on the button. |
itemName | string | 'items' | Noun used in toast messages. |
targetName | string | 'assignee' | Assignment target noun used in toast messages. |
disabled | boolean | false | Force-disable the button. |
allowUnassign | boolean | false | Prepend an "Unassign" option to the dropdown. |
onSuccess | () => void | Promise<void> | — | Callback invoked after a successful assignment. |
clearSelection | () => void | — | Callback to clear the parent selection state. |
Emits
| Event | Payload | Description |
|---|---|---|
success | (ids: (string | number)[], assigneeId: string | number | null) | Fired after all assignments succeed. |
error | (error: unknown) | Fired if any PATCH request fails. |
AI Context
component: XABulkActionAssign
package: "@xenterprises/nuxt-x-app"
category: BulkAction
use-when: >
User has selected one or more rows in a data table and needs to assign
them to a user or category. Place in the table toolbar alongside the
selection checkbox.
patterns:
- Accepts a selected array and disables itself when it is empty
- Uses inline dropdown — no confirmation modal
- Pass onSuccess and clearSelection callbacks to refresh data after assignment
- API calls use config.public.x.app.apiUrl as the base URL