javascript - 如何在 data-grid 组件 column 组件中添加 Edit material-ui 图标
问题描述
我正在使用 material-ui data-grid,我想针对每一行显示 Edit material-ui 图标。但是在数据网格中,我们没有任何可以用于相同目的的道具。下面是源代码:
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;
解决方案
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;
单击此处查看演示。
推荐阅读
- php - 如何保护我的 API 免受 Sentry.io Curl 超时?
- c - 所有输出在 C 中都相同
- java - Mockito 单元测试 RestTemplate
- excel - 由于时间输入格式不正确,运行时 13 错误
- jmeter - 将指标写入 influxDB 时发生错误
- android - 从 Firebase 实时数据库中获取价值 (Qt c++)
- c++ - 使用 FStream 制作文件时如何添加文件属性
- swift - 使用文本字段委托来响应文本字段中的即时更改
- node.js - Travis CI 的 Heroku 部署失败
- reactjs - Axios:在POST之前结合来自拦截器和组件的数据请求