如何隐藏Material-UI DataGrid中groupingValueGetter导致的重复列？

问题场景 #

使用@mui/x-data-grid@^5.17.21和react@^16.13.1实现行分组时，出现两个"Datetime"列，第二个分组表头显示"Invalid Date"，需要隐藏多余列并修复日期显示异常问题。

解决方案 #

1. 隐藏重复的原Datetime列 #

当将Datetime字段设为分组依据时，DataGrid会自动生成对应的分组表头列，无需保留手动定义的原Datetime列。只需在列配置中给该列添加hide: true属性：

const columns = [
  // 其他列配置...
  {
    field: "datetime",
    headerName: "Datetime",
    type: "dateTime", // 确保日期类型配置正确
    hide: true, // 隐藏原列，仅保留分组生成的表头列
    groupable: true,
  },
];

2. 修复"Invalid Date"显示问题 #

该提示通常因分组字段的日期格式不合法导致，需确保datetime字段的值是有效的Date对象或可被解析为日期的字符串。若后端返回字符串格式，可在列配置中添加valueFormatter做转换：

{
  field: "datetime",
  headerName: "Datetime",
  type: "dateTime",
  hide: true,
  groupable: true,
  valueFormatter: (params) => {
    const date = new Date(params.value);
    return isNaN(date.getTime()) ? "" : date.toLocaleString();
  },
}

3. 检查分组配置 #

确认rowGroupingModel中仅添加一次datetime字段，避免重复分组导致多列：

<DataGrid
  // 其他配置...
  rowGroupingModel={["datetime"]}
  groupingColDef={{
    headerName: "Datetime", // 自定义分组表头名称
  }}
/>

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