Render Detail Panel width issue

[nameis-NAVEEN]

material-react-table version

latest

react & react-dom versions

latest

Describe the bug and the steps to reproduce it

When I use layout mode 'Semantic,' the detail panel is taking up the full width of the row as expected. However, when I use layout mode 'Grid' or 'Grid-No-Grow,' the detail panel is not taking up the full width. @KevinVandy help us resolve this.

Minimal, Reproducible Example - (Optional, but Recommended)

When I use layout mode 'Semantic,' the detail panel is taking up the full width of the row as expected. However, when I use layout mode 'Grid' or 'Grid-No-Grow,' the detail panel is not taking up the full width. @KevinVandy help us resolve this.

Screenshots or Videos (Optional)

Do you intend to try to help solve this bug with your own PR?

None

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[sujan-dahal]

I can reproduce the same. Detail panel's collapse is too aggressive with it's width. It appears that, only Form Components are affected by the width limitation on non-semantic layoutMode. A span in place of textfield, can expand to the allowed colSpan.

[anonisnap]

I just encountered this issue as well. It seems that one of the child elements in the Detail Panel is causing this to be an issue, and I'm not entirely sure why. I did however manage to figure out a workaround that is worth trying

So with a Table using layoutMode: "grid" or layoutMode: "grid-no-grow", I found that a Box being rendered as the Detail Panel will not respect correct size of the Detail Panel

renderDetailPanel: () => (
  <Box minWidth="100px" width="100%" height="100px" bgcolor="lime" />
),

Workaround

I found that adding the following prop to the table ensures the box can actually utilize the width="100%"

muiDetailPanelProps: {
  sx: {
    "& .MuiCollapse-root": {
      width: "100%",
    },
  },
}

System Details

• React: 18.3.1
• MRT: 3.2.1

Hope this helps in any way