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`