如何在MUI DataGrid的单个列中使用不同数据类型？

Material UI DataGrid 默认按列指定数据类型，要实现单列内每行使用不同数据类型，需通过自定义单元格渲染器、编辑器，结合每行的类型标识来实现，具体步骤如下：

1. 定义带类型标识的数据结构 #

在每条数据中新增字段标记当前行该列的数据类型，比如editableColumnType：

const rows = [
  { id: 1, editableColumn: 123, editableColumnType: 'number' },
  { id: 2, editableColumn: true, editableColumnType: 'boolean' },
  { id: 3, editableColumn: new Date('2024-05-20'), editableColumnType: 'date' },
  { id: 4, editableColumn: 456, editableColumnType: 'number' },
];

2. 自定义单元格渲染器 #

根据每行的类型标识，渲染对应样式的单元格内容：

import { Checkbox } from '@mui/material';
import { format } from 'date-fns'; // 可选，用于日期格式化

const renderEditableCell = (params) => {
  const { value, row } = params;
  
  switch (row.editableColumnType) {
    case 'boolean':
      return <Checkbox checked={value} disabled />;
    case 'date':
      return value ? format(value, 'yyyy-MM-dd') : '';
    case 'number':
    default:
      return value;
  }
};

3. 自定义编辑组件 #

进入编辑模式时，根据类型显示对应的编辑器：

import { TextField, Checkbox } from '@mui/material';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

const EditableCellEditor = (props) => {
  const { id, value, row, onValueChange } = props;

  const handleChange = (newValue) => {
    onValueChange({ id, field: 'editableColumn', value: newValue });
  };

  switch (row.editableColumnType) {
    case 'boolean':
      return <Checkbox checked={value} onChange={(e) => handleChange(e.target.checked)} />;
    case 'date':
      return (
        <DatePicker
          value={value || new Date()}
          onChange={handleChange}
          renderInput={(params) => <TextField {...params} fullWidth />}
        />
      );
    case 'number':
    default:
      return (
        <TextField
          type="number"
          value={value}
          onChange={(e) => handleChange(Number(e.target.value))}
          fullWidth
        />
      );
  }
};

4. 配置列属性 #

将自定义渲染器和编辑器绑定到目标列，不要设置列的type属性，避免DataGrid自带的类型校验冲突：

const columns = [
  { field: 'id', headerName: 'ID', width: 70 },
  {
    field: 'editableColumn',
    headerName: '可编辑列',
    width: 200,
    renderCell: renderEditableCell,
    editComponent: EditableCellEditor,
    editable: true // 开启编辑权限
  },
];

注意事项 #

• 必须通过数据字段存储每行的类型标识，否则无法动态切换渲染/编辑逻辑
• 编辑时要做好类型转换（比如把输入的字符串转成数字/日期对象）
• 如果需要排序、筛选功能，需自定义排序和筛选逻辑，默认逻辑基于列类型，无法适配多类型场景

内容的提问来源于stack exchange，提问作者emir alp aksungur