reactjsmaterial-ui

want to change the position of React Material-UI DataGrid filter menu popup

i have implemented React Material-UI DataGrid with filter in toolbar. enter image description here

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?

Solution

  • 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.