Open joserodolfofreitas opened 2 years ago
Added a few more examples above!
And here's an exploration of ways to show this that allow for current features + upcoming ones:
All columns visible | Mixed visibility | All columns hidden | Extra spacing around groups |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
Thank you for reviewing this during our check in @joserodolfofreitas ! Here is the update with adjusted sizes for minimum touch target size (44px). The eye icon was previously 36px; now 48px.
Light | Dark | |
---|---|---|
all visible | ![]() |
![]() |
mixed visibility | ![]() |
![]() |
Thanks, @gerdadesign! Those are looking great!
One more question, would it make sense to enable users to pin columns here too? It's potentially an interesting use case that enables users to customize further their view of the data. However, the panel might get too cluttered. cc @m4theushw
@joserodolfofreitas that's an interesting point!
I think there's a larger question around the Columns menu vs the individual column menu when you click the More icon.
Theoretically, it seems this Columns menu allows you to manipulate many columns at one time vs the individual menu allowing you to manipulate multiple options of a single column at a time. I would assume that most people wouldn't pin many columns at a time — maybe 1-3 max, but definitely open to exploring adding pinning if we find it's important to have in this overview!
I've been pondering about this topic and since this panel intends to mirror the columns layout (with columns order, groups, visibility and etc) displayed on the grid, I believe it will feel natural that we support at least displaying the pinned columns on their respective positions on this panel as well. For implementation, it deserves its own issue, but I think we can use this as an umbrella for the concept.
Hey! Really great-great improvement here! 🔥
Looking forward to migrate to use this when v6 is out! 🥳 because I are also working on our own CustomToolbar which is a bit similarly. hope once this come out, we can reduce the complexity by migrate to your and just adjusting the style.
Hi, Regarding the addition of a "Reset state" button and the new column selector panel in general, do you have an estimated release date?
Hey @noamfeldman I've created this demo with a "Reset columns" button: https://codesandbox.io/s/bold-spence-48nzc8?file=/demo.tsx Is this what you are looking for?
Looks great. On the demo the column widths are fixed and cannot be changed, it will be great if the RESET COLUMNS will reset to the initiated columns width as well.
Thanks, Noam.
On Fri, Jun 30, 2023 at 9:29 PM Andrew Cherniavskii < @.***> wrote:
Hey @noamfeldman https://github.com/noamfeldman I've created this demo with a "Reset columns" button: https://codesandbox.io/s/bold-spence-48nzc8?file=/demo.tsx Is this what you are looking for?
— Reply to this email directly, view it on GitHub https://github.com/mui/mui-x/issues/5700#issuecomment-1615040054, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABHOSHRU2SMO4URRDY2E2ELXN4LIBANCNFSM55SCIO3Q . You are receiving this because you were mentioned.Message ID: @.***>
-- Information in this e-mail and its attachments is confidential and may be privileged. This e-mail is for the exclusive use of the intended recipient(s). If you are not one of the intended recipients, you are hereby informed that any use, disclosure, distribution, and/or copying of this information is strictly prohibited. If you have received this information in error, please inform the sender and then delete it from your system immediately. Thank you.
@noamfeldman Interesting, I think you can do this using state export to save the initial columns state, here's a demo: https://codesandbox.io/s/determined-snowflake-k3z7rq?file=/demo.tsx
I really like the proposed look & feel :+1:
One proposal: Did you think some column visibility preset selector could be added in this panel? Like this use case in the documentation but in the panel
Hey, love the updated designs and continued innovation. In all but one of the product examples provided, the interfaces are using checkboxes for the toggling on and off of columns or selecting data points. From a UX perspective does it makes more sense to stay with a recognised pattern?
Using a checkbox for toggling/selecting columns is a common and familiar pattern in UI design, particularly for managing visibility in tables or grids. If most products in your industry or domain use checkboxes for similar functionality, sticking with this convention can enhance usability. Users will already be familiar with how checkboxes work and will likely find it intuitive.
To confirm, I do think the eye icon is a clear enough indicator of visibility, just thought I'd share some thoughts.
Summary 💡
The current columns menu manages the visibility of individual columns.
Besides an opportunity to improve the overall look and feel of the panel, and a refactory to enable more customizations, As a central panel listing all the columns, we could empower users to handle many features like column ordering, grouping, or pinning.
This menu might also be the perfect place to establish the interface for pivoting.
This is an umbrella issue for the initial concept.
Design
Early proposal
Screenshots
Next iteration
We had another iteration on the columns management panel during Pivoting UI exploration: https://www.figma.com/file/tOAZwAT1ebcTH4tb4zv3Lo/Pivoting?type=design&node-id=1018-30840&mode=design&t=Q6uSdXTeJDFr77g5-0
While it focuses on column management in the sidebar (the sidebar will be a new type of panel on the right of the data grid), the same UI can be implemented in the current columns management panel (positioned top-left over the data grid).
Other features to consider
Feature development roadmap
Motivation 🔦
Examples 🌈
Datatables has an interesting approach to manage column visibility without any extra elements.
Ag grid hierarchical column management
Ag grid pivoting menu
Gmail shows draggability indicator on hover
Notion — draggability (& other actions) indicator and tooltop appears on hover
Essential Studio for React