Adjusting default Position of GridActionsCellItem in MUI DataGrid

Question

I'm working with the MUI DataGrid component and need to adjust the default positioning of the GridActionsCellItem elements. Specifically, I want to change the position of the actions menu relative to its trigger element. The actions menu uses a Popper component (base-Popper-root) for positioning, but I haven't found a way to adjust this directly through props.

Here's an example image of the current positioning I wish to adjust:

The relevant (top) part of the DOM structure looks like this:

<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 attempted to modify the positioning by styling the GridActionsCellItem component, but my changes do not seem to take effect:

const StyledGridActionsCellItem = styled(GridActionsCellItem)(() => ({
  '& .base-Popper-root': {
    offset: {
      offset: [-30, +20],
    },
  },
}));

Here is a simplified version of my code for context:

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;

taken from https://mui.com/x/react-data-grid/column-definition/

I referenced the MUI documentation here but couldn't find a solution to my problem.

Questions:

How can I adjust the positioning of GridActionsCellItem in an MUI DataGrid using the Popper component? Is there a specific prop or a different approach to customize the positioning of the Popper component used by GridActionsCellItem? Any guidance or suggestions on how to achieve this would be greatly appreciated. Thank you!

Answer 1

The following change fixed the problem

  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid columns={columns} rows={rows}
        slotProps={{
          basePopper: {  modifiers: [{ name: 'offset', options: { offset: [-20, -40] } }] }
        }}
      />
    </div>
  );

Answer was retrieved from the following github issue:

https://github.com/mui/mui-x/issues/4495

Hi, you assume well, the menu components are popper and so rendered outside of the grid. Then adding a CSS on the grid root component doe not affect them since they are not a child of this element.

To customize items rendering, you can directly use sx props on GridActionsCellItem

If you want to customize the list parent you can pass props to the popper component using componentsProps.basePopper