MUI 数据表中的输入字段答案

【问题标题】：Input field in MUI-datatableMUI 数据表中的输入字段
【发布时间】：2023-01-24 16:15:23
【问题描述】：

是否可以将输入字段添加到 MUI 数据表？我希望用户能够修改 MUI 数据表中的数据。但是 customBodyRender 对我不起作用。

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: (value, tableMeta, updateValue) => {  
                return (
                    <TextField required defaultValue={value} 
                      onChange={event => updateValue(event.target.value)}
                      InputProps={{
                        readOnly: false, //I tried to make sure it is not readOnly
                      }}
                    />
                )
            }
        },... some other columns]

该字段仍处于禁用状态。 mui-datatables documentation

我试过根据this example来做。

const columns = [
      {
        name: "Name",
        options: {
          filter: false,
          customBodyRender: (value, tableMeta, updateValue) => (
            <FormControlLabel
              label=""
              value={value}
              control={<TextField value={value} />}
              onChange={event => updateValue(event.target.value)}
            />
          )
        }
      },

但我无法让它发挥作用。

MUI-datatables只是用来显示数据的吗？我应该使用@mui/x-data-grid insted of datatables来允许用户修改数据吗？

【问题讨论】：

标签： reactjs material-ui mui-datatable mui-datagrid

【解决方案1】：

我把 options 的右括号放在了错误的行上......

const columns = [
    {
        name: 'name',
        label: translationState['label.name'],
        options: {
            sort: true,
        // }, closing parenthesis at the wrong line
            customBodyRender: (value, tableMeta, updateValue) => {  
                return (
                    <TextField required defaultValue={value} 
                      onChange={event => updateValue(event.target.value)}
                      InputProps={{
                          readOnly: false,
                      }}
                    />
                )
            }
        } // correct position of `options` closing parenthesis
    },... some other columns

customBodyRender 是options 的一个属性，所以它必须在它的括号内。

【讨论】：