如何在Material UI DataGrid中显示标签而非categoryId？

问题背景 #

我在数据库中有两张表，想用Material UI的DataGrid组件展示所有列，但不想显示categoryId字段的ID值，而是显示对应的标签（类似下拉选择框valueOptions里的标签）。当前的列配置和行数据如下：

const columns: GridColDef[] = [
    {
        "field": "title",
        "headerName": "Titel",
        "width": 350,
        "editable": true
    },
    {
        "field": "categoryId",
        "headerName": "Kategorie",
        "width": 250,
        "editable": true,
        "type": "singleSelect",
        "valueOptions": [
            {
                "value": "miv560972ynqzk9",
                "label": "stuff 1"
            },
            {
                "value": "1t7n08l9tfdwotn",
                "label": "stuff 2"
            },
        ]
    }
]

const rows: GridRowsProp = [
    {
        "categoryId": "miv560972ynqzk9",
        "title": "Lineare Algebra Hausaufga",
    },
    {
        "categoryId": "1t7n08l9tfdwotn",
        "title": "Test",
    },
]

期望效果是让表格显示标签而非ID，比如把rows中的categoryId转换为包含value和label的对象：

const rows: GridRowsProp = [
    {
        "categoryId": { value:"miv560972ynqzk9", label: "stuff1"},
        "title": "Lineare Algebra Hausaufga",
    },
    {
        "categoryId": { value: "1t7n08l9tfdwotn", label: "stuff2" },
        "title": "Test",
    },
]

方案1：预处理行数据，转换为带label的对象 #

先将valueOptions转换为键值对映射表，再遍历原始行数据，把categoryId替换为包含value和label的对象：

// 构建分类ID到标签的映射表
const categoryMap = new Map(
  columns.find(col => col.field === 'categoryId')?.valueOptions?.map(opt => [opt.value, opt.label])
);

// 转换原始行数据
const transformedRows: GridRowsProp = rows.map(row => ({
  ...row,
  categoryId: {
    value: row.categoryId,
    label: categoryMap.get(row.categoryId) || row.categoryId // 找不到标签时回显ID
  }
}));

同时修改列配置，指定显示label字段，并处理编辑时的值更新：

const columns: GridColDef[] = [
  {
    field: "title",
    headerName: "标题",
    width: 350,
    editable: true
  },
  {
    field: "categoryId",
    headerName: "分类",
    width: 250,
    editable: true,
    type: "singleSelect",
    valueOptions: [
      { value: "miv560972ynqzk9", label: "stuff 1" },
      { value: "1t7n08l9tfdwotn", label: "stuff 2" },
    ],
    // 表格显示时读取label值
    valueGetter: (params) => params.value.label,
    // 编辑选择后更新row的categoryId对象
    valueSetter: (params) => {
      params.row.categoryId = {
        value: params.value,
        label: categoryMap.get(params.value) || params.value
      };
      return true;
    }
  }
];

方案2：使用valueFormatter直接格式化（无需修改rows结构） #

如果不想改变原始行数据的结构，更推荐用DataGrid内置的valueFormatter属性，直接在列配置中处理显示内容，无需转换rows：

const columns: GridColDef[] = [
  {
    field: "title",
    headerName: "标题",
    width: 350,
    editable: true
  },
  {
    field: "categoryId",
    headerName: "分类",
    width: 250,
    editable: true,
    type: "singleSelect",
    valueOptions: [
      { value: "miv560972ynqzk9", label: "stuff 1" },
      { value: "1t7n08l9tfdwotn", label: "stuff 2" },
    ],
    // 根据ID查找对应的标签显示，找不到则回显ID
    valueFormatter: (params) => {
      const matchedOption = params.colDef.valueOptions?.find(opt => opt.value === params.value);
      return matchedOption?.label || params.value;
    }
  }
];

这种方法保留了原始rows的结构，表格自动将ID转换为标签显示，编辑时仍以原始ID作为提交值，更贴合DataGrid的设计逻辑，也减少了数据转换的工作量。

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