MUI-datatables添加可编辑输入字段失败，是否需改用@mui/x-data-grid？

问题原因 #

你的代码存在一个关键错误：customBodyRender 被放在了列配置的根层级，而非 options 对象内部。MUI-datatables 仅会识别 options 里的自定义渲染配置，根层级的 customBodyRender 不会生效，这导致表格默认给单元格添加了只读/禁用属性，即便你设置 readOnly: false 也无法覆盖。

修复后的代码 #

将 customBodyRender 移至 options 中，同时把 TextField 改为受控模式（用 value 替代 defaultValue，确保数据同步）：

import MUIDataTable from "mui-datatables";
import { MuiThemeProvider } from '@material-ui/core/styles';
import TextField from '@mui/material/TextField';

const columns = [
        {
            name: 'name',
            label: translationState['label.name'],
            options: {
                sort: true,
                // 将 customBodyRender 移到 options 内部
                customBodyRender: (value, tableMeta, updateValue) => {  
                    return (
                        <TextField 
                            required 
                            value={value} 
                            onChange={event => updateValue(event.target.value)}
                            InputProps={{
                                readOnly: false
                            }}
                        />
                    )
                }
            },
        },
        // 其他列配置...
]

组件选择建议 #

• MUI-datatables 并非只能用于数据展示，它支持基础的行内编辑，但功能偏轻量化，更适合简单编辑场景。
• 如果需要复杂的表格编辑能力（比如批量编辑、编辑状态管理、编辑校验、原生编辑工具栏等），@mui/x-data-grid 是更优选择——它原生集成了完整的编辑功能，API 更完善，无需手动通过自定义渲染实现基础编辑，开发效率更高。

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