Bulk Action

BulkActionDelete

Delete selected rows with confirmation modal.

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

`<XABulkActionDelete />`

Renders a red "Delete" button. On click, opens a XAModalConfirm dialog. On confirmation, sends DELETE requests to endpoint for each selected item ID and emits success or error.

<XABulkActionDelete
  :selected="selectedRows"
  endpoint="api/users"
  item-name="users"
  :on-success="() => refresh()"
  :clear-selection="() => (selectedRows = [])"
/>

Props

Prop	Type	Default	Description
`selected`	`unknown[]`	—	Required. Array of selected row data objects.
`endpoint`	`string`	—	Required. API endpoint path (no leading slash).
`idKey`	`string`	`'id'`	Key used to extract the ID from each item.
`label`	`string`	`'Delete'`	Button label text.
`showLabel`	`boolean`	`true`	Show label text on the button.
`title`	`string`	`'Delete Items'`	Confirmation modal title.
`message`	`string`	—	Override the auto-generated confirmation message.
`itemName`	`string`	`'items'`	Noun used in the auto-generated confirmation message.
`confirmText`	`string`	`'Delete'`	Confirm button label.
`cancelText`	`string`	`'Cancel'`	Cancel button label.
`disabled`	`boolean`	`false`	Force-disable the button.
`onSuccess`	`() => void \| Promise<void>`	—	Callback invoked after a successful delete.
`clearSelection`	`() => void`	—	Callback to clear the parent selection state.

Emits

Event	Payload	Description
`success`	`(ids: (string \| number)[])`	Fired after all deletes succeed.
`error`	`(error: unknown)`	Fired if any delete request fails.
`cancel`	—	Fired when the user cancels the confirmation modal.

AI Context

component: XABulkActionDelete
package: "@xenterprises/nuxt-x-app"
category: BulkAction
use-when: >
  User has selected one or more rows in a data table and needs to delete
  the selection. Uses a confirmation modal before deleting. Place in the
  table toolbar alongside the selection checkbox.
patterns:
  - Accepts a selected array and disables itself when it is empty
  - Uses XAModalConfirm for confirmation before sending DELETE requests
  - Pass onSuccess and clearSelection callbacks to refresh data after deletion
  - API calls use config.public.x.app.apiUrl as the base URL

Edit this pageorReport an issue

BulkActionExport

Export selected rows to CSV or JSON.

BulkActionAssign

Assign selected rows to an option from a dropdown.