Skip to main content
Version: 3.xx.xx
    Current Framework
    Headless

    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

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

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

    2. Import the useOne hook from @pankod/refine-core:

      import { useOne } from "@pankod/refine-core";
    3. Call the useDelete hook in the BlogPostList component:

      const BlogPostList: React.FC = () => {
      const { mutate: deleteBlog Post } = useDelete();
      };

      deleteBlogPost mutation takes id, resource etc. You can check the parameters of the mutation function in the documentation.

    4. 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


    Checklist