[data grid] Improved "Manage columns" panel

[joserodolfofreitas]

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

• Phase 1 - [DataGrid] New columns panel with support for column visibility #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 ([data grid] 508 compliance issue with GridToolbarColumnsButton in CustomToolbar()  #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

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

Essential Studio for React

[gerdadesign]

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]

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]

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]

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

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]

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]

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]

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]

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 <#5700 (comment)>, 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]

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

I really like the proposed look & feel 👍

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]

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.