[data grid] discrepant GridColumnVisibilityModel behavior on controlled grids when using "Show/Hide All" vs. Toggling all Columns individually via Checkbox

[antonrhein]

Steps to reproduce

Steps:

1. See the live example at https://stackblitz.com/edit/react-jkxsbibh?file=Demo.tsx
2. Open Console, if not open
3. Toggle the Column Visibility individually as well as via Show/Hide All (using the column panel)
4. Compare the console output:

{desk: true, commodity: true, traderName: true}

vs.

{desk: true, commodity: true}

Current behavior

Depending on whether I set all columns visible via individual Checkboxes or via "Show/Hide All" - Checkbox,
the visibility model reaches two different representations for the same fact: "All columns are visible".

I know that this issue relates to Expose a selector for the visible column model with visible columns explicitly marked as true #6037.

I took notice, of the mentioned shortcut (If a key in the model isn't set, that exists in the column definition, the respective column is treated as visible). In this case however, the mentioned shortcut is somehow violated, resulting in additional overhead to the necessary custom code

Expected behavior

If all columns are visible, regardless of the taken steps to achieve this fact, the respective GridColumnVisibilityModel has exactly one configuration:

Either: Regardless of any columns visible or not, all defined columns are present in the model, having a boolean value (true - is visible, false - isn't visible) (Preferred)

Or: Every column being visible doesn't exist in the state object. (Which is less preferred)

Context

I am persisting the column visibility (where isn't relevant). During development, I took notice, that when toggling the columns, the respective key is toggled as well but not deleted.

Implemented the logic for that. Noticed in production, that under some conditions ("Show/Hide All") the visibility model hasn't been persisted correctly. Huge bummer. Debugged the Data Grid and was left highly puzzled.

Now I have to write code, that checks the model for every key: If the key is set to true -> true. If the key isn't present -> true (very brave statement for a value not even being defined), Else false. In Real World Application, the grids tend to have around 10 to 15 columns. Iterating over the gridcoldef might be a good idea, however all of this seems like unnecessary boilerplate code.

Your environment

npx @mui/envinfo

  (Stackblitz 🙈)

Search keywords: datagrid, data grid, GridColumnVisibilityModel, column visibility, show all, columns

[michelengelen]

Hey @antonrhein ... the proposed solution makes sense and serves to provide a more consistent data structure. I have no insight on the reasoning behind the solution to have columns treated as visible when the key is not present in the model. It should not be too cumbersome to add all column fields to the model on initialization and keep track of it during the lifetime of the component.

I'll add this to the board for the team to discuss! Thanks! 🙇🏼