"Create" button on list page

how can I control of the existence of "Create" button on list page

2 Replies

Hi @koop_g. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To control the existence of the "Create" button on the list page in refine, you have a few options: 1. Using the headerButtons prop: The <List> component accepts a headerButtons prop that allows you to customize the buttons in the header, including the "Create" button. You can use this to conditionally render the button or replace it entirely.

   <List
     headerButtons={({ createButtonProps }) => (
       <>
         {createButtonProps && (
           <CreateButton {...createButtonProps} />
         )}
         {/* Add other custom buttons here */}
       </>
     )}
   >
     {/* List content */}
   </List>

   <List
     headerButtons={({ createButtonProps }) => (
       <>
         {createButtonProps && (
           <CreateButton {...createButtonProps} />
         )}
         {/* Add other custom buttons here */}
       </>
     )}
   >
     {/* List content */}
   </List>

This approach is documented in the Ant Design List component documentation. 2. Using the canCreate prop: The <List> component also accepts a canCreate prop. When set to false, it will hide the "Create" button.

   <List canCreate={false}>
     {/* List content */}
   </List>

   <List canCreate={false}>
     {/* List content */}
   </List>

3. Access Control: If you're using an accessControlProvider, you can control the visibility of the "Create" button based on user permissions. The button will be automatically hidden or disabled if the user doesn't have the necessary permissions. This is mentioned in the Access Control documentation. 4. Custom implementation: If you need more fine-grained control, you can create your own custom list component and manage the "Create" button's visibility manually. Remember that the exact implementation might vary slightly depending on which UI framework you're using with refine (Ant Design, Material UI, Mantine, etc.). The examples above are generally applicable, but you may need to adjust them based on your specific setup. Ant Design List Component Access Control Documentation ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@1327562833537400895> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

"Create" button on list page

Did you find this page helpful?