nuxt-x-app

Bulk Action

Toolbar components for applying batch operations to selected table rows — export, delete, assign, and status change.

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

`<XABulkActionExport />`

Exports the selected rows to CSV (always available) or JSON (when enableJson is set). Shows a dropdown to choose format when JSON is enabled; otherwise renders a single button that triggers CSV download directly. Fires a toast notification on export and emits the export event with the format and file content.

<XABulkActionExport
  :selected="selectedRows"
  :columns="[
    { key: 'name', label: 'Name' },
    { key: 'email', label: 'Email' },
    { key: 'status', label: 'Status' },
  ]"
  filename="users-export"
  enable-json
/>

Props

Prop	Type	Default	Description
`selected`	`unknown[]`	—	Required. Array of selected row data objects.
`columns`	`ExportColumn[]`	—	Required. Column definitions: `{ key, label, formatter? }`.
`filename`	`string`	`'export'`	File name without extension.
`label`	`string`	`'Export'`	Button label text.
`showLabel`	`boolean`	`true`	Show label text on the button.
`enableJson`	`boolean`	`false`	Add a JSON export option to a dropdown menu.
`disabled`	`boolean`	`false`	Force-disable the button regardless of selection.

Emits

Event	Payload	Description
`export`	`(format: 'csv' \| 'json', content: string)`	Fired after a successful export with the generated file content.

`<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.

`<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.

`<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

category: BulkAction
package: "@xenterprises/nuxt-x-app"
components:
  - XABulkActionExport
  - XABulkActionDelete
  - XABulkActionAssign
  - XABulkActionStatus
use-when: >
  User has selected one or more rows in a data table and needs to
  perform a batch operation (export, delete, assign, or change status).
  Place these components in the table toolbar alongside the selection checkbox.
patterns:
  - All components accept a `selected` array and disable themselves when it is empty.
  - API calls use `config.public.x.app.apiUrl` as the base URL.
  - Pass `onSuccess` and `clearSelection` callbacks to refresh data after an operation.
  - Delete uses a confirmation modal; assign and status use inline dropdowns.

Edit this pageorReport an issue

Table

Data table components with built-in CRUD, filtering, sorting, and pagination.

Card

A comprehensive set of card components for dashboards — stats, KPIs, progress, quotas, revenue, and chart containers.