optimistic-gold
optimistic-gold9mo ago

How to hide edit button action on specific row at list resource

hiding edit action for specific data in list resource
5 Replies
kapa.ai
kapa.ai9mo ago
Hi @brandonkhj. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Refine, you can control the visibility of the Edit action for specific data in a list resource using the accessControl prop of the EditButton component. This prop can be used to skip the access control check with its enabled property or to hide the button when the user does not have the permission to access the resource with hideIfUnauthorized property. Here is an example of how you can use it:
import { EditButton } from "@refinedev/mui"; // or "@refinedev/antd", "@refinedev/chakra-ui", "@refinedev/mantine" depending on the UI library you use

export const MyListComponent = () => {
return (
<EditButton
accessControl={{ enabled: true, hideIfUnauthorized: true }}
/>
);
};
import { EditButton } from "@refinedev/mui"; // or "@refinedev/antd", "@refinedev/chakra-ui", "@refinedev/mantine" depending on the UI library you use

export const MyListComponent = () => {
return (
<EditButton
accessControl={{ enabled: true, hideIfUnauthorized: true }}
/>
);
};
In this example, the enabled property is set to true and hideIfUnauthorized is also set to true. This means that the Edit action will be hidden if the user does not have the permission to access the resource. Please note that this is relevant only when an accessControlProvider is provided to the <Refine/> component. For more information, you can refer to the following documentation pages: - EditButton in MUI (https://refine.dev/docs/api-reference/mui/components/buttons/edit-button/) - EditButton in Ant Design (https://refine.dev/docs/api-reference/antd/components/buttons/edit-button/) - EditButton in Chakra UI (https://refine.dev/docs/api-reference/chakra-ui/components/buttons/edit-button/) - EditButton in Mantine (https://refine.dev/docs/api-reference/mantine/components/buttons/edit-button/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai9mo ago
<@391513391870640138> kapa.ai is still learning and improving, please let us know how it did by reacting below
adverse-sapphire
adverse-sapphire9mo ago
Hello @brandonkhj , as the bot mentioned, you can use AcccessControl provider for that: https://refine.dev/docs/api-reference/core/providers/accessControl-provider/#buttons
optimistic-gold
optimistic-gold9mo ago
Hey @batuhanw , thanks for assisting. Is there any other way based on data? Example: the data has been cancelled , so edit should not be allowed
adverse-sapphire
adverse-sapphire9mo ago
Depends on how you use it, for example with AntD Table we have code similar to this and we have access to record for every row. You can conditionally based on record's status.
<Table.Column<ICategory>
title="Actions"
dataIndex="actions"
render={(_, record) => (
<Space>
{record.cancelled ? null :
<EditButton
size="small"
hideText
recordItemId={record.id}
/>}
<DeleteButton
size="small"
hideText
recordItemId={record.id}
/>
</Space>
)}
/>
<Table.Column<ICategory>
title="Actions"
dataIndex="actions"
render={(_, record) => (
<Space>
{record.cancelled ? null :
<EditButton
size="small"
hideText
recordItemId={record.id}
/>}
<DeleteButton
size="small"
hideText
recordItemId={record.id}
/>
</Space>
)}
/>