Skip to main content
Version: 3.xx.xx

Edit

<EditButton> uses Material UI <Button> component. It uses the edit method from useNavigation under the hood. It can be useful to redirect the app to the edit page route of resource.

Usage​

src/pages/posts/list.tsx
import { useTable } from "@pankod/refine-core";

import {
List,
Table,
EditButton,
TableHead,
TableRow,
TableCell,
TableBody,
} from "@pankod/refine-mui";

export const PostList: React.FC = () => {
const { tableQueryResult } = useTable<IPost>();

const { data } = tableQueryResult;

return (
<List>
<Table aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell>Title</TableCell>
<TableCell align="center">Action</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data?.data.map((row) => (
<TableRow key={row.id}>
<TableCell>{row.id}</TableCell>
<TableCell component="th" scope="row">
{row.title}
</TableCell>
<TableCell align="center">
<EditButton recordItemId={row.id} />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</List>
);
};

interface IPost {
id: number;
title: string;
}

Will look like this:

Default edit button

Properties​

resourceNameOrRouteName​

It is used to redirect the app to the /edit endpoint of the given resource name. By default, the app redirects to a URL with /edit defined by the name property of resource object.

import { EditButton } from "@pankod/refine-mui";

export const MyEditComponent = () => {
return <EditButton resourceNameOrRouteName="posts" recordItemId="2" />;
};

Clicking the button will trigger the edit method of useNavigation and then redirect to /posts/edit/2.

hideText​

It is used to show and not show the text of the button. When true, only the button icon is visible.

import { EditButton } from "@pankod/refine-mui";

export const MyEditComponent = () => {
return <EditButton hideText />;
};

ignoreAccessControlProvider​

It is used to skip access control for the button so that it doesn't check for access control. This is relevant only when an accessControlProvider is provided to <Refine/>

import { EditButton } from "@pankod/refine-mui";

export const MyListComponent = () => {
return <EditButton ignoreAccessControlProvider />;
};

API Reference​

Properties​

PropertyDescriptionTypeDefault
propsMaterial UI button propsButtonProps
resourceNameOrRouteNameDetermines which resource to use for redirectionstringResource name that it reads from route
hideTextAllows to hide button textbooleanfalse
ignoreAccessControlProviderSkip access controlbooleanfalse
childrenSets the button textReactNode"Edit"
startIconSets the icon component of buttonReactNode<EditOutlinedIcon />
svgIconPropsAllows to set icon propsSvgIconProps
onClickSets the handler to handle click event(event) => voidTriggers navigation for redirect to the edit page of resource