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•2y 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•2y ago

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

afraid-scarletOP•2y ago

Uh that's neat, thanks!

other-emerald•2y ago

@bastianwegge Bot is right 🚀

Edit Button on Show-Page

Did you find this page helpful?