mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.34k stars 1.3k forks source link

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

Open conerye opened 2 years ago

conerye commented 2 years ago

Order ID πŸ’³

331993142

Duplicates

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 1 year ago

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

yaredtsy commented 1 year ago

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

conerye commented 1 year ago

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