[data grid] Adjust the width of Column Menu and filter modal of that filter option

[Here2Huynh]

Duplicates
Similar to this but this answer seems to have changed.
Also, have added on to this feature request.

Latest version
I have tested the latest version. I am on "6.19.8".

Summary 💡
I would like some help with adjusting the column menu and filter modal width so it can look better in mobile.

Examples 🌈
Currently, it looks like this. Which is not very mobile friendly.

Even with the suggestion from this ticket. The width of the popper is adjusted but not the whole modal component. Which extends to its default width as shown in the screenshot.

Code:

<DataGridPro
  rows={[]}
  columns={columns}
  componentsProps={{
    columnMenu: {
      // sx: {
      //   backgroundColor: "orange",
      // },
    },
    basePopper: {
      sx: {
        "& .MuiPaper-root": {
          width: 100,
        },
      },
    },
  }}
/>

Motivation 🔦
Mobile responsiveness for data grid's option menu.

Order ID 💳 (optional)
No response

Search keywords:

[michelengelen]

Hey @Here2Huynh could you try setting the width property to '100%', as simply adding 100 will use a width of 100px:

<DataGridPro
  rows={[]}
  columns={columns}
  componentsProps={{
    columnMenu: {
      // sx: {
      //   backgroundColor: "orange",
      // },
    },
    basePopper: {
      sx: {
        "& .MuiPaper-root": {
-         width: 100,
+         width: '100%',
        },
      },
    },
  }}
/>

[Here2Huynh]

Hi @michelengelen , tried it with 100%. It just changes the popper's width not the over all component width.

This is easier shown in this screenshot with width at 50%.

I think I am looking for a class name that encompasses the whole filter modal so I can select and change via CSS.
Unless possible, reorganize the layout similar to this feature request where it stacked as a column.

[michelengelen]

There is one way to apply custom styles to the filterPanel:

slotProps={{
  filterPanel: {
    sx: {
      backgroundColor: 'rgba(0, 0, 0, 0.1)',
      padding: '5px',
      borderRadius: '4px',
    },
  },
}}

The filterPanel can take an sx prop as well, so you can easily style it that way and target any child classes there.

You can also target specific elements within with the gridClasses object that you can import from the datagrid package:

import { gridClasses } from '@mui/x-data-grid';
...
<DataGrid
  ...
  slotProps={{
    filterPanel: {
      sx: {
        backgroundColor: 'rgba(0, 0, 0, 0.1)',
        padding: '5px',
        borderRadius: '4px',

        [`& .${gridClasses.filterForm}`]: {
          backgroundColor: 'rgba(0, 0, 0, 0.1)',
          padding: '5px',
          borderRadius: '4px',
        },
      },
    },
  }}
/>

There are multiple classes that ca be used from that object.

Does that help in your case?

[Here2Huynh]

Ah, it's the filterPanel that I am looking for! Thanks, was able to get it working for me!

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @Here2Huynh?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.