How to create custom button in Material UI list page?

I am editing list.tsx. How can create custom button like "Generate Product" and call to /genProduct?

2 Replies

Hi @vtong 🙋♂. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create a custom button in the Material UI list page, you can use the headerButtons property of the <List> component. Here's how you can add a custom "Generate Product" button that calls /genProduct:

import { List } from "@refinedev/mui";
import { Button } from "@mui/material";

const PostList: React.FC = () => {
  return (
    <List
      headerButtons={({ defaultButtons }) => (
        <>
          {defaultButtons}
          <Button 
            variant="contained" 
            onClick={() => {
              // Call to /genProduct
              fetch('/genProduct', { method: 'POST' })
                .then(response => response.json())
                .then(data => console.log(data))
                .catch(error => console.error('Error:', error));
            }}
          >
            Generate Product
          </Button>
        </>
      )}
    >
      <span>Rest of your page here</span>
    </List>
  );
};

import { List } from "@refinedev/mui";
import { Button } from "@mui/material";

const PostList: React.FC = () => {
  return (
    <List
      headerButtons={({ defaultButtons }) => (
        <>
          {defaultButtons}
          <Button 
            variant="contained" 
            onClick={() => {
              // Call to /genProduct
              fetch('/genProduct', { method: 'POST' })
                .then(response => response.json())
                .then(data => console.log(data))
                .catch(error => console.error('Error:', error));
            }}
          >
            Generate Product
          </Button>
        </>
      )}
    >
      <span>Rest of your page here</span>
    </List>
  );
};

In this example, we're using the headerButtons prop of the <List> component to add a custom button alongside the default buttons. The custom button is created using Material UI's <Button> component. The onClick handler of the button makes a POST request to /genProduct. You can adjust this to fit your specific API requirements. This approach allows you to keep the default buttons (like the Create button) while adding your own custom buttons. Source: Material UI List Component Remember to import any necessary components and hooks, and to handle the API call and its response appropriately in your actual implementation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

How to create custom button in Material UI list page?

Did you find this page helpful?