6

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: "xyz@gmail.com"}]}
              columns={[{ field: "name", headerName: "Name" }, { field: "email", headerName: "Email" }]}
            />
          )
};

export default MyComponent;
CoderInUi
  • 126
  • 2
  • 4
  • 11
  • I think it's not yet implemented for DataGrid and XGrid see this [material-ui doc](https://material-ui.com/components/data-grid/editing/) but you can do it with Table from material-ui – antoineso Feb 11 '21 at 13:23

3 Answers3

13
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: "xyz@gmail.com" }];
          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.

Kazi Mashry
  • 186
  • 1
  • 7
4

Yeah, you can add renderCell to you column as

enter image description here

Dima Dorogonov
  • 2,297
  • 1
  • 20
  • 23
-1

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

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

nop-ea
  • 11
  • Hi and welcome to SO. Please refrain from using only a link to answer the question. It would have been better to add the link in a comment. – Iliass Nassibane Feb 22 '21 at 14:57