[DataGridPremium] heavy customisation of menu panels.

[toinhao1]

Order ID 💳

46557

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

I am trying to heavily style the buttons and panels for the various grid functionality, such as filtering, columns, export, and density.

For filtering I see in the documentation: here https://mui.com/x/react-data-grid/filtering/#customize-the-filter-panel-content and here: https://mui.com/x/react-data-grid/filtering/#customize-the-filter-panel-position.

Even with this it is not very straightforward on how to properly style the Filter panel.

I am now trying to figure out how to style the ColumnVisibility Panel, but can not find anywhere in the documentation or in an issue of how to do this.

Also, I see how we can position the Panel beneath lets say the Filters button:

But then all of the other panels are positioned where the Filters panel is.

How can I properly style the ColumnVisibility Panel without having to create an entirely custom one?
How can I ensure that each panel respective to each button is placed directly below it? Like this:

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[toinhao1]

We were able to figure out how to style the columnsPanel through componentProps like this:

columnsPanel: { sx: all styles here, }

Is there anyway to have the location of this panel and the filter panel be in different locations?

[alexfauquette]

Effectively, to style the panels, you need to pass the sx prop to the component itself, beacause they are rendered outside of the scope of the data gird

For the position, it's a bit more tricky, because we have only one panel that renders either the filter panel or the column panel. Depending on the one which is open. So we can only pass on anchorEl

A workaround is to override the default panel such that looks at the currently open element and adapt the anchorEl according to to it. Here is an example:
https://codesandbox.io/s/customfilterpanelposition-demo-mui-x-forked-ddv6y4?file=/demo.tsx

---

Maybe a later improvement could be to add two props filterAnchorEl and columnsAnchorEl such that the position is
anchorEl={filterAnchorEl || anchorEl}

[toinhao1]

Thank you!

[alexfauquette]

@cherniavskii Should it be added into the receipt pages? like a section "customizing panels"