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•12mo 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•12mo ago

<@391513391870640138> kapa.ai is still learning and improving, please let us know how it did by reacting below

other-emerald•12mo 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

Access Control Provider | refine

Overview

correct-apricot•12mo 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

other-emerald•12mo 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>
                    )}
                />