5. Adding Delete Feature

There are many ways to delete a record. In this tutorial, we will first use the <DeleteButton/> to delete a record and then we will learn how to enable the delete feature on the show page and edit page.

Adding Delete Feature to List Page

Let's start by adding the delete feature to the list page. To do this, we will use the <DeleteButton/> component.

<DeleteButton/> is a refine component that is used to delete a record. When you click on the delete button, it will show a confirmation modal. If you confirm the deletion, it will delete the record.

Refer to the <DeleteButton/> documentation for more information →

To add a delete feature to the products table, you can follow the steps below:

1. Open the src/pages/products/list.tsx file on your editor.

2. Import the <DeleteButton/> component from @refinedev/antd:

   import { DeleteButton } from "@refinedev/antd";

3. Add the <DeleteButton/> component to the actions column of the table as shown below:

   <Table.Column
       title="Actions"
       dataIndex="actions"
       render={(_, record: BaseRecord) => (
           <Space>
               <EditButton hideText size="small" recordItemId={record.id} />
               <ShowButton hideText size="small" recordItemId={record.id} />
               <DeleteButton hideText size="small" recordItemId={record.id} />
           </Space>
       )}
   />

   recordItemId is the id of the record you want to delete.

Now, you can try to delete a record from the list page. Just click on the delete button of the record you want to delete and confirm the deletion.

Enabling Delete Feature on Show Page and Edit Page

When we define a resource, we can enable the delete feature on the show page and edit page by setting the canDelete property in meta to true as shown below:

import { Refine } from "@refinedev/core";
import { Layout, notificationProvider, ErrorComponent } from "@refinedev/antd";
import routerBindings, {
    UnsavedChangesNotifier,
} from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";

import { BrowserRouter } from "react-router-dom";

import { ProductList } from "pages/products/list";
import { ProductEdit } from "pages/products/edit";
import { productshow } from "pages/products/show";
import { ProductCreate } from "pages/products/create";

import "@refinedev/antd/dist/reset.css";

const App: React.FC = () => {
    return (
        <BrowserRouter>
            <Refine
                routerProvider={routerBindings}
                dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
                notificationProvider={notificationProvider}
                resources={[
                    {
                        name: "products",
                        meta: {
                            canDelete: true,
                        },
                    },
                ]}
                options={{
                    syncWithLocation: true,
                    warnWhenUnsavedChanges: true,
                }}
            >
                {/* ... */}
                <UnsavedChangesNotifier />
            </Refine>
        </BrowserRouter>
    );
};
export default App;

After setting the canDelete property in meta to true, you will see a delete button on the show page and edit page. Because we used the <Show/> and <Edit/> components in the show page and edit page, the delete button will be added automatically in these components.

Refer to the <Refine/> documentation for more information about the canDelete property →

tip

You can also use useDelete hook provided by refine to delete a record.

Refer to the useDelete documentation for more information information →

Checklist

I added the delete feature to the list page.

I enabled the delete feature on the show page and edit page.