如何在DataGridPro中用GRID_DETAIL_PANEL_TOGGLE_COL_DEF实现多可展开列

我正在基于MUI X Data Grid的主从Demo进行扩展，原Demo仅支持单个可展开列。想请教：使用GRID_DETAIL_PANEL_TOGGLE_COL_DEF时，能否添加多个可展开列？

观察到GRID_DETAIL_PANEL_TOGGLE_COL_DEF默认的网格字段名为detail_panel_toggle，而网格要求字段名必须唯一，所以默认只能用一次。请问添加第二个列时，能不能修改这个字段名？

我的代码示例如下：

const columns: GridColDef[] = [
 { field: 'currency', headerName: 'Currency' },
 { 
    ...GRID_DETAIL_PANEL_TOGGLE_COL_DEF,
    renderHeader: () => (<>{'Product01'}</>),
    width: 100,
    renderCell: (params) => <CustomDetailPanelToggle {...params} />,
 },
 { 
    ...GRID_DETAIL_PANEL_TOGGLE_COL_DEF,  /// --- >>> change field value from __detail_panel_toggle__ to something else.
    renderHeader: () => (<>{'Product02'}</>),
    width: 100,
    renderCell: (params) => <CustomDetailPanelToggle {...params} />,
 },
 { field: 'address', headerName: 'Address' },
];

期望实现两个独立的可展开列，效果见上方图片。

解答 #

可以修改字段名，只需要在第二个列的定义中显式覆盖field属性即可。因为GRID_DETAIL_PANEL_TOGGLE_COL_DEF是一个默认配置对象，通过扩展运算符复制后，后续声明的属性会覆盖默认值。

修改后的代码示例：

const columns: GridColDef[] = [
 { field: 'currency', headerName: 'Currency' },
 { 
    ...GRID_DETAIL_PANEL_TOGGLE_COL_DEF,
    renderHeader: () => (<>{'Product01'}</>),
    width: 100,
    renderCell: (params) => <CustomDetailPanelToggle {...params} />,
 },
 { 
    ...GRID_DETAIL_PANEL_TOGGLE_COL_DEF,
    field: 'detail_panel_toggle_product2', // 自定义唯一字段名
    renderHeader: () => (<>{'Product02'}</>),
    width: 100,
    renderCell: (params) => <CustomDetailPanelToggle {...params} />,
 },
 { field: 'address', headerName: 'Address' },
];

如果需要让两个展开列对应不同的详情面板内容，可以在getDetailPanelContent方法中根据行数据或者触发来源返回不同的内容；或者在CustomDetailPanelToggle组件中，通过params.field来区分不同的展开触发列，绑定对应的展开状态逻辑。

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