can't have multiple columns expandable in GRID_DETAIL_PANEL_TOGGLE_COL_DEF DataGridPro

123 views Asked by At

enter image description here

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.

0

There are 0 answers