[data grid] Improve column separators to display ability to resize columns

[joserodolfofreitas]

Summary 💡

The column headers separators present no distinguishable difference between columns that can be resized and columns that don't. This is a follow-up on #1623.

On https://github.com/mui/mui-x/pull/7067, we started exploring ways to make this difference clear, but there're also some challenges to validate and other solutions to explore.

Examples 🌈

Motivation 🔦

• Discoverability and identification of resizable columns (Better UX).

Design

• Figma Process
• Prototype

[oliviertassinari]

The proposed design makes sense to me 👍.

In this example, I feel like I would be able to resize each column but I'm not. It feels like the proposed design of Gerda would solve the problem:

https://mui.com/x/react-data-grid/#mit-version

---

Minor. I think that it could be interesting to see what's the UI for when the mouse down is pressed. I wonder if it's not a bit off today: 1. is the resize handle tall enough, it can be hidden behind the cursor. 2. is the color contrasting enough. This a quick benchmark, not sure. None feels like they make a major difference.

MUI X

Notion

Airtable

Google Sheet

[MBilalShafi]

I tried to validate the idea, here's a codesandbox with comparisons between different features: https://codesandbox.io/s/purple-shadow-c8l2xk?file=/demo.tsx

is the resize handle tall enough

I've made it a bit taller to test if it resolves the concerns. What do you think? (Notion variant is nice too, not sure if it fits well in our layout)

I really liked the new implementation, especially the variant with header filters and how it defines the boundaries of each cell.

Regarding column groups, I think this one combined with the idea shown in https://github.com/mui/mui-x/issues/9162 could be a great improvement.

CC @gerdadesign

[oliviertassinari]

here's a codesandbox with comparisons between different features […] CC @gerdadesign

@MBilalShafi Great, thanks for looking into it! A few design execution feedback:

1. I think that the handle should stay active when moving the cursor out of the header:

https://github.com/mui/mui-x/assets/3165635/0dae23f5-b053-435d-b92b-e7a05253e605

2. I think that a small visual notch could improve the affordance that there is a handle to drag:

But I don't see how we can pull it off without forcing a background color on the whole data grid. I'm not sure this potential UX win is worth the DX customization pain.

3. Maybe it would make sense to make the drag handle blue (to look different) when it's active, and only dark when hovered. I'm saying maybe because I think it requires experimenting with it to be sure. I haven't seen other to benchmark against.

[github-actions[bot]]

:warning: 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.

@joserodolfofreitas: 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.