interface DataTableBulkActionItemProps { label: React.ReactNode; icon?: LucideIcon; confirmationText?: React.ReactNode; onClick: () => void; className?: string; requiresPermission?: string[]; disabled?: boolean; closeOnClick?: boolean;}React.ReactNodeLucideIconReact.ReactNode() => voidstringstring[]booleanbooleanA component that should be used to implement any bulk actions for list pages & data tables.
Example
import { Trans } from '@lingui/react/macro';import { DataTableBulkActionItem, BulkActionComponent } from '@vendure/dashboard';import { Check } from 'lucide-react';export const MyBulkAction: BulkActionComponent<any> = ({ selection, table }) => { return ( <DataTableBulkActionItem requiresPermission={['ReadMyCustomEntity']} onClick={() => { console.log('Selected items:', selection); }} label={<Trans>Delete</Trans>} confirmationText={<Trans>Are you sure?</Trans>} icon={Check} className="text-destructive" /> );}function DataTableBulkActionItem(props: Readonly<DataTableBulkActionItemProps>): voidParameters
Readonly<DataTableBulkActionItemProps>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 rowstable: A reference to the TanStack Table instance powering the listThe table object can be used to clear row selection after the action completes.
Example
import { BulkActionComponent, DataTableBulkActionItem, usePaginatedList } from '@vendure/dashboard';// This is an example of a bulk action that shows some typical// uses of the provided propsexport const MyBulkAction: BulkActionComponent<any> = ({ 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 ( <DataTableBulkActionItem onClick={doTheAction} label={<Trans>Delete</Trans>} confirmationText={<Trans>Are you sure?</Trans>} icon={Check} className="text-destructive" /> );}For the common action of deletion, we provide a ready-made helper component:
Example
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<any> = ({ selection, table }) => { return ( <DeleteBulkAction mutationDocument={deleteProductsDocument} entityName="products" requiredPermissions={['DeleteCatalog', 'DeleteProduct']} selection={selection} table={table} /> );};type BulkAction = { order?: number; component: BulkActionComponent<any>;}numberOptional order number to control the position of this bulk action in the dropdown. A larger number will appear lower in the list.
BulkActionComponent<any>The React component that will be rendered as the bulk action item.
A group of bulk actions that are visually separated in the dropdown menu.
Optionally includes a translatable label rendered as a DropdownMenuLabel.
type BulkActionGroup = { label?: React.ReactNode; actions: BulkAction[];}React.ReactNodeOptional label rendered as a DropdownMenuLabel at the top of the group.
BulkAction[]The bulk actions in this group.
Bulk actions input supports three formats:
BulkAction[] — all actions in one group.BulkAction[][] — each inner array is a visually separated group.BulkActionGroup[] — groups with optional labels.Formats 2 and 3 can be mixed in the same array.
Example
// Flat (single group, backwards compatible)bulkActions={[ { component: AssignBulkAction }, { component: DeleteBulkAction },]}// Grouped with labelsbulkActions={[ [ { component: AssignBulkAction }, { component: DuplicateBulkAction }, ], { label: <Trans>Danger zone</Trans>, actions: [ { component: DeleteBulkAction }, ]},]}type BulkActionsInput = BulkAction[] | Array<BulkAction[] | BulkActionGroup>