I am using material-ui data-grid and I want to show Edit material-ui icons against each row. But in data-grid, we don't have any props that can be used for the same. Below is the source code:

import React, {useState, useEffect} from "react";
import { DataGrid } from "@material-ui/data-grid";
import { Edit } from "@material-ui/icons";

    const MyComponent= () => {
          return (
             <DataGrid
              rows={[{name: "ABC", email: "[email protected]"}]}
              columns={[{ field: "name", headerName: "Name" }, { field: "email", headerName: "Email" }]}
            />
          )
};

export default MyComponent;

I am using material-ui data-grid and I want to show Edit material-ui icons against each row. But in data-grid, we don't have any props that can be used for the same. Below is the source code:

import React, {useState, useEffect} from "react";
import { DataGrid } from "@material-ui/data-grid";
import { Edit } from "@material-ui/icons";

    const MyComponent= () => {
          return (
             <DataGrid
              rows={[{name: "ABC", email: "[email protected]"}]}
              columns={[{ field: "name", headerName: "Name" }, { field: "email", headerName: "Email" }]}
            />
          )
};

export default MyComponent;

• javascript
• html
• reactjs
• datagrid
• material-ui

• I think it's not yet implemented for DataGrid and XGrid see this material-ui doc but you can do it with Table from material-ui – antoineso Commented Feb 11, 2021 at 13:23

3 Answers 3

import React, {useState, useEffect} from "react";
import { FormControlLabel, IconButton } from '@material-ui/core';
import { DataGrid } from "@material-ui/data-grid";
import EditIcon from '@material-ui/icons/Edit';
import { blue } from '@material-ui/core/colors';

    const MatEdit = ({ index }) => {

        const handleEditClick = () => {
            // some action
        }


        return <FormControlLabel
                   control={
                       <IconButton color="secondary" aria-label="add an alarm" onClick={handleEditClick} >
                           <EditIcon style={{ color: blue[500] }} />
                       </IconButton>
                   }
               />
    };

    const MyComponent= () => {
          const rows = [{ id: 1, name: "ABC", email: "[email protected]" }];
          const columns=[
                    { field: "name", headerName: "Name" }, 
                    { field: "email", headerName: "Email" },
                    {
                        field: "actions",
                        headerName: "Actions",
                        sortable: false,
                        width: 140,
                        disableClickEventBubbling: true,
                        renderCell: (params) => {
                            return (
                                <div className="d-flex justify-content-between align-items-center" style={{ cursor: "pointer" }}>
                                    <MatEdit index={params.row.id} />
                                 </div>
                            );
                         }
                      }
                  ];

          return (
             <div style={{ height: 500, width: 500 }}>
                 <DataGrid rows={rows} columns={columns} />
             </div>
          )
};

export default MyComponent;

Click here to see the demo.

Yeah, you can add renderCell to you column as

You can create custom column definitions and provide custom render functions for cells.

See https://material-ui.com/components/data-grid/rendering/ for details.