[DataGrid] Add methods to import and export the state

[flaviendelangle]

Closes #820

https://deploy-preview-3593--material-ui-x.netlify.app/components/data-grid/state/#save-and-restore-the-state

Public API

// Export all the exportable state
const state = apiRef.current.exportState();

// Import all the exportable state
apiRef.current.restoreState(state);

// Or import some parts of the exportable state
apiRef.current.restoreState({ pinning: state.pinning });

// Or pass the exportable state to the `prop.initialState`
<DataGrid initialState={state} />

Internals

Each hook with an initial state must also register two pre-processors:

• exportState which takes a GridInitialState and add the initial state from this hook to it

  const stateExportPreProcessing = React.useCallback<
    GridPreProcessor<GridPreProcessingGroup.exportState>
  >(
    (prevState) => {
      return {
        ...prevState,
        pagination: {
          ...prevState.pagination,
          pageSize: gridPageSizeSelector(apiRef.current.state),
        },
      };
    },
    [apiRef],
  );

• restoreState which takes the GridInitialState to restore and updates the state accordingly.

  const stateRestorePreProcessing = React.useCallback<
    GridPreProcessor<GridPreProcessingGroup.restoreState>
  >(
    (params, context) => {
      const pageSize = context.stateToRestore.pagination?.pageSize;
      if (pageSize != null) {
        apiRef.current.setState(setStatePageSize(pageSize));
      }
      return params;
    },
    [apiRef],
  );

This method can also return a callback that will be ran after all the initial states are restored. This can be usefull to apply the sorting / filtering for instance.

I don't use directly setFilterModel, setPageSize, etc... to avoid multiple forceUpdates which causes a lot of re-renders.

[mui-bot]

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	1,098.7	1,921.2	1,193.3	1,399.42	334.703
Sort 100k rows	ms	699.1	1,068.1	699.1	892.68	161.588
Select 100k rows	ms	157.1	218.3	175.7	182.84	24.645
Deselect 100k rows	ms	96	213.1	161	148.78	38.385

Generated by 🚫 dangerJS against 02e7534

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[tielushko]

I support the @benjimac93 notion of having the order of columns saved as the part of initial state as well as the width of the individual column. It would be a very useful feature for our end users.

[benjimac93]

Is there a plan to add support for the column orders in a subsequent release? For us, this would be one of the most important parts of state to save/restore

No, we did not start working on it. And as it is independent in our code from the save/restore process itself, we have interest in splitting the work to release a first version of the save/restore as soon as possible to have feedbacks.

Understood it's not in scope for the initial release of this feature. Is there a rough timeline for when it will be in scope in a future release though? Trying to decide if we use MUI Pro or Premium for our product rebuild or if we need to explore other options

[flaviendelangle]

@benjimac93 we could probably try to release this feature by the end of Q1 as it is not a major peace of work.
But can't guarantee anything.

[benjimac93]

@benjimac93 we could probably try to release this feature by the end of Q1 as it is not a major peace of work. But can't guarantee anything.

I can work with that. Component is awesome as an aside !

[m4theushw]

#3593 (comment)

Will this be done in this PR?

[m4theushw]

Something is odd with this demo. Having the text input inside the list doesn't look very good. What about putting the input outside the menu, like in a toolbar?

Because of the way this variant works it appears misaligned when not fucused.

[flaviendelangle]

I did not finalize this demo, as I wanted feedbacks about the global idea before spending to much times on the details.
But I agree that it is not 100% clean right now 👍

[flaviendelangle]

Will this be done in this PR?

Yes I think it's better to do it, I will add it today or tomorrow

[flaviendelangle]

@m4theushw I added the default value stripping
And modified the pinned columns state init to handle the control model synchronously and storing the initial model given by the user as provided in state.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[m4theushw]

The demo still requires some work, but I'm approving for the API which is good.

Looking at the feedback received, what users are really asking is to restore the order of the columns. What about keeping the docs commented (demos included) until we add support for this part?

[flaviendelangle]

@m4theushw I can merge this one without the doc visible and start working on the columns size and order yes.

[gminova]

@flaviendelangle Great work and so happy this is merged now! I was wondering why is the scrollPosition not part of the state? and is there a way to set an initialScrollPosition prop for the grid just like there is an initialState prop?

[flaviendelangle]

The scroll position is not on our internal state at all because it is too volatile.
Each state update is supposed to cause a re-render and we don't want to re-render on scroll.

What is your use-case exactly ? Would you like to scroll to a position in pixel or to a given row on mount ?