diff --git a/packages/grid/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx index b144e2d8640f..8cb39c7b55b0 100644 --- a/packages/grid/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx @@ -171,4 +171,26 @@ describe(' - Lazy loader', () => { expect(apiRef.current.getRowNode(4)).to.not.equal(null); expect(apiRef.current.getRowNode(5)).to.not.equal(null); }); + + it('should update rows when `apiRef.current.updateRows` with data reversed', () => { + render(); + + const newRows: GridRowModel[] = [ + { + id: 3, + first: 'Jim', + }, + { + id: 2, + first: 'Jack', + }, + { + id: 1, + first: 'Mike', + }, + ]; + + act(() => apiRef.current.unstable_replaceRows(0, newRows)); + expect(getColumnValues(1)).to.deep.equal(['Jim', 'Jack', 'Mike']); + }); }); diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts index 2562e1c3d932..1c7d90c55463 100644 --- a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts +++ b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts @@ -410,6 +410,7 @@ export const useGridRows = ( const dataRowIdToIdLookup = { ...gridRowsDataRowIdToIdLookupSelector(apiRef) }; const rootGroup = tree[GRID_ROOT_GROUP_ID] as GridGroupNode; const rootGroupChildren = [...rootGroup.children]; + const seenIds = new Set(); for (let i = 0; i < newRows.length; i += 1) { const rowModel = newRows[i]; @@ -419,11 +420,13 @@ export const useGridRows = ( 'A row was provided without id when calling replaceRows().', ); - const [replacedRowId] = rootGroupChildren.splice(firstRowToRender + i, 1, rowId); + const [removedRowId] = rootGroupChildren.splice(firstRowToRender + i, 1, rowId); - delete dataRowIdToModelLookup[replacedRowId]; - delete dataRowIdToIdLookup[replacedRowId]; - delete tree[replacedRowId]; + if (!seenIds.has(removedRowId)) { + delete dataRowIdToModelLookup[removedRowId]; + delete dataRowIdToIdLookup[removedRowId]; + delete tree[removedRowId]; + } const rowTreeNodeConfig: GridLeafNode = { id: rowId, @@ -435,6 +438,8 @@ export const useGridRows = ( dataRowIdToModelLookup[rowId] = rowModel; dataRowIdToIdLookup[rowId] = rowId; tree[rowId] = rowTreeNodeConfig; + + seenIds.add(rowId); } tree[GRID_ROOT_GROUP_ID] = { ...rootGroup, children: rootGroupChildren };