<BulkSoftDeleteButton>

Soft-deletes the selected rows. To be used inside the <DataTable bulkActionButtons> prop.

A bulk soft delete button in a `<DataTable>`

Usage

<BulkSoftDeleteButton> reads the selected record ids from the ListContext, and the current resource from ResourceContext, so in general it doesn’t need any props:

import * as React from 'react';
import { BulkExportButton, DataTable } from 'react-admin';
import { BulkSoftDeleteButton } from '@react-admin/ra-soft-delete';

const PostBulkActionButtons = () => (
    <>
        <BulkExportButton />
        <BulkSoftDeleteButton />
    </>
);

export const PostList = () => (
    <List>
        <DataTable bulkActionButtons={<PostBulkActionButtons />}>
            ...
        </DataTable>
    </List>
);

Props

Prop Required Type Default Description
confirm Content Optional React node - Lets you customize the content of the confirm dialog. Only used in 'pessimistic' or 'optimistic' mutation modes
confirm Title Optional string - Lets you customize the title of the confirm dialog. Only used in 'pessimistic' or 'optimistic' mutation modes
confirm Color Optional 'primary' | 'warning' ‘primary’ Lets you customize the color of the confirm dialog’s “Confirm” button. Only used in 'pessimistic' or 'optimistic' mutation modes
label Optional string ‘ra-soft-delete. action. soft_delete’ label or translation message to use
icon Optional ReactElement <DeleteIcon> iconElement, e.g. <CommentIcon />
mutation Mode Optional string 'undoable' Mutation mode ('undoable', 'pessimistic' or 'optimistic')
mutation Options Optional object null options for react-query useMutation hook
success Message Optional string ‘ra-soft-delete. notification. soft_deleted’ Lets you customize the success notification message.

Tip: If you choose the 'pessimistic' or 'optimistic' mutation mode, a confirm dialog will be displayed to the user before the mutation is executed.

successMessage

On success, <BulkSoftDeleteButton> displays a “XX elements deleted” notification in English. <BulkSoftDeleteButton> uses two successive translation keys to build the success message:

  • resources.{resource}.notifications.soft_deleted as a first choice
  • ra-soft-delete.notification.soft_deleted as a fallback

To customize the notification message, you can set custom translation for these keys in your i18nProvider.

Tip: If you choose to use a custom translation, be aware that react-admin uses the same translation message for the <SoftDeleteButton>, so the message must support pluralization:

const englishMessages = {
    resources: {
        posts: {
            notifications: {
                soft_deleted: 'Post archived |||| %{smart_count} posts archived',
                // ...
            },
        },
    },
};

Alternately, pass a successMessage prop:

<BulkSoftDeleteButton successMessage="Posts deleted successfully" />