m4theushw
commented
1 year ago The "Memoized with state as dependency" example is the correct way to provide the value for the checkbox. It doesn't work as expected because in this example the rows prop is changing every time that groupsSelected changes. If you memoize the rows, the state of the groups is kept upon changing the checkbox. See https://stackblitz.com/edit/react-ts-9erqfu?file=App.tsx,CheckboxWithGrid.tsx
Brocktho
Order ID or Support key š³ (optional)
62604
Duplicates
Latest version
The problem in depth š
Problem: I have a form that I wanted to use the material grid because of it's powerful grouping ability, it would really help condense all the information and make an intuitive ui for a complex system. The main issue is due to the grouping of the form there is some amount of state management required, since when a user closes a group react can't "remember" what the value was underneath that's been edited.
Attempts to solve: I've seen Editable cells but they feel really clunky for my exact use case (double click to then click it on or off and I still had troubles getting the state to update properly). There is also the useGridApi and useGridContext, which you need to use in tandem with editable cells. Even with this approach I could get the state to update save and be remembered but the user has to double click the renderCell item then the editRenderCell actually lets them update it.
Could not get it to work on stackblitz at all because for some reason the gridPremium ref doesnt have the gridBaseRef's same options. But you can at least see the idea of what's happening.
Minimal Reproduction on Stackblitz
Desired Behavior: It would be nice if the gridRef.setEditCellValue worked inside or outside of edit mode. This would let me forgo the global state and just rely on the gridRef to manipulate and save all the data. Currently my solution is to pop out modals on the grouped items and have them edit it separately in that window that way state changes don't collapse things and cause major grief.
Any feedback or extra ideas would be appreciated. I feel like I have an understanding of the difficulty of this specific desire (react sees state that renderCell is dependent on has changed, must re-render whole thing), It's also so close to solvable with the current system, just if gridRef.setEditCellValue worked outside of edit mode as well.
Your environment š
`npx @mui/envinfo`
Tested on Firefox, Chrome, Safari. (I don't believe it's browser specific but instead a react issue.) ``` System: OS: macOS 12.6 Binaries: Node: 16.17.1 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 8.15.0 - /usr/local/bin/npm Browsers: Chrome: 113.0.5672.92 Edge: Not Found Firefox: Not Found Safari: 15.6.1 npmPackages: @emotion/react: ^11.10.6 => 11.10.6 @emotion/styled: ^11.10.6 => 11.10.6 @mui/base: 5.0.0-alpha.128 @mui/core-downloads-tracker: 5.12.3 @mui/icons-material: ^5.11.0 => 5.11.16 @mui/material: ^5.12.3 => 5.12.3 @mui/private-theming: 5.12.3 @mui/styled-engine: 5.12.3 @mui/system: 5.12.3 @mui/types: 7.2.4 @mui/utils: 5.12.3 @mui/x-data-grid: ^6.0.0 => 6.2.1 @mui/x-data-grid-premium: ^6.0.2 => 6.2.1 @mui/x-data-grid-pro: 6.2.1 @mui/x-date-pickers: ^6.0.1 => 6.2.1 @mui/x-date-pickers-pro: ^6.0.3 => 6.2.1 @mui/x-license-pro: 6.0.4 @types/react: ^18.0.37 => 18.0.37 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.0.4 => 5.0.4 ```