Edit Button on Show-Page

Hey everyone, I have adjusted the buttons inside of my list-component to have meta-information like this:

<EditButton
  hideText
  size="small"
  recordItemId={record.id}
  meta={{
    source: record.source,
  }}
/>

<EditButton
  hideText
  size="small"
  recordItemId={record.id}
  meta={{
    source: record.source,
  }}
/>

I'm currently lacking a way to adjust the EditButton inside of the @refinedev/antd Show component. Is there an obvious way I am missing?

4 Replies

kapa.ai•12mo ago

Hi @bastianwegge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can customize the EditButton inside the Show component of @refinedev/antd by using the headerButtons property. This property allows you to create your own buttons or utilize the default values of the EditButton component. Here is an example of how you can do it:

import { Show } from "@refinedev/antd";  
import { EditButton } from "@refinedev/antd";  
  
const PostShow: React.FC = () => {  
 return (  
 <Show  
 headerButtons={({ defaultButtons, editButtonProps }) => (  
 <>  
 {defaultButtons}  
 <EditButton
  hideText
  size="small"
  {...editButtonProps}
  meta={{
    source: "your source here",
  }}
/>  
 </>  
 )}  
 >  
 <p>Rest of your page here</p>  
 </Show>  
 );  
};

import { Show } from "@refinedev/antd";  
import { EditButton } from "@refinedev/antd";  
  
const PostShow: React.FC = () => {  
 return (  
 <Show  
 headerButtons={({ defaultButtons, editButtonProps }) => (  
 <>  
 {defaultButtons}  
 <EditButton
  hideText
  size="small"
  {...editButtonProps}
  meta={{
    source: "your source here",
  }}
/>  
 </>  
 )}  
 >  
 <p>Rest of your page here</p>  
 </Show>  
 );  
};

In this example, editButtonProps is used to utilize the default values of the EditButton component. You can replace "your source here" with your actual source. Please note that if canEdit is false, EditButton will not render and editButtonProps will be undefined. For more information, you can refer to the Show component documentation (https://refine.dev/docs/api-reference/antd/components/basic-views/show). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

sunny-green•12mo ago

Uh that's neat, thanks!

flat-fuchsia•12mo ago

@bastianwegge Bot is right 🚀