Bulk Actions

Signature

interface DataTableBulkActionItemProps {    label: React.ReactNode;    icon?: LucideIcon;    confirmationText?: React.ReactNode;    onClick: () => void;    className?: string;    requiresPermission?: string[];    disabled?: boolean;}

label

propertyReact.ReactNode

icon

propertyLucideIcon

confirmationText

propertyReact.ReactNode

onClick

property() => void

className

propertystring

requiresPermission

propertystring[]

disabled

propertyboolean

@vendure/dashboard Sourcev3.4.0

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<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"    />  );}

Signature

function DataTableBulkActionItem(props: Readonly<DataTableBulkActionItemProps>): void

Parameters

props

parameterReadonly<DataTableBulkActionItemProps>

@vendure/dashboard Sourcev3.4.0

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 has

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

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<any> = ({ selection, table }) => {    return (        <DeleteBulkAction            mutationDocument={deleteProductsDocument}            entityName="products"            requiredPermissions={['DeleteCatalog', 'DeleteProduct']}            selection={selection}            table={table}        />    );};

Signature

type BulkAction = {    order?: number;    component: BulkActionComponent<any>;}

order

propertynumber

Optional order number to control the position of this bulk action in the dropdown. A larger number will appear lower in the list.

component

propertyBulkActionComponent<any>

The React component that will be rendered as the bulk action item.