想要更改 React Material-UI DataGrid filter menu popup 的 position

Question

i have implemented React Material-UI DataGrid with filter in toolbar.

once filter menu/popup open, it'll cover the first few rows of the grid/table, i want this popup to open top-start instead of bottom-start.

is there any way i can achieve this?

Answer 1

After checking the attributes of this filter element, it's a div with a tooltip role. As a result, we can create a css file and modify the top position of divs with tooltip role as below:

div[role="tooltip"] {
  top: -60px !important;
}

Sandbox

as there isn't any option provided in MUI doc for this issue, I think this would be the best workaround.