[data grid] Column Visibility - Reset Button Confuses Users

[bbosreferrals]

Summary

The reset button in the column selection pane confuses all users we've tested the function with. Everyone expects it to reset the columns back to the default ones. But it becomes disabled after you select columns and people are confused why it only works when you're actively selecting columns.

Here's short video showing the issue: https://vimeo.com/1043746747/2e32b38b79?share=copy

Does MUI have any advice or future functionality to address this?

Examples

https://mui.com/x/react-data-grid/column-visibility/#column-visibility-panel

Motivation

Allow our customers to easily revert back to our default columns.

Search keywords: Column Visibility, column Reset Button

[arminmeh]

@bbosreferrals thanks for the suggestion.
I agree that the label could be misleading. @KenanYusuf do you think "Undo" or "Revert" would be more suitable here?

@bbosreferrals to just change the default label, you can use Localization feature and override columnsManagementReset translation key

To change the button's behavior and/or to add more buttons, you will have to pass a custom component to the columnsPanel slot. You can see a customized panel in this demo

It is not perfect because you have to override the whole panel, but it will solve your problem. To make this experience better we are actually working on a new set of composable components. This will make it easier to make the customizations like yours. You can follow the linked PR to get the updates.

Hope that this helps.

[KenanYusuf]

I think "Undo" would be clearer.

It is confusing - it would make more sense to reset to the initial columns state IMO. Is there a reason we only reset the changes that were made whilst the columns panel is open? @mui/xgrid

[cherniavskii]

I agree it's confusing and the Reset button should behave the same regardless of whether the panel was closed before reset 👍🏻
Now, what's the initial column visibility state? For the uncontrolled model, it's initialState.columns.columnVisibilityModel.
How about the controlled model? Should we store the first controlled model value and use it on reset?

[KenanYusuf]

How about the controlled model? Should we store the first controlled model value and use it on reset?

I think so. From an end user perspective, the first controlled model is the initial state of column visibility.

[arminmeh]

I have tracked down the requirement for the button to #5700

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."

For me it looks like that this is aligned with the motivation from this issue, so we should update the button action to actually reset.

Now, since we already have the logic for "Undo", should we have both actions in the panel or that might be too much?

[cherniavskii]

Now, since we already have the logic for "Undo", should we have both actions in the panel or that might be too much?

No, I think the new Reset behavior should replace the old one, otherwise it would be confusing.

[arminmeh]

@bbosreferrals as a temporary workaround you can use my earlier suggestion.
Once this issue is closed, the button should work as you expect.