***
title: "Bulk Actions"
generated: true
---------------
## DataTableBulkActionItemProps
```ts title="Signature"
interface DataTableBulkActionItemProps {
label: React.ReactNode;
icon?: LucideIcon;
confirmationText?: React.ReactNode;
onClick: () => void;
className?: string;
requiresPermission?: string[];
disabled?: boolean;
closeOnClick?: boolean;
}
```
### label
\
### icon
\
### confirmationText
\
### onClick
\ void`} />
### className
\
### requiresPermission
\
### disabled
\
### closeOnClick
\
## DataTableBulkActionItem
A component that should be used to implement any bulk actions for list pages & data tables.
*Example*
```tsx
import { Trans } from '@lingui/react/macro';
import { DataTableBulkActionItem, BulkActionComponent } from '@vendure/dashboard';
import { Check } from 'lucide-react';
export const MyBulkAction: BulkActionComponent = ({ selection, table }) => {
return (
{
console.log('Selected items:', selection);
}}
label={Delete}
confirmationText={Are you sure?}
icon={Check}
className="text-destructive"
/>
);
}
```
```ts title="Signature"
function DataTableBulkActionItem(props: Readonly): void
```
Parameters
### props
\DataTableBulkActionItemProps>`} />
## BulkAction
A bulk action is a component that will be rendered in the bulk actions dropdown.
The component receives the following props:
* `selection`: The selected row or rows
* `table`: A reference to the TanStack Table instance powering the list
The `table` object can be used to clear row selection after the action completes.
*Example*
```tsx
import { BulkActionComponent, DataTableBulkActionItem, usePaginatedList } from '@vendure/dashboard';
// This is an example of a bulk action that shows some typical
// uses of the provided props
export const MyBulkAction: BulkActionComponent = ({ selection, table }) => {
const { refetchPaginatedList } = usePaginatedList();
const doTheAction = async () => {
// Actual logic of the action
// goes here...
// On success, we refresh the list
refetchPaginatedList();
// and un-select any selected rows in the table
table.resetRowSelection();
};
return (
Delete}
confirmationText={Are you sure?}
icon={Check}
className="text-destructive"
/>
);
}
```
For the common action of deletion, we provide a ready-made helper component:
*Example*
```tsx
import { BulkActionComponent, DeleteProductsBulkAction } from '@vendure/dashboard';
// Define the BulkAction component. This one uses
// a built-in wrapper for "delete" actions, which includes
// a confirmation dialog.
export const DeleteProductsBulkAction: BulkActionComponent = ({ selection, table }) => {
return (
);
};
```
```ts title="Signature"
type BulkAction = {
order?: number;
component: BulkActionComponent;
}
```
### order
\
Optional order number to control the position of this bulk action in the dropdown.
A larger number will appear lower in the list.
### component
\`} />
The React component that will be rendered as the bulk action item.
## BulkActionGroup
A group of bulk actions that are visually separated in the dropdown menu.
Optionally includes a translatable label rendered as a `DropdownMenuLabel`.
```ts title="Signature"
type BulkActionGroup = {
label?: React.ReactNode;
actions: BulkAction[];
}
```
### label
\
Optional label rendered as a `DropdownMenuLabel` at the top of the group.
### actions
\BulkAction[]`} />
The bulk actions in this group.
## BulkActionsInput
Bulk actions input supports three formats:
1. **Flat array** (backwards compatible): `BulkAction[]` — all actions in one group.
2. **Array of arrays**: `BulkAction[][]` — each inner array is a visually separated group.
3. **Array of groups**: `BulkActionGroup[]` — groups with optional labels.
Formats 2 and 3 can be mixed in the same array.
*Example*
```tsx
// Flat (single group, backwards compatible)
bulkActions={[
{ component: AssignBulkAction },
{ component: DeleteBulkAction },
]}
// Grouped with labels
bulkActions={[
[
{ component: AssignBulkAction },
{ component: DuplicateBulkAction },
],
{ label: Danger zone, actions: [
{ component: DeleteBulkAction },
]},
]}
```
```ts title="Signature"
type BulkActionsInput = BulkAction[] | Array
```