MUI X Data Grid Pro v4. Column visibility event is not fired when Show All/Hide All are clicked

Question

The callback provided by @mui/x-data-grid-pro for tracking visible columns as far as I can tell is below:

onColumnVisibilityChange={(params, event, details) =>
  console.log(params, event, details.api.getVisibleColumns())
}

This fires OK when individual columns are toggled however this event doesn't fire on show/hide all button click.

Is there a known workaround for this?

Answer 1

The problem is that the onColumnVisibilityChange callback provides the information only for a single visibility change and is not triggered by bulk visibility changes of show/hide all columns. Since @mui/x-data-grid-pro v5.3.0, the grid provides additional callback onColumnVisibilityModelChange:

onColumnVisibilityModelChange={(params: GridColumnVisibilityModel,  event: MuiEvent<{}>, details: GridCallbackDetails) => {
    console.log(params)
}}

The params object contains information about visibility of all columns in the table as key-value pairs (columnName: boolean). The onColumnVisibilityModelChange callback is triggered by both single column and bulk visibility changes. Together with the columnVisibilityModel datagrid prop, the callback allows you to control the visibility of the grid's columns:

<DataGrid
    columnVisibilityModel={columnVisibilityModel}
    onColumnVisibilityModelChange={newModel => setColumnVisibilityModel(newModel)}
/>