[data grid] Improved "Manage columns" panel

joserodolfofreitas commented 2 years ago

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

Add a "Reset state" button. From customer feedback: "The ability to reset the table columns view to its initial state would be very useful. This would allow users to revert the columns to their default state after users have made changes using the column selector."

Feature development roadmap

[x] Phase 1 - #8754
[ ] Phase 2 - Support pivoting
[ ] Phase 3 - Reflect and support for column reordering
[ ] Phase 4 - Reflect and support for column groups
[ ] Phase 5 - Reflect and support for column pinning
[ ] Phase 6 - Support submenus for touch devices

Motivation 🔦

Improved Look and feel
A centralized way to 'build your custom view' as an end-user of the Data Grid
Improved column management experience on mobile
Better accessibility (https://github.com/mui/mui-x/issues/9245)
Possibly the ideal place for pivoting.

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

Screen Shot 2022-08-10 at 4 29 1

Notion — draggability (& other actions) indicator and tooltop appears on hover

Screen Shot 2022-08-10 at 5 46 1

Essential Studio for React

Screen Shot 2022-08-24 at 3 30 1 (1)

gerdadesign commented 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

gerdadesign commented 1 year ago

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

NOTES

turning off visibility for a group turns off visibilty for children
when all items are visible, button at the bottom shows “HIDE ALL” option
when all items are hidden, button at the bottom shows “SHOW ALL” option
when mixed visibilty, both bottom buttons are shown

Figma link for reference

joserodolfofreitas commented 1 year ago

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

gerdadesign commented 1 year ago

@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!

joserodolfofreitas commented 1 year ago

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.

heyfirst commented 1 year ago

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.

noamfeldman commented 1 year ago

Hi, Regarding the addition of a "Reset state" button and the new column selector panel in general, do you have an estimated release date?

cherniavskii commented 1 year ago

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?

noamfeldman commented 1 year ago

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.

cherniavskii commented 1 year ago

@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

armandabric commented 5 months ago

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

uixrob commented 4 months ago

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.

mui / mui-x