[EuiDataGrid] Update virtualizationOptions to respect onItemsRendered and className

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

@@ -106,4 +106,21 @@ ref={dataGridRef}`,
     </Link>
   ),
   onColumnResize: 'onColumnResize={({columnId, width}) => {}}',
+  virtualizationOptions: `// Optional. For advanced control of the underlying react-window virtualization grid.
+virtualizationOptions={{
+  className: 'virtualizedGridClass',
+  style: {},
+  direction: 'ltr',
+  estimatedRowHeight: 50,
+  overscanColumnCount: 1,
+  overscanRowCount: 1,
+  initialScrollLeft: 0,
+  initialScrollTop: 0,
+  onScroll: () => {},
+  onItemsRendered: () => {},
+  itemKey: () => {},
+  outerElementType: 'div',
+}}
+// Properties not listed above are used by EuiDataGrid internals and cannot be overridden.
+`,
 };

src/components/datagrid/body/data_grid_body.test.tsx

@@ -98,6 +98,22 @@ describe('EuiDataGridBody', () => {
     expect(component.find('[data-test-subj="footer"]')).toHaveLength(2);
   });
 
+  it('passes some virtualization options to the underlying react-window grid', () => {
+    const onItemsRendered = jest.fn();
+    const component = mount(
+      <EuiDataGridBody
+        {...requiredProps}
+        virtualizationOptions={{
+          initialScrollTop: 50,
+          className: 'test',
+          onItemsRendered,
+        }}
+      />
+    );
+    expect(component.find('.test').exists()).toBe(true);
+    expect(onItemsRendered).toHaveBeenCalled();
+  });
+
   // TODO: Test final height/weights in Cypress
 
   // TODO: Test tabbing in Cypress

src/components/datagrid/body/data_grid_body.tsx

@@ -455,13 +455,17 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
       <Grid
         {...(virtualizationOptions ? virtualizationOptions : {})}
         ref={gridRef}
+        className={classNames(
+          'euiDataGrid__virtualized',
+          virtualizationOptions?.className
+        )}
         onItemsRendered={(itemsRendered) => {
           gridItemsRendered.current = itemsRendered;
+          virtualizationOptions?.onItemsRendered?.(itemsRendered);
         }}
         innerElementType={InnerElement}
         outerRef={outerGridRef}
         innerRef={innerGridRef}
-        className="euiDataGrid__virtualized"
         columnCount={visibleColCount}
         width={finalWidth}
         columnWidth={getColumnWidth}

src/components/datagrid/data_grid_types.ts

@@ -305,7 +305,24 @@ export type CommonGridProps = CommonProps &
     /**
      * Allows customizing the underlying [react-window grid](https://react-window.vercel.app/#/api/VariableSizeGrid) props.
      */
-    virtualizationOptions?: Partial<VariableSizeGridProps>;
+    virtualizationOptions?: Partial<
+      Omit<
+        VariableSizeGridProps,
+        | 'children'
+        | 'itemData'
+        | 'height'
+        | 'width'
+        | 'rowCount'
+        | 'rowHeight'
+        | 'columnCount'
+        | 'columnWidth'
+        | 'ref'
+        | 'innerRef'
+        | 'outerRef'
+        | 'innerElementType'
+        | 'useIsScrolling'
+      >
+    >;
     /**
      * A #EuiDataGridRowHeightsOptions object that provides row heights options.
      * Allows configuring both default and specific heights of grid rows.
@@ -386,7 +403,7 @@ export interface EuiDataGridBodyProps {
   setVisibleColumns: EuiDataGridHeaderRowProps['setVisibleColumns'];
   switchColumnPos: EuiDataGridHeaderRowProps['switchColumnPos'];
   onColumnResize?: EuiDataGridOnColumnResizeHandler;
-  virtualizationOptions?: Partial<VariableSizeGridProps>;
+  virtualizationOptions?: EuiDataGridProps['virtualizationOptions'];
   rowHeightsOptions?: EuiDataGridRowHeightsOptions;
   isFullScreen: boolean;
   gridStyles: EuiDataGridStyle;

upcoming_changelogs/6019.md

@@ -0,0 +1 @@
+- `EuiDataGrid` now accepts a `virtualizationOptions.onItemsRendered` callback, as well as `virtualizationOptions.className`