Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
joserodolfofreitas opened this issue Dec 20, 2022 · 4 comments · Fixed by #14293
Closed
Labels
component: data grid This is the name of the generic UI component, not the React module! design This is about UI or UX design, please involve a designer new feature New feature or request

Comments

@joserodolfofreitas
Copy link
Member

joserodolfofreitas commented Dec 20, 2022

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 #7067, we started exploring ways to make this difference clear, but there're also some challenges to validate and other solutions to explore.

Examples 🌈

image

Motivation 🔦

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

Design

@joserodolfofreitas joserodolfofreitas added component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request design: ux labels Dec 20, 2022
@joserodolfofreitas joserodolfofreitas changed the title [data grid] Use the column separators to display ability to resize columns [data grid] Improve column separators to display ability to resize columns Dec 20, 2022
@oliviertassinari
Copy link
Member

oliviertassinari commented May 30, 2023

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:

Screenshot 2023-05-30 at 13 29 47

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
Screenshot 2023-05-30 at 13 26 01

Notion
Screenshot 2023-05-30 at 13 23 53

Airtable
Screenshot 2023-05-30 at 13 24 15

Google Sheet
Screenshot 2023-05-30 at 13 28 33

@MBilalShafi
Copy link
Member

MBilalShafi commented Jun 1, 2023

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 #9162 could be a great improvement.

CC @gerdadesign

@oliviertassinari
Copy link
Member

oliviertassinari commented Jun 6, 2023

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:
Screen.Recording.2023-06-01.at.14.37.40.mov
  1. I think that a small visual notch could improve the affordance that there is a handle to drag:
Screenshot 2023-06-01 at 14 25 46

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.

  1. 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.

@oliviertassinari oliviertassinari added design This is about UI or UX design, please involve a designer and removed design: ux labels Aug 18, 2023
Copy link

github-actions bot commented Sep 3, 2024

⚠️ 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! design This is about UI or UX design, please involve a designer new feature New feature or request
Projects
Status: Done
3 participants