Material UI Grid：如何将嵌套字段作为GridColDef的field使用？

问题场景 #

我需要在Material UI Grid中渲染嵌套结构的JSON响应数据，但Grid的GridColDef的field参数仅支持字符串，尝试使用点语法area.name无法生效。目前已通过将数据映射为扁平对象的方式实现，但希望找到无需提前转换数据的方案。

相关代码示例 #

列定义代码 #

const columns: GridColDef[] = [
    { field: `area.name`, headerName: 'AREA', minWidth: 120 },
    { field: 'costCenter', headerName: 'C. COSTO', minWidth: 120, flex: 4 },
    {
      field: '_',
      minWidth: 140,
      headerName: 'ACCIONES',
      align: 'center',
      headerAlign: 'center',
      renderCell: (params: GridRenderCellParams) => (
        <Tooltip title='Eliminar' placement='top' enterDelay={1000} leaveDelay={0} arrow>
          <i className='tabler-trash text-red-500 text-[20px]' />
        </Tooltip>
      )
    }
  ]

API响应示例 #

{
  "businessType": "GIRAS VENTAS",
  "area": [
    {
      "area": {
        "code": "G",
        "name": "GIRAS"
      },
      "costCenter": "15-05"
    },
    {
      "area": {
        "code": "E",
        "name": "EUROPA"
      },
      "costCenter": "17-07"
    }
  ]
}

当前使用的映射方案（不满意） #

setFormattedData(data.area.map(e => {return {name: e.area.name, code: e.area.code, costCenter: e.costCenter}}))

无需提前映射数据的解决方案 #

Material UI Grid提供了两个直接处理嵌套数据的方式，无需提前转换整个数据集：

1. 使用valueGetter属性 #

在列定义中通过valueGetter直接从嵌套对象中提取值，替代field的点语法：

const columns: GridColDef[] = [
    { 
      headerName: 'AREA', 
      minWidth: 120,
      // 自定义valueGetter获取嵌套数据
      valueGetter: (params) => params.row.area.name
    },
    { field: 'costCenter', headerName: 'C. COSTO', minWidth: 120, flex: 4 },
    {
      field: '_',
      minWidth: 140,
      headerName: 'ACCIONES',
      align: 'center',
      headerAlign: 'center',
      renderCell: (params: GridRenderCellParams) => (
        <Tooltip title='Eliminar' placement='top' enterDelay={1000} leaveDelay={0} arrow>
          <i className='tabler-trash text-red-500 text-[20px]' />
        </Tooltip>
      )
    }
  ]

2. 使用renderCell自定义渲染单元格 #

如果需要对嵌套数据做额外处理，也可以直接在renderCell中读取嵌套字段：

const columns: GridColDef[] = [
    { 
      headerName: 'AREA', 
      minWidth: 120,
      renderCell: (params) => <span>{params.row.area.name}</span>
    },
    { field: 'costCenter', headerName: 'C. COSTO', minWidth: 120, flex: 4 },
    {
      field: '_',
      minWidth: 140,
      headerName: 'ACCIONES',
      align: 'center',
      headerAlign: 'center',
      renderCell: (params: GridRenderCellParams) => (
        <Tooltip title='Eliminar' placement='top' enterDelay={1000} leaveDelay={0} arrow>
          <i className='tabler-trash text-red-500 text-[20px]' />
        </Tooltip>
      )
    }
  ]

这两种方案都可以直接使用原始的嵌套数据，无需提前映射为扁平对象，更符合需求。

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