5. Adding Delete Feature

Adding Delete Feature to List Page​

<DeleteButton/> is a Refine component that is used for deleting records. When you click on the delete button, it will show a confirmation modal and delete the record upon confirmation. To add it to the "blog_posts" table:

1. Open the src/pages/blog-posts/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:

   <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>
     )}
   />
   

You can now delete a record from the list page by clicking on the delete button of any blog post.

For more information, refer to the <DeleteButton/> documentation→

Enabling the Delete Feature on Show and Edit Pages​

We can enable the delete feature on both show and edit pages while we are defining a resource by setting the canDelete property in the 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 { 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";

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: "blog_posts",
            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 both show and edit pages.

For more information, refer to the canDelete section of the <Refine/> documentation→