如何在MUI DataGrid中添加每行的编辑/删除自定义按钮

要在DataGrid的每行添加编辑、删除等操作按钮，只需修改列配置中的actions列，通过render属性自定义单元格内容即可，以下是完整实现代码：

1. 导入所需组件（若使用MUI图标） #

import { EditIcon, DeleteIcon } from '@mui/icons-material';
import { IconButton, Box } from '@mui/material';

2. 修改列配置 #

const columns = [
    { field: 'model_id', headerName: 'ID', width: 70, sortable: false },
    { field: 'model_code', headerName: 'Model Code', width: 130 },
    { field: 'model_description', headerName: 'Description', width: 400 },
    { 
        field: 'actions', 
        headerName: 'Actions', 
        width: 400,
        // 自定义单元格渲染逻辑
        renderCell: (params) => {
            // 编辑按钮点击逻辑
            const handleEdit = () => {
                console.log('待编辑行数据:', params.row);
                // 此处添加实际编辑逻辑，比如打开编辑弹窗、跳转编辑页面等
            };

            // 删除按钮点击逻辑
            const handleDelete = () => {
                console.log('待删除行ID:', params.row.model_id);
                // 此处添加实际删除逻辑，比如弹出确认框、调用删除接口等
            };

            return (
                <Box sx={{ display: 'flex', gap: 1 }}>
                    <IconButton color="primary" onClick={handleEdit}>
                        <EditIcon />
                    </IconButton>
                    <IconButton color="error" onClick={handleDelete}>
                        <DeleteIcon />
                    </IconButton>
                    {/* 可按需添加更多操作按钮，比如详情按钮 */}
                </Box>
            );
        }
    }
];

3. DataGrid组件保持原有结构 #

<DataGrid
    rows={models}
    columns={columns}
    getRowId={(row) => row.model_id}
    pageSize={5}
    rowsPerPageOptions={[5]}
    checkboxSelection 
/>

关键说明 #

• renderCell函数接收的params对象包含当前行的完整数据（params.row），可直接获取行ID、字段值等信息。
• 按钮样式可通过MUI组件属性自定义，也可替换为普通Button组件适配不同需求。
• 点击事件内可根据业务场景添加具体逻辑，比如接口调用、状态更新等。

内容的提问来源于stack exchange，提问作者Pusoy