Bulk Action
BulkActionStatus
Change the status of selected rows via 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
<XABulkActionStatus />
Renders a neutral dropdown listing available statuses. Selecting one sends a PATCH with { [statusField]: value } for each selected item ID.
<XABulkActionStatus
:selected="selectedRows"
endpoint="api/orders"
:statuses="[
{ value: 'active', label: 'Active', icon: 'i-lucide-check' },
{ value: 'archived', label: 'Archived', icon: 'i-lucide-archive' },
]"
item-name="orders"
: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). |
statuses | StatusOption[] | — | Required. Status options: { value, label, icon?, color? }. |
idKey | string | 'id' | Key used to extract the ID from each item. |
statusField | string | 'status' | Payload field name for the status value. |
label | string | 'Status' | Button label text. |
showLabel | boolean | true | Show label text on the button. |
itemName | string | 'items' | Noun used in toast messages. |
disabled | boolean | false | Force-disable the button. |
onSuccess | () => void | Promise<void> | — | Callback invoked after a successful update. |
clearSelection | () => void | — | Callback to clear the parent selection state. |
Emits
| Event | Payload | Description |
|---|---|---|
success | (ids: (string | number)[], status: string) | Fired after all status updates succeed. |
error | (error: unknown) | Fired if any PATCH request fails. |
AI Context
component: XABulkActionStatus
package: "@xenterprises/nuxt-x-app"
category: BulkAction
use-when: >
User has selected one or more rows in a data table and needs to change
their status. 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 update
- API calls use config.public.x.app.apiUrl as the base URL