diff --git a/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts b/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts index d6762135a688c..3b3504c304fcd 100644 --- a/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts +++ b/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts @@ -431,16 +431,30 @@ export function getFirstNonSpannedColumnToRender({ visibleRows: GridRowEntry[]; }) { let firstNonSpannedColumnToRender = firstColumnToRender; - for (let i = firstRowToRender; i < lastRowToRender; i += 1) { - const row = visibleRows[i]; - if (row) { - const rowId = visibleRows[i].id; - const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo( - rowId, - firstColumnToRender, - ); - if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan) { - firstNonSpannedColumnToRender = cellColSpanInfo.leftVisibleCellIndex; + let foundStableColumn = false; + + // Keep checking columns until we find one that's not spanned in any visible row + while (!foundStableColumn && firstNonSpannedColumnToRender >= 0) { + foundStableColumn = true; + + for (let i = firstRowToRender; i < lastRowToRender; i += 1) { + const row = visibleRows[i]; + if (row) { + const rowId = visibleRows[i].id; + const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo( + rowId, + firstNonSpannedColumnToRender, + ); + + if ( + cellColSpanInfo && + cellColSpanInfo.spannedByColSpan && + cellColSpanInfo.leftVisibleCellIndex < firstNonSpannedColumnToRender + ) { + firstNonSpannedColumnToRender = cellColSpanInfo.leftVisibleCellIndex; + foundStableColumn = false; + break; // Check the new column index against the visible rows, because it might be spanned + } } } }