Export Button Removes Create Button

Whenever using useExport, it overrides Create, i need both beside each other how can i achieve this.

8 Replies

Hi @George Mohsen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The useExport hook in Refine does not override or remove the Create button. They can be used independently and can coexist in the same component. The useExport hook is used to export data, while the Create button is typically used to navigate to a form for creating a new record. Here's an example of how you can use the useExport hook with an Export button:

import { useExport } from "@refinedev/core";  

const MyComponent = () => {  
 const { triggerExport } = useExport<IPost>();  

 return <button onClick={triggerExport}>Export Button</button>;  
};

import { useExport } from "@refinedev/core";  

const MyComponent = () => {  
 const { triggerExport } = useExport<IPost>();  

 return <button onClick={triggerExport}>Export Button</button>;  
};

(Source: React-admin vs Refine - Which React Framework is Best for B2B Apps? (https://refine.dev/blog/react-admin-vs-refine#csv-importexport)) If you want to have a Create button next to the Export button, you can simply add another button for the create action. Here's a hypothetical example:

import { useExport } from "@refinedev/core";  

const MyComponent = () => {  
 const { triggerExport } = useExport<IPost>();  

 return (
   <>
     <button onClick={triggerExport}>Export Button</button>
     <button onClick={/* your create action here */}>Create Button</button>
   </>
 );  
};

import { useExport } from "@refinedev/core";  

const MyComponent = () => {  
 const { triggerExport } = useExport<IPost>();  

 return (
   <>
     <button onClick={triggerExport}>Export Button</button>
     <button onClick={/* your create action here */}>Create Button</button>
   </>
 );  
};

Please replace /* your create action here */ with the actual action you want to perform when the Create button is clicked. Remember, the actual implementation may vary depending on your application's requirements and the UI library you're using. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

optimistic-gold•5mo ago

Thanks a lot @kapa.ai , i do have further question i need to put it beside the default create button for the post, and style it the same, how can i achieve this ?

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To add a custom button next to the default Create button in Refine, you can use the headerButtons property of the <Create> component. This property accepts a React.ReactNode or a render function, which you can use to keep the existing buttons and add your own. Here's an example of how you can add a custom button next to the default Create button:

import { Create } from "@refinedev/mui";  
import { Button } from "@mui/material";  
  
const PostCreate: React.FC = () => {  
 return (  
 <Create  
 headerButtons={({ defaultButtons }) => (  
 <>  
 {defaultButtons}  
 <Button type="primary">Custom Button</Button>  
 </>  
 )}  
 >  
 <span>Rest of your page here</span>  
 </Create>  
 );  
};

import { Create } from "@refinedev/mui";  
import { Button } from "@mui/material";  
  
const PostCreate: React.FC = () => {  
 return (  
 <Create  
 headerButtons={({ defaultButtons }) => (  
 <>  
 {defaultButtons}  
 <Button type="primary">Custom Button</Button>  
 </>  
 )}  
 >  
 <span>Rest of your page here</span>  
 </Create>  
 );  
};

(Source: Refine Documentation (https://refine.dev/docs/ui-integrations/material-ui/components/basic-views/create#headerbuttons)) In this example, {defaultButtons} represents the default Create button, and <Button type="primary">Custom Button</Button> is the custom button that you're adding. You can replace Custom Button with Export or any other label you prefer. Please note that the actual implementation may vary depending on the UI library you're using. The example above uses Material-UI, but if you're using a different library like Ant Design or Chakra UI, you'll need to import the Button component from that library instead. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

optimistic-gold•5mo ago

Thanks a lot @kapa.ai

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You're welcome! If you have any other questions about Refine or need further assistance, feel free to ask. Happy coding! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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