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

    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 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 <DeleteButton/> component from @pankod/refine-mui:

      import { DeleteButton } from "@pankod/refine-mui";
    3. Add the <DeleteButton/> component to the actions column of the table as shown below:

      {
      field: "actions",
      headerName: "Actions",
      renderCell: function render({ row }) {
      return (
      <>
      <EditButton hideText recordItemId={row.id} />
      <ShowButton hideText recordItemId={row.id} />
      <DeleteButton hideText recordItemId={row.id} />
      </>
      );
      },
      align: "center",
      headerAlign: "center",
      minWidth: 80,
      },

      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 to true as shown below:

    import { Refine } from "@pankod/refine-core";
    import {
    Layout,
    ReadyPage,
    ErrorComponent,
    LightTheme,
    CssBaseline,
    GlobalStyles,
    ThemeProvider,
    RefineSnackbarProvider,
    useNotificationProvider,
    } from "@pankod/refine-mui";
    import routerProvider from "@pankod/refine-react-router-v6";
    import dataProvider from "@pankod/refine-simple-rest";

    import { BlogPostList } from "pages/blog-posts/list";
    import { BlogPostEdit } from "pages/blog-posts/edit";
    import { BlogPostShow } from "pages/blog-posts/show";
    import { BlogPostCreate } from "pages/blog-posts/create";

    const App: React.FC = () => {
    return (
    <ThemeProvider theme={LightTheme}>
    <CssBaseline />
    <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
    <RefineSnackbarProvider>
    <Refine
    routerProvider={routerProvider}
    dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
    notificationProvider={useNotificationProvider}
    Layout={Layout}
    ReadyPage={ReadyPage}
    catchAll={<ErrorComponent />}
    resources={[
    {
    name: "blog_posts",
    list: BlogPostList,
    edit: BlogPostEdit,
    show: BlogPostShow,
    create: BlogPostCreate,
    canDelete: true,
    },
    ]}
    />
    </RefineSnackbarProvider>
    </ThemeProvider>
    );
    };
    export default App;

    After setting the canDelete property 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