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:
Open the
src/pages/blog-posts/list.tsx
file on your editor.Import the
<DeleteButton/>
component from@refinedev/mui
:import { DeleteButton } from "@refinedev/mui";
Add the
<DeleteButton/>
component to theactions
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,
},
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,
ErrorComponent,
LightTheme,
RefineSnackbarProvider,
notificationProvider,
} from "@refinedev/mui";
import { CssBaseline, GlobalStyles, ThemeProvider } from "@mui/material";
import routerBindings from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";
import { BrowserRouter, Routes, Route, Outlet } 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";
const App: React.FC = () => {
return (
<ThemeProvider theme={LightTheme}>
<CssBaseline />
<GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
<RefineSnackbarProvider>
<BrowserRouter>
<Refine
routerProvider={routerBindings}
dataProvider={dataProvider(
"https://api.fake-rest.refine.dev",
)}
notificationProvider={notificationProvider}
resources={[
{
name: "blog_posts",
list: "/blog-posts",
show: "/blog-posts/show/:id",
create: "/blog-posts/create",
edit: "/blog-posts/edit/:id",
meta: {
canDelete: true,
},
},
]}
>
{/* ... */}
</Refine>
</BrowserRouter>
</RefineSnackbarProvider>
</ThemeProvider>
);
};
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→
You can also use useDelete
hook provided by refine to delete a record.
For more information, refer to the useDelete
documentation→