[data grid] Column re-ordering in column visibility panel

[joserodolfofreitas]

Summary 💡

The current menu manages just the visibility of individual columns and is quite basic

On this issue:

• Opportunity to improve UI / UX for the panel
• Add column reordering

Examples 🌈

Datatables has an interesting approach to manage column visibility without any extra elements.

Ag grid hierarchical column management

Motivation 🔦

• Improved UX
• Centralized way to 'build your view' of grid
• Improved column reordering experience on mobile
• Support Column group visibility in the future
• Support for column grouping with drag and drop in the future

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