[data grid] Asynchronous configuration of specific props seem to trigger onSortModelChange callback

[traverse]

Order ID 💳

2208761

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

So we're trying to integrate the DataGridPro with our backend and we're noticing some strange behavior. It might be intended I'm not sure. We fetch some settings from our backend and then fetch the data based on those settings. The settings only have some config like the width of a column, if a column is pinned, sorting things like that. The data actually contains which columns are all available.

So what we're trying to do is the following:

1. Fetch settings and set up sortModel, pinnedColumns props.
2. Fetch the data to display.
3. Combine the columns settings with the available columns returned from step 2 to create the columns prop.

So what we're experiencing is that because we're first setting up the sortModel and pinnedColumns that it's somehow triggering the onSortModelChange callback with an empty array. If we change the order slightly so pinnedColumns updates before sortModel or after columns it doesn't trigger the callback.

In the following sandbox you can see the issue:

https://codesandbox.io/s/confident-rumple-ft7s9t?file=/demo.tsx

If you play around with the timeout in the useEffect that sets the pinned columns you should be able to see the issue.

Maybe it isn't intended to be implemented like this or it might be a bug I'm not sure. We were at least scratching our heads here as to why the sorting was disappearing every time 😅.

Your environment 🌎

No response

[m4theushw]

The DataGrid has a built-in logic that filters out from sortModel those columns that are not in the columns prop.

mui-x/packages/grid/x-data-grid/src/hooks/features/sorting/useGridSorting.ts

Lines 326 to 332 in 89c3137

	const handleColumnsChange = React.useCallback<GridEventListener<'columnsChange'>>(() => {
	// When the columns change we check that the sorted columns are still part of the dataset
	const sortModel = gridSortModelSelector(apiRef);
	const latestColumns = gridColumnLookupSelector(apiRef);
	if (sortModel.length > 0) {
	const newModel = sortModel.filter((sortItem) => latestColumns[sortItem.field]);

The onSortModelChange callback is being called because when you pass sortModel you don't have passed yet the columns it refers to.

You could solve this bug by only rendering the DataGrid after the columns have been loaded. Is it possible?

[traverse]

@m4theushw That's something we actually considered doing. It looked a bit less nice than just leaving the grid in a loading state but it's possible. For me the biggest "issue" is that it feels a bit random depending on the order the props are received. E.g. if we delay creating the sortModel by a couple hundred milliseconds till after the pinnedColumns it works just fine.

[traverse]

I've thought about it and maybe a better question is, what is the expected behavior for the onSortModelChange callback? Should it only trigger when user interaction changes the sortModel? Should it trigger anytime the sortModel changes for any reason? For me that part is currently unclear. Another thing is that because of the way onSortModelChange behaves I'm not sure if any of the other callbacks will have similar issues.

[traverse]

Just saw #9239 and #9204 and had hoped my issue might've been fixed because of it as well. Sadly it didn't fix it. It does feel like that issue is very similar to what I am experiencing. Even the provided explanation as to why it happens is very similar.

[romgrk]

Ping @MBilalShafi, can you take this one?

[MBilalShafi]

Sure @romgrk, I'll have a look.