[EuiDataGrid] Reduce layout shifts when auto-sizing overscan rows

src-docs/src/views/datagrid/_snippets.tsx

@@ -97,6 +97,7 @@ inMemory={{ level: 'sorting' }}`,
     4: 200, // row at index 4 will adjust the height to 200px
     6: 'auto', // row at index 6 will automatically adjust the height
   },
+  scrollAnchorRow: 'start', // compensate for layout shift when auto-sized rows are scrolled into view
 }}`,
   ref: `// Optional. For advanced control of internal data grid state, passes back an object of imperative API methods
 ref={dataGridRef}`,

src-docs/src/views/datagrid/advanced/datagrid_advanced_example.js

@@ -25,6 +25,8 @@ dataGridRef.current.openCellPopover({ rowIndex, colIndex });
 dataGridRef.current.closeCellPopover();
 `;
 
+import DataGridScrollAnchoring from './scroll_anchoring';
+
 export const DataGridAdvancedExample = {
   title: 'Data grid advanced',
   sections: [
@@ -79,6 +81,27 @@ export const DataGridAdvancedExample = {
                 open cell popover.
               </p>
             </li>
+            <li>
+              <p>
+                <EuiCode>
+                  scrollTo({'{ scrollLeft: number, scrollTop: number }'})
+                </EuiCode>{' '}
+                - scrolls the grid to the specified horizontal and vertical
+                pixel offsets.
+              </p>
+            </li>
+            <li>
+              <p>
+                <EuiCode>
+                  scrollToItem(
+                  {
+                    '{align: string = "auto", columnIndex?: number, rowIndex?: number }'
+                  }
+                  )
+                </EuiCode>{' '}
+                - scrolls the grid to the specified row and columns indices
+              </p>
+            </li>
           </ul>
 
           <EuiSpacer size="s" />
@@ -118,5 +141,26 @@ export const DataGridAdvancedExample = {
       props: { EuiDataGridRefProps },
     },
     ...DataGridMemoryExample.sections,
+    {
+      title: 'Scrolling and incremental loading',
+      text: (
+        <>
+          <p>
+            This example shows a grid that performs incremental loading when
+            either end is reached. It also attempts to minimize the visible
+            layout shift when newly rendered items are measured and sized for
+            the first time using the <EuiCode>scrollAnchorRow</EuiCode> row
+            height option.
+          </p>
+          <p>
+            Observe the layout shift compensation effect when scrolling up to
+            previously unviewed rows with and without the &quot;Use scroll
+            anchor&quot; toggle enabled.
+          </p>
+        </>
+      ),
+      components: { DataGridScrollAnchoring },
+      demo: <DataGridScrollAnchoring />,
+    },
   ],
 };