@@ -12,6 +12,7 @@ import {
   getColumnValues,
   getRows,
   getColumnHeaderCell,
+  raf,
 } from 'test/utils/helperFn';
 import {
   useGridApiRef,
@@ -653,6 +654,103 @@ describe('<DataGridPro /> - Rows', () => {
       });
     });
 
+    describe('controlled layout', () => {
+      const controlledLayout = { virtualizerLayoutMode: 'controlled' as const };
+
+      // Lets the browser fire the scroll event and the grid handle it, like a real scroll.
+      const scrollTo = (position: { top?: number; left?: number }) =>
+        act(async () => {
+          grid('virtualScroller')!.scrollTo(position);
+          await raf();
+        });
+
+      function expectViewportCovered() {
+        const { viewportInnerSize } = apiRef.current!.state.dimensions;
+        const viewportTop = grid('columnHeaders')!.getBoundingClientRect().bottom;
+        const viewportLeft = grid('virtualScroller')!.getBoundingClientRect().left;
+
+        const rows = $$('[role="row"][data-rowindex]');
+        const rowRects = rows.map((row) => row.getBoundingClientRect());
+        expect(Math.min(...rowRects.map((rect) => rect.top))).to.be.at.most(viewportTop + 0.5);
+        expect(Math.max(...rowRects.map((rect) => rect.bottom))).to.be.at.least(
+          viewportTop + viewportInnerSize.height - 0.5,
+        );
+
+        const cellRects = $$(rows[0], '[role="gridcell"]').map((cell) =>
+          cell.getBoundingClientRect(),
+        );
+        expect(Math.min(...cellRects.map((rect) => rect.left))).to.be.at.most(viewportLeft + 0.5);
+        expect(Math.max(...cellRects.map((rect) => rect.right))).to.be.at.least(
+          viewportLeft + viewportInnerSize.width - 0.5,
+        );
+      }
+
+      it('should render the rows in the viewport when scrolling up by less than a row', async () => {
+        const rowHeight = 50;
+        render(
+          <TestCaseVirtualization rowHeight={rowHeight} experimentalFeatures={controlledLayout} />,
+        );
+
+        // Start in the middle of a row, so the steps below reach the previous row before
+        // they add up to a full row height.
+        const initialTop = 20 * rowHeight + rowHeight / 2;
+        await scrollTo({ top: initialTop });
+        for (let top = initialTop - 10; top >= 18 * rowHeight; top -= 10) {
+          // eslint-disable-next-line no-await-in-loop
+          await scrollTo({ top });
+          expectViewportCovered();
+        }
+      });
+
+      it('should render the rows in the viewport when scrolling down past rows shorter than the average', async () => {
+        // Every 10th row is tall, so the other rows are shorter than the average row height
+        // and a scroll smaller than the average can bring several of them into view.
+        render(
+          <TestCaseVirtualization
+            getRowHeight={({ id }) => (Number(id) % 10 === 0 ? 300 : 25)}
+            experimentalFeatures={controlledLayout}
+          />,
+        );
+
+        for (let top = 0; top <= 600; top += 40) {
+          // eslint-disable-next-line no-await-in-loop
+          await scrollTo({ top });
+          expectViewportCovered();
+        }
+      });
+
+      it('should render the columns in the viewport when scrolling left by less than a column', async () => {
+        const columnWidth = 100;
+        render(<TestCaseVirtualization nbCols={20} experimentalFeatures={controlledLayout} />);
+
+        // Start in the middle of a column and step by less than the column threshold.
+        const initialLeft = 10 * columnWidth + columnWidth / 2;
+        await scrollTo({ left: initialLeft });
+        for (let left = initialLeft - 10; left >= 8 * columnWidth; left -= 10) {
+          // eslint-disable-next-line no-await-in-loop
+          await scrollTo({ left });
+          expectViewportCovered();
+        }
+      });
+
+      it('should render the columns in the viewport when scrolling right past columns narrower than the threshold', async () => {
+        const columns = Array.from({ length: 60 }, (_, index) => ({
+          field: `column${index}`,
+          width: 30,
+          minWidth: 30,
+        }));
+        render(
+          <TestCaseVirtualization columns={columns} experimentalFeatures={controlledLayout} />,
+        );
+
+        for (let left = 0; left <= 400; left += 10) {
+          // eslint-disable-next-line no-await-in-loop
+          await scrollTo({ left });
+          expectViewportCovered();
+        }
+      });
+    });
+
     it('should render new columns when scrolling past the threshold value', async () => {
       const columnWidth = 100;
       const columnThresholdPx = 1 * columnWidth;
 
@@ -440,7 +440,13 @@ function useVirtualization(store: Store<BaseState>, params: ParamsWithDefaults,
       // PERF: use the computed minimum column width instead of a static one
       const didCrossThreshold =
         rowScroll >= averageRowHeight(store, rowHeight) || columnScroll >= MINIMUM_COLUMN_WIDTH;
-      shouldUpdate = didCrossThreshold || didChangeDirection;
+      shouldUpdate =
+        didCrossThreshold ||
+        didChangeDirection ||
+        // The controlled layout renders no buffer, so a scroll below the threshold can
+        // already reach past the rendered rows or columns.
+        (layoutMode === 'controlled' &&
+          isLowOnRenderedBuffer(store, params, scrollPosition.current, scrollCache));
     }
 
     if (!shouldUpdate) {
@@ -1458,9 +1464,10 @@ function bufferForDirection(
 /**
  * Whether the viewport has consumed more than half of the rendered buffer on a side
  * that can still be extended.
- * Triggers the sticky-mode rendering logic for computing a new render context.
- * Consecutive updates are thereby spaced half a buffer apart instead of one
+ * In sticky mode, it spaces consecutive updates half a buffer apart instead of one
  * row apart, leaving the raster pipeline idle time to fill the buffers between them.
+ * In controlled mode, where the buffer is empty, it triggers as soon as the viewport
+ * reaches past the rendered rows or columns.
  * The visible bounds mirror the ones `computeRenderContext` searches with.
  */
 function isLowOnRenderedBuffer(
@@ -1495,7 +1502,11 @@ function isLowOnRenderedBuffer(
   const pinnedRightCount = params.pinnedColumns?.right.length ?? 0;
 
   const visibleLeft = Math.abs(scrollPosition.left) + dimensions.leftPinnedWidth;
-  const visibleRight = visibleLeft + dimensions.viewportInnerSize.width;
+  // In controlled mode, the pinned-right section overlays the horizontal window.
+  const visibleRight =
+    visibleLeft +
+    dimensions.viewportInnerSize.width -
+    (store.state.virtualization.layoutMode === 'controlled' ? dimensions.rightPinnedWidth : 0);
   const renderedLeft = columnPositions[context.firstColumnIndex] ?? 0;
   const renderedRight = columnPositions[context.lastColumnIndex] ?? dimensions.columnsTotalWidth;