Version: 4.xx.xx

5. Adding Delete Feature

Let's start by adding the delete feature to the list page by adding a delete button to the table. To do this, we will use the useDelete hook.

useDelete is a refine hook that is used to delete a record. It returns mutation functions that can be used to delete a record. When the mutation function is called, the parameters of the function are passed to the delete method of the data provider.

Refer to the useDelete documentation for more information &#8594

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

Open the src/pages/blog-posts/list.tsx file on your editor.

Import the useOne hook from @refinedev/core:

import { useOne } from '@refinedev/core'

Call the useDelete hook in the BlogPostList component:
```
const BlogPostList: React.FC = () => {
  const { mutate: deleteBlogPost } = useDelete()
}
```
deleteBlogPost mutation takes id, resource etc. You can check the parameters of the mutation function in the documentation.

Add the <button/> component to the actions column of the table as shown below:

{
            id: "actions",
            accessorKey: "id",
            header: "Actions",
            cell: function render({ getValue }) {
                return (
                    <div
                        style={{
                            display: "flex",
                            flexDirection: "row",
                            flexWrap: "wrap",
                            gap: "4px",
                        }}
                    >
                        <button
                            onClick={() => {
                                show("blog_posts", getValue() as string);
                            }}
                        >
                            Show
                        </button>
                        <button
                            onClick={() => {
                                edit("blog_posts", getValue() as string);
                            }}
                        >
                            Edit
                        </button>
                        <button
                            onClick={() => {
                                deleteBlogPost({
                                    resource: "blog_posts",
                                    id: getValue() as string,
                                });
                            }}
                        >
                            Delete
                        </button>
                    </div>
                );
            },
        },

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.

tip

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

Refer to the useDelete documentation for more information information &#8594

Checklist

I added the delete feature to the list page.

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