[data grid] Upgrading from data-grid 7.27.1 to 7.27.2 breaks code using GridSortModel

[doberkofler]

Steps to reproduce

The following code snipped reports aTypeScript error error TS2339: Property 'push' does not exist on type 'GridSortModel' after upgrading from data-grid 7.27.1 to 7.27.2:

public sortInit(columns: columnsType): void {
	const sortModel: GridSortModel = [];
	columns.forEach((column) => {
		if (column.sorting) {
			sortModel.push({field: column.id, sort: column.sorting.order ? 'asc' : 'desc'});
		}
	});

	this.getGridApi().setSortModel(sortModel);
}

Current behavior

error TS2339: Property 'push' does not exist on type 'GridSortModel'

Expected behavior

No breaking change between patch revisions

Context

No response

Your environment

npx @mui/envinfo

System:
    OS: macOS 15.3.1
  Binaries:
    Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
    npm: 11.1.0 - ~/.nvm/versions/node/v22.14.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 133.0.6943.142
    Edge: Not Found
    Safari: 18.3
  npmPackages:
    @emotion/react: 11.14.0 => 11.14.0 
    @emotion/styled: 11.14.0 => 11.14.0 
    @mui/core-downloads-tracker:  6.4.6 
    @mui/icons-material: 6.4.6 => 6.4.6 
    @mui/material: 6.4.6 => 6.4.6 
    @mui/private-theming:  6.4.6 
    @mui/styled-engine:  6.4.6 
    @mui/system:  6.4.6 
    @mui/types:  7.2.21 
    @mui/utils:  6.4.6 
    @mui/x-data-grid:  7.27.2 
    @mui/x-data-grid-pro: 7.27.2 => 7.27.2 
    @mui/x-internals:  7.26.0 
    @mui/x-license:  7.26.0 
    @types/react: 19.0.10 => 19.0.10 
    react: 19.0.0 => 19.0.0 
    react-dom: 19.0.0 => 19.0.0 
    typescript: 5.7.3 => 5.7.3 

Search keywords: data-grid GridSortModel

[michelengelen]

Yes, this is because we changed the type for GridSortModel to a readonly array. The change can be viewed in this PR: #16731 ... readonly arrays do not have the push method anymore, so you would need to change your code a bit.

To prevent this you could just update that sortInit function to this (not tested):

const sortModel = data.columns.reduce<GridSortModel>((acc, column) => {
  if (column.type === 'string') {
    return [...acc, { field: column.id, sort: column.sorting.order ? 'asc' : 'desc' }];
  }
  return acc;
}, []);

Could you check if this works for you?

[alexfauquette]

This is related to #16731

- GridSortModel = GridSortItem[]
+ GridSortModel = readonly GridSortItem[]

I'm not in the grid team, so could not tell if it's a breaking change or not, but a quick workaround could be to replace GridSortModel by GridSortItem[]

[michelengelen]

That could work as well @alexfauquette ... However, this will break again when upgrading to v8, since we made GridSortItem internal: #16732

[doberkofler]

@michelengelen

Yes, this is because we changed the type for GridSortModel to a readonly array. The change can be viewed in this PR: #16731 ... readonly arrays do not have the push method anymore, so you would need to change your code a bit.

To prevent this you could just update that sortInit function to this (not tested):

const sortModel = data.columns.reduce((acc, column) => {
if (column.type === 'string') {
return [...acc, { field: column.id, sort: column.sorting.order ? 'asc' : 'desc' }];
}
return acc;
}, []);
Could you check if this works for you?

Thank you for your quick feedback!

Yes, the "workaround" seems to work although:

• I absolutely understand the need to fix errors but a patch version should not break existing code
• I used "workaround" because it it not obvious, why a would not be push columns to a local GridSortModel
• I still do not understand why the definition of GridSortModel must be readonly

[michelengelen]

Thank you for your quick feedback!

Yes, the "workaround" seems to work although:

• I absolutely understand the need to fix errors but a patch version should not break existing code

I agree that this should have been a minor. Although it's arguable at best if types are considered an integral part to justify that. 🤷🏼

• I used "workaround" because it it not obvious, why a would not be push columns to a local GridSortModel

its only obvious if you cast the type onto the variable.

• I still do not understand why the definition of GridSortModel must be readonly

GridSortModel is internally considered to be stable. We did this change to prevent accidental changes to it. That's basically why.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@doberkofler How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.