diff --git a/src-docs/src/views/datagrid/_snippets.tsx b/src-docs/src/views/datagrid/_snippets.tsx
index c6a56cf67ee..d377ee9f7f3 100644
--- a/src-docs/src/views/datagrid/_snippets.tsx
+++ b/src-docs/src/views/datagrid/_snippets.tsx
@@ -106,4 +106,21 @@ ref={dataGridRef}`,
),
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.
+`,
};
diff --git a/src/components/datagrid/body/data_grid_body.test.tsx b/src/components/datagrid/body/data_grid_body.test.tsx
index 687bc75a265..422162b9492 100644
--- a/src/components/datagrid/body/data_grid_body.test.tsx
+++ b/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(
+
+ );
+ expect(component.find('.test').exists()).toBe(true);
+ expect(onItemsRendered).toHaveBeenCalled();
+ });
+
// TODO: Test final height/weights in Cypress
// TODO: Test tabbing in Cypress
diff --git a/src/components/datagrid/body/data_grid_body.tsx b/src/components/datagrid/body/data_grid_body.tsx
index 79ed68689c2..cefbeb804e9 100644
--- a/src/components/datagrid/body/data_grid_body.tsx
+++ b/src/components/datagrid/body/data_grid_body.tsx
@@ -455,13 +455,17 @@ export const EuiDataGridBody: FunctionComponent = (
{
gridItemsRendered.current = itemsRendered;
+ virtualizationOptions?.onItemsRendered?.(itemsRendered);
}}
innerElementType={InnerElement}
outerRef={outerGridRef}
innerRef={innerGridRef}
- className="euiDataGrid__virtualized"
columnCount={visibleColCount}
width={finalWidth}
columnWidth={getColumnWidth}
diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts
index 79ecf615a8f..e07d17fac40 100644
--- a/src/components/datagrid/data_grid_types.ts
+++ b/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;
+ 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;
+ virtualizationOptions?: EuiDataGridProps['virtualizationOptions'];
rowHeightsOptions?: EuiDataGridRowHeightsOptions;
isFullScreen: boolean;
gridStyles: EuiDataGridStyle;
diff --git a/upcoming_changelogs/6019.md b/upcoming_changelogs/6019.md
new file mode 100644
index 00000000000..f785fcea8b1
--- /dev/null
+++ b/upcoming_changelogs/6019.md
@@ -0,0 +1 @@
+- `EuiDataGrid` now accepts a `virtualizationOptions.onItemsRendered` callback, as well as `virtualizationOptions.className`