Search code examples
material-uimui-x-data-gridmui-x

Pinning the DetailsPanel in @mui/x-data-grid-pro


Is it possible to "pin" the details panel on a mui-x data grid pro ? By pinning I mean, making sure that the details panel does not "move" when scrolling horizontally on the data grid. Currently I'm not paying for the pro plan, and would like to make this work before I decide to buy it.

Version of @mui/x-data-grid-pro: 6.19.0

I have tried to add position sticky (along with left: 0) on the details panel container, and I've created this sandbox to demonstrate it.

My idea is that since the pinnedColumns container has position sticky, adding the same css to the detailsPanel container would work too, however, that is not the case. Does anyone know what I can do differently to make it work?


Solution

  • Material-UI's website has an example of the process to pin the column and the panel too.

    https://mui.com/x/react-data-grid/master-detail/ *last example on the page