MUI data-grid-pro Expand cell renderer

Question

I'm trying to use the Expand cell renderer example

1: https://mui.com/components/data-grid/columns/#RenderExpandCellGrid.js provided in the documentation while using data-grid-pro. It started to behave strangely after I added pinned columns:

      <DataGridPro
        rows={rows}
        columns={columns}
        initialState={{
          pinnedColumns: { left: ["col2"], right: [] },
        }}
      />

1. For pinned columns, the popper is displayed bellow the cell:cut-off popper
2. When I move over cells, all the lines I moved over stays selected: 3 selected rows

I'm looking for a solution to implement both column pinning and Expand cell renderer

Answer 1

did you try to modify the z-index of the proper such that it appears on top of the pinned column?