Skip to main content

Bulk Actions

DataTableBulkActionItemProps​

@vendure/dashboarddata-table-bulk-action-item.tsx
v3.4.0
Signature
interface DataTableBulkActionItemProps {
    label: React.ReactNode;
    icon?: LucideIcon;
    confirmationText?: React.ReactNode;
    onClick: () => void;
    className?: string;
    requiresPermission?: string[];
    disabled?: boolean;
}

label​

property
React.ReactNode

icon​

property
LucideIcon

confirmationText​

property
React.ReactNode

onClick​

property
() => void

className​

property
string

requiresPermission​

property
string[]

disabled​

property
boolean

DataTableBulkActionItem​

@vendure/dashboarddata-table-bulk-action-item.tsx
v3.4.0

A component that should be used to implement any bulk actions for list pages & data tables.

Example

import { DataTableBulkActionItem, Trans } 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​

parameter
Readonly<DataTableBulkActionItemProps>

BulkAction​

@vendure/dashboarddata-table.ts
v3.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

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<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}
        />
    );
};
Signature
type BulkAction = {
    order?: number;
    component: BulkActionComponent<any>;
}

order​

property
number

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

component​

property
BulkActionComponent<any>

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