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[];
}

label

property

React.ReactNode

icon

property

LucideIcon

confirmationText

property

React.ReactNode

onClick

property

() => void

className

property

string

requiresPermission

property

string[]

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.