# deleteSecondaryAction

**Category:** Features/Actions/Action Cell

## Design

### Demo

This example uses `deleteSecondaryAction()` to add a delete action under a popover menu in the last column of the table.

```tsx
import { Avatar, Page } from '@wix/design-system';
import React from 'react';
import {
  deleteSecondaryAction,
  Table,
  PageWrapper,
  OffsetQuery,
  useCollection,
  useOptimisticActions,
  ToolbarTitle,
} from '@wix/patterns';
import { contacts } from '@wix/crm';

function DeleteSecondaryAction() {
  const collection = useCollection<contacts.Contact>({
    queryName: 'contacts-DeleteSecondaryAction',
    fetchData: (query: OffsetQuery) => {
      const { limit, offset, search, filters } = query;

      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

      if (search) {
        queryBuilder = queryBuilder.startsWith('info.name.first', search);
      }

      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
        items,
        total,
      }));
    },
    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  const optimisticActions = useOptimisticActions(collection);

  return (
    <PageWrapper>
      <Page height="400px">
        <Page.Content>
          <Table
            state={collection}
            title={<ToolbarTitle title="Contacts" showTotal />}
            columns={[
              {
                title: '',
                width: '50px',
                render: (contact) => (
                  <Avatar
                    name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
                    imgProps={{ src: contact.info?.picture?.image }}
                  />
                ),
              },
              {
                title: 'Name',
                width: '250px',
                render: (contact) =>
                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
              },
              {
                title: 'Level',
                render: (contact) => contact.info?.jobTitle,
              },
              {
                title: 'Last Activity',
                render: (contact) =>
                  contact.lastActivity?.activityDate?.toLocaleString(),
              },
            ]}
            actionCell={(_contact, _index, actionCellAPI) => ({
              secondaryActions: [
                deleteSecondaryAction({
                  optimisticActions,
                  actionCellAPI,
                  submit: (_contacts) =>
                    Promise.all(
                      _contacts.map((contact) =>
                        contacts.deleteContact(contact._id as string),
                      ),
                    ),
                }),
              ],
            })}
          />
        </Page.Content>
      </Page>
    </PageWrapper>
  );
}
```

## API

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `optimisticActions` | `CollectionOptimisticActions<T, F>` | Yes | - | Actions for performing optimistic updates on the collection. These updates are applied immediately for better user experience while waiting for the server response. |
| `actionCellAPI` | `ActionCellAPI<T, F>` | Yes | - | API for interacting with the action cell. This API provides methods for manipulating and accessing the action cell's state. |
| `submit` | `(items: T[]) => Promise<R>` | Yes | - | Function to submit the deletion operation. @param items - The items to delete. |
| `showUndoToast` | `boolean` | No | `false` | Determines whether to display an undo toast before calling the server action. |
| `showUndoSuccessToast` | `boolean` | No | `false` | Determines whether to display a toast after clicking on undo. |
| `onUndo` | `(() => void)` | No | - | Callback function triggered when the user clicks on the undo button. |
| `errorToast` | `((err: unknown, params: { retry: () => void; }) => string \| ToastConfig)` | No | - | Function to generate error toast to show in case the server fails to perform the action. |
| `onError` | `((err: unknown) => void)` | No | - | Callback function triggered when an error occurs. |
| `onTryAgain` | `(() => void \| Promise<void>)` | No | - | Callback function to retry the action. @deprecated Use the prop `errorToast={(err, {retry}) => { action:{onClick: () {retry();} }}}` instead. |
| `successToast` | `string \| ToastConfig` | No | - | Toast message or configuration to show on successful action. |
| `updateServerAfter` | `EventuallyUpdated` | No | `submit` | Indicates when the server is eventually updated. Possible values: - submit: Server updates immediately after the submission promise resolves. - number: Server updates after a specified timeout (in milliseconds). - Promise: Server updates after a forwarded promise resolves. |