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 &#8594

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 @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 { 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 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 &#8594

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.