mui
[data grid] Improved "Manage columns" panel
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
Notion — draggability (& other actions) indicator and tooltop appears on hover
Essential Studio for React
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 |  |
 |
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
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!