How to use MUI Data Grid with custom Fields [images/ button] 2024

Using MUI (Material-UI) DataGrid with a custom button or image involves a few steps. MUI DataGrid is a powerful component for displaying and manipulating tabular data in React applications. Here’s a basic guide on how to integrate custom buttons or images into your DataGrid:

1. Install MUI DataGrid

First, ensure you have MUI DataGrid installed. If not, you can install it via npm:

npm install @mui/x-data-grid

2. Set Up Your DataGrid

Start by setting up a basic DataGrid. You’ll need to import the necessary components and define your columns and rows:

const rows = [
  {
    id: 1,
    agencyname: 'Thomas Hernandez',
    agencyphone: '1234567890',
    businessname: "DreamHome Realty",
    status: "true",
    clients: "85",
    action: "action",
  },
  {
    id: 2,
    agencyname: 'Thomas Hernandez',
    agencyphone: '1234567890',
    businessname: "DreamHome Realty",
    status: "true",
    clients: "85",
    action: "action",
  },
  {
    id: 3,
    agencyname: 'Thomas Hernandez',
    agencyphone: '1234567890',
    businessname: "DreamHome Realty",
    status: "true",
    clients: "85",
    action: "action",
  },
  {
    id: 4,
    agencyname: 'Thomas Hernandez',
    agencyphone: '1234567890',
    businessname: "DreamHome Realty",
    status: "true",
    clients: "85",
    action: "action",
  },
  {
    id: 5,
    agencyname: 'Thomas Hernandez',
    agencyphone: '1234567890',
    businessname: "DreamHome Realty",
    status: "true",
    clients: "85",
    action: "action",
  },
];

3. Adding a Custom Button or Image

To add a custom button or image, you’ll need to create a new column in the DataGrid. This column will use a renderCell function to return the custom element (button or image) for each row.

const columns = [
  { field: 'id', headerName: 'ID', width: 50 },
  {
    field: 'agencyname',
    headerName: 'Agency Name',
    width: 200,
  },
  {
    field: 'agencyphone',
    headerName: 'Agency  Phone',
    width: 160,
  },
  {
    field: 'businessname',
    headerName: 'Business Name',
    width: 200,
  },
  {
    field: 'status',
    headerName: 'Status ',
    width: 100,
    renderCell: () => (
      <Chip label="Active" color="success" sx={{
        fontWeight: "700", fontSize: "12px",
        backgroundColor: alpha(theme.palette.success.dark, 0.16),
        color: theme.palette.success.dark,
      }} />
    ),
  },
  {
    field: 'clients',
    headerName: 'Clients ',
    width: 100,
  },
  {
    field: 'action',
    headerName: 'Action ',
    width: 200,
    renderCell: () => (
      <>
        <Tooltip title="Edit" placement="top-start">
          <IconButton color="primary">
            <img src={edit} alt="edit" />
          </IconButton>
        </Tooltip>

        <Tooltip title="Invite To Whatsapp" placement="top-start">
          <IconButton color="primary">
            <img src={whatsapp} alt="whatsapp" />
          </IconButton>
        </Tooltip>
      </>
    ),
  },
];

4. Render the DataGrid

Finally, render the DataGrid component in your React component:

<DataGrid
     sx={{
       overflow: "hidden",
       borderRadius: "4px",
       border: "1px solid #ccc",
       "& .MuiDataGrid-cell": { borderBottom: "1px solid rgba(241, 243, 244, 1)" }
     }}
     rows={rows}
     columns={columns}
     initialState={{
       pagination: {
         paginationModel: {
           pageSize: 5,
         },
       },
     }}
     pageSizeOptions={[5]}
     disableRowSelectionOnClick
   />