如何在 data-grid 组件的列组件中添加编辑 material-ui 图标

Question

我正在使用Material-UI DataGrid，希望在每一行旁边显示编辑的Material-UI图标。但是在DataGrid中，我们没有任何可用于此目的的属性。以下是源代码：

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: "[e-mail]"}]}
              columns={[{ field: "name", headerName: "Name" }, { field: "email", headerName: "Email" }]}
            />
          )
};

export default MyComponent;

- CoderInUi

---

我认为DataGrid和XGrid尚未实现此功能，请参阅material-ui文档，但您可以使用material-ui中的Table来完成它。 - antoineso

Answer 1

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: "[e-mail]" }];
          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;

点击这里查看演示。

- Kazi Mashry

Answer 2

是的，您可以将 renderCell 添加到列中，如下所示：

- Dima Dorogonov

Answer 3

您可以创建自定义列定义并为单元格提供自定义渲染函数。

有关详细信息，请参见https://material-ui.com/components/data-grid/rendering/。

- nop-ea

---

你好，欢迎来到SO。请不要仅使用链接回答问题。最好在评论中添加链接。 - Iliass Nassibane