[data grid] Is it possible to add an option to the column visibility panel?

[conerye]

Order ID 💳

331993142

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

The problem in depth 🔍

We would like to add a 'reset' option to the column visibility panel, so that they user can reset the visibility, order and dimensions of all columns in the table back to the initial state. Is it possible to add this option? I searched, but was not able to find anything about customizing the column visibility panel. ... and similarly, we would like a 'delete all' option in the filter definition panel, in order to delete all filters with a single click.

Your environment 🌎

`npx @mui/envinfo`

``` System: OS: Windows 10 10.0.19042 Binaries: Node: 16.15.0 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 106.0.5249.103 Edge: Spartan (44.19041.1266.0), Chromium (106.0.1370.42) npmPackages: @emotion/react: ^11.9.0 => 11.9.3 @emotion/styled: ^11.8.1 => 11.9.3 @mui/base: 5.0.0-alpha.87 @mui/icons-material: ^5.8.0 => 5.8.4 @mui/material: ^5.8.1 => 5.8.6 @mui/private-theming: 5.9.1 @mui/styled-engine: 5.8.7 @mui/system: ^5.9.1 => 5.9.1 @mui/types: 7.1.4 @mui/utils: 5.10.6 @mui/x-data-grid: ^5.13.1 => 5.14.0 @mui/x-data-grid-premium: ^5.14.0 => 5.14.0 @mui/x-data-grid-pro: 5.14.0 @mui/x-date-pickers: ^5.0.0-beta.1 => 5.0.0-beta.2 @mui/x-date-pickers-pro: ^5.0.0-beta.0 => 5.0.0-beta.2 @mui/x-license-pro: ^5.17.0 => 5.17.0 @types/react: 18.0.14 react: ^18.1.0 => 18.2.0 react-dom: ^18.1.0 => 18.2.0 typescript: 4.7.4 ```

[yaredtsy]

hi @conerye yes you can. but you must save the initial state first.

The current state of the grid can be exported using apiRef.current.exportState() It can then be restored by either passing the returned value to the initialState prop or to the apiRef.current.restoreState() method.

Demo: https://codesandbox.io/s/dazzling-cherry-tfwm0m?file=/demo.tsx:0-889

[conerye]

so, yes, I know about using exportState and restoreState. The question was: can an option be added to the column visibility panel for the functionality that we desire? I don't want to add have to add save and restore buttons... I am not able to post a snip of where I would like to add the option. but basically, in the pop-up that is displayed when you click COLUMNS https://mui.com/x/react-data-grid/column-visibility/ There is currently options for HIDE ALL and SHOW ALL We would like a RESET option there.

[m4theushw]

The only way to add another button to the column visibility panel is by providing a custom component to the components.ColumnsPanel.

<DataGrid components={{ ColumnsPanel: CustomColumnsPanel }} />

You can copy and paste from https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/components/panel/GridColumnsPanel.tsx and create your own.

[conerye]

we have decided not to do this ourselves. any chance this could be an enhancement request? to add a reset option to the column visibility panel and to add a delete all option to the filter panel?

[yaredtsy]

Hey @conerye it's actually really easy to customize it. check this demo https://codesandbox.io/s/dazzling-cherry-tfwm0m?file=/GridColumnsPanel.tsx

[yaredtsy]

i have also included a custom filter panel, which i am using. it really simple to customize componets

[conerye]

thank you for providing an example... still not sure we want to tackle incorporating that into our app at this time... it would be a bit of work to convert that to js and then incorporate it and test everything, but I will keep this in case we decide to do it in the future...