[data grid] Alternative column header group design?

[oliviertassinari]

Steps to reproduce 🕹

Link to live example:

Steps:

1. Open https://mui.com/x/react-data-grid/column-groups/

Current behavior 😯

Expected behavior 🤔

It's about using solid full horizontal bars, so headers feel consistent, but adding a vertical bar when it's needed to disambiguate. This should bring a bit more contrast.

Context 🔦

I can't make sense of the current design of the column group. I'm confused about which column end and starts where. The underline doesn't feel enough, e.g.

Taken from #5133 (comment)

Your environment 🌎

No response

Order ID or Support key 💳 (optional)

No response

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@oliviertassinari: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[oliviertassinari]

Linking the design exploration for the future: https://www.figma.com/design/rPwfaFijKseEDWpJYg46rA/Column-headers?node-id=0-1&node-type=CANVAS&t=iBsRSbPXWokxOnQo-0.

The result: https://deploy-preview-14293--material-ui-x.netlify.app/x/react-data-grid/column-groups/. Yeah OK, this feels better.

I'm not 100% convinced about the experience but it might be best to wait for user feedback here: it's unclear we can do better or even if it's worth allocating time.