[question][data grid] Sharing part of state across different datagrids

[QuietContributor88]

The problem in depth

Hello Support Team

In our application, we have implemented a pretty big data grid with a lot of columns. We then used the approach proposed in your documentation to provide to the users a way of presenting the data they want.
https://next.mui.com/x/react-data-grid/state/#save-and-restore-the-state-from-external-storage

Since we have let's say 30 data columns this is pretty usefull as users can save different views depending on what they are looking for.

Now, since then, we have implemented differents datagrids elsewhere in our application. Sometimes we use a TreeData, sometimes we use an extra selection Checkbox column, sometimes we use different custom action buttons, etc. But all those other datagrids also use most or all of the same 30 data columns.

If a user stores a custom view (exportState of datagrid1) of let's say only 3 main columns, we cannot reuse the view on another datagrid (restoreState on datagrid2). Since the store is a pretty complex structure, I think it's normal that the datagrid2 is confused because columns aren't exactly the same.

So we were wondering if there is a way that we could allow a user to share part (or most) of the display (state?) from one datagrid to another. Let's say the user wants to display only 3 columns. Would be nice if we could apply this to another datagrid and that it would display them if the datagrid knows them and ignore them if the datagrid doesn't know them.

thank you,

Best regards.
jf.

Your environment

`npx @mui/envinfo`

System:
OS: Windows 11 10.0.26100
Binaries:
Node: 22.14.0 - C:\Program Files\nodejs\node.EXE
npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: 144.0.7559.97
Edge: Chromium (142.0.3595.90)
Firefox: Not Found
npmPackages:
@emotion/react: 11.14.0 => 11.14.0
@emotion/styled: 11.14.0 => 11.14.0
@mui/base: 5.0.0-beta.19 => 5.0.0-beta.19
@mui/core-downloads-tracker: 5.17.1
@mui/icons-material: 5.14.1 => 5.14.1
@mui/lab: 5.0.0-alpha.134 => 5.0.0-alpha.134
@mui/material: 5.15.14 => 5.15.14
@mui/private-theming: 5.17.1
@mui/styled-engine: 5.16.14
@mui/system: 5.15.14 => 5.15.14
@mui/types: 7.4.0
@mui/utils: 5.17.1
@mui/x-data-grid: 7.28.3
@mui/x-data-grid-pro: 7.28.3 => 7.28.3
@mui/x-date-pickers: 7.0.0 => 7.0.0
@mui/x-internals: 7.28.0
@mui/x-license: 7.0.0 => 7.0.0
@types/react: 18.3.18 => 18.3.18
react: 18.3.1 => 18.3.1
react-dom: 18.3.1 => 18.3.1
styled-components: 5.3.11 => 5.3.11
typescript: 5.7.3 => 5.7.3

Search keywords: state apiref exportState restoreState

Order ID: 114582

[MBilalShafi]

@QuietContributor88 As explained in the sub-section of the https://mui.com/x/react-data-grid/state/#restore-the-state-with-apiref (Restore part of the state), you could surely save and restore the state across the Grid if the part of the state being restored is compatible with both the Grids.

Are you facing some specific issues in porting a portion of the state? I'd love to see a minimal reproduction example to try and explore a possible workaround.

[QuietContributor88]

When I call resoreState on my second datagrid it's mixing columns from both datagrids. I tried to reproduce starting with the demo you mentioned but it always work so it's probably something in my application. I'm still trying to understand what is the issue.

[MBilalShafi]

Could you create a minimal reproduction in StackBlitz and post it here? It'll help diagnose the issue better.

[QuietContributor88]

Yes I'm trying to reproduce on StackBlitz with a minimal example but I was not able yet. Problem seems to be in my datagrid wrapper that is getting pretty complex. I don't want to post all my code in StackBlitz because I don't think you want to debug my code ;)

I'll keep you posted the minute I'm able to reproduce with a simple eample.