I'm currently working on customizing the placement of the GridActionsCellItem elements within the MUI DataGrid component. My goal is to alter the default position of the actions menu in relation to its trigger element. The actions menu relies on a Popper component (base-Popper-root) for positioning, but I haven't been able to directly adjust this through props.
Here's an example image showcasing the current positioning that I aim to modify:
https://i.sstatic.net/cS8BL.jpg
The relevant section of the DOM structure appears as follows:
<div role="tooltip" class="base-Popper-root MuiDataGrid-menu css-1xif2b4-MuiPopper-root-MuiDataGrid-menu" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-915.455px, 105.455px, 0px);" data-popper-placement="bottom-end"><div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-1ps6pg7-MuiPaper-root" style="opacity: 1; transform: none; transform-origin: right top; transition: opacity 207ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 138ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"><ul class="MuiList-root MuiList-padding MuiDataGrid-menuList css-h4y409-MuiList-root" role="menu" tabindex="-1" id=":ru:" aria-labelledby=":rv:"><li class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-1ihpxwe-MuiButtonBase-root-MuiMenuItem-root" tabindex="-1" role="menuitem"><div class="MuiListItemIcon-root css-cveggr-MuiListItemIcon-root"><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="DeleteIcon"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM19 4h-3.5l-1-1h-5l-1 1H5v2h14z"></path></svg></div>Delete<span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"></span></li></ul></div></div>
I tried adjusting the positioning by styling the GridActionsCellItem component without success:
const StyledGridActionsCellItem = styled(GridActionsCellItem)(() => ({
'& .base-Popper-root': {
offset: {
offset: [-30, +20],
},
},
}));
Below is a simplified version of my code for reference:
import * as React from 'react';
import {
DataGrid,
GridActionsCellItem,
GridRowId,
GridColDef,
GridActionsCellItemProps,
} from '@mui/x-data-grid';
import DeleteIcon from '@mui/icons-material/Delete';
import { styled, } from '@mui/material';
const initialRows = [
{ id: 1, name: "sd" },
{ id: 2, name: "sdds" },
{ id: 3, name: "sdds" },
];
const StyledGridActionsCellItem = styled(GridActionsCellItem)(() => ({
'& .base-Popper-root': {
offset: {
offset: [-30, +20],
},
},
}));
const DeleteUserActionItem = ({
deleteUser,
...props
}: GridActionsCellItemProps & { deleteUser: () => void }) => {
const [open, setOpen] = React.useState(false);
return (
<React.Fragment>
<StyledGridActionsCellItem {...props} onClick={() => setOpen(true)
}
/>
</React.Fragment>
);
}
type Row = (typeof initialRows)[number];
const ActionsWithModalGrid = () => {
const [rows, setRows] = React.useState<Row[]>(initialRows);
const deleteUser = React.useCallback(
(id: GridRowId) => () => {
setTimeout(() => {
setRows((prevRows) => prevRows.filter((row) => row.id !== id));
});
},
[],
);
const columns = React.useMemo<GridColDef<Row>[]>(
() => [
{ field: 'name', type: 'string' },
{
field: 'actions',
type: 'actions',
width: 80,
getActions: (params) => [
<DeleteUserActionItem
label="Delete"
showInMenu
icon={<DeleteIcon />}
deleteUser={deleteUser(params.id)}
closeMenuOnClick={false}
/>,
],
},
],
[deleteUser],
);
return (
<div style={{ height: 300, width: '100%' }}>
<DataGrid columns={columns} rows={rows} />
</div>
);
}
export default ActionsWithModalGrid;
Source: https://mui.com/x/react-data-grid/column-definition/
Despite referencing the MUI documentation, I couldn't find a resolution to my issue.
Queries:
How can I effectively adjust the positioning of GridActionsCellItem in an MUI DataGrid using the Popper component? Are there specific props or alternative methods to customize the Popper component utilized by GridActionsCellItem for positioning? Any insights or recommendations on achieving this customization would be greatly valued. Thank you!