I am expanding on this demo: https://mui.com/x/react-data-grid/master-detail/
It allows to have one extendable column value, but not more than one, is it possible to add more than one expandable column when using GRID_DETAIL_PANEL_TOGGLE_COL_DEF?
The cause seems to be that GRID_DETAIL_PANEL_TOGGLE_COL_DEF sets the grid field name to detail_panel_toggle by default. Field names have to be unique in the grid, so GRID_DETAIL_PANEL_TOGGLE_COL_DEF can be used only once.
Is it possible to change the field name when adding the second column?
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' },
];
Have 2 extandable column, see image attached.
