feat: expose onVirtualScroll on VirtualTable

src/VirtualTable/BodyGrid.tsx

@@ -58,6 +58,7 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
     listItemHeight,
     getComponent,
     onScroll: onTablePropScroll,
+    onVirtualScroll: onTablePropVirtualScroll,
   } = useContext(StaticContext);
 
   // =========================== Ref ============================
@@ -276,11 +277,12 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
         component={wrapperComponent}
         scrollWidth={scrollX as number}
         direction={direction}
-        onVirtualScroll={({ x }) => {
+        onVirtualScroll={({ x, y }) => {
           onScroll({
             currentTarget: listRef.current?.nativeElement,
             scrollLeft: x,
           });
+          onTablePropVirtualScroll?.({ x, y });
         }}
         onScroll={onTablePropScroll}
         extraRender={extraRender}

src/VirtualTable/context.ts

@@ -1,12 +1,13 @@
 import { createContext } from '@rc-component/context';
-import type { GetComponent, TableSticky } from '../interface';
+import type { GetComponent, OnVirtualScroll, TableSticky } from '../interface';
 
 export interface StaticContextProps {
   scrollY: number;
   listItemHeight: number;
   sticky: boolean | TableSticky;
   getComponent: GetComponent;
   onScroll?: React.UIEventHandler<HTMLDivElement>;
+  onVirtualScroll?: OnVirtualScroll;
 }
 
 export const StaticContext = createContext<StaticContextProps>(null);

src/VirtualTable/index.tsx

@@ -3,7 +3,7 @@ import { get as getValue, useEvent, warning } from '@rc-component/util';
 import * as React from 'react';
 import { INTERNAL_HOOKS } from '../constant';
 import { makeImmutable } from '../context/TableContext';
-import type { CustomizeScrollBody, GetComponent, Reference } from '../interface';
+import type { CustomizeScrollBody, GetComponent, OnVirtualScroll, Reference } from '../interface';
 import Table, { DEFAULT_PREFIX, type CompareProps, type TableProps } from '../Table';
 import Grid from './BodyGrid';
 import { StaticContext } from './context';
@@ -16,6 +16,12 @@ const renderBody: CustomizeScrollBody<any> = (rawData, props) => {
 export interface VirtualTableProps<RecordType> extends Omit<TableProps<RecordType>, 'scroll'> {
   listItemHeight?: number;
   scroll: { x?: number; y?: number };
+  /**
+   * Triggered when virtual list offset changes.
+   * Prefer this over native `onScroll` when you need the virtual horizontal offset `x`
+   * (virtual list may use margin/transform instead of DOM `scrollLeft`).
+   */
+  onVirtualScroll?: OnVirtualScroll;
 }
 
 const VirtualTable = <RecordType,>(
@@ -32,6 +38,7 @@ const VirtualTable = <RecordType,>(
     listItemHeight,
     components,
     onScroll,
+    onVirtualScroll,
   } = props;
 
   let { x: scrollX, y: scrollY } = scroll || {};
@@ -60,11 +67,19 @@ const VirtualTable = <RecordType,>(
 
   // Memo this
   const onInternalScroll = useEvent(onScroll);
+  const onInternalVirtualScroll = useEvent(onVirtualScroll);
 
   // ========================= Context ==========================
   const context = React.useMemo(
-    () => ({ sticky, scrollY, listItemHeight, getComponent, onScroll: onInternalScroll }),
-    [sticky, scrollY, listItemHeight, getComponent, onInternalScroll],
+    () => ({
+      sticky,
+      scrollY,
+      listItemHeight,
+      getComponent,
+      onScroll: onInternalScroll,
+      onVirtualScroll: onInternalVirtualScroll,
+    }),
+    [sticky, scrollY, listItemHeight, getComponent, onInternalScroll, onInternalVirtualScroll],
   );
 
   // ========================== Render ==========================
@@ -89,7 +104,7 @@ const VirtualTable = <RecordType,>(
 };
 
 export type ForwardGenericVirtualTable = (<RecordType>(
-  props: TableProps<RecordType> & React.RefAttributes<Reference>,
+  props: VirtualTableProps<RecordType> & React.RefAttributes<Reference>,
 ) => React.ReactElement<any>) & { displayName?: string };
 
 const RefVirtualTable = React.forwardRef(VirtualTable) as ForwardGenericVirtualTable;

src/index.ts

@@ -9,6 +9,7 @@ import type {
   FixedType,
   GetComponentProps,
   GetRowKey,
+  OnVirtualScroll,
   Reference,
   RenderedCell,
 } from './interface';
@@ -43,6 +44,7 @@ export {
   type FixedType,
   type GetComponentProps,
   type GetRowKey,
+  type OnVirtualScroll,
   type RenderedCell,
 };
 

src/interface.ts

@@ -168,6 +168,9 @@ export type OnCustomizeScroll = (info: {
   scrollLeft?: number;
 }) => void;
 
+/** Virtual list scroll offset from `@rc-component/virtual-list` */
+export type OnVirtualScroll = (info: { x: number; y: number }) => void;
+
 export type CustomizeScrollBody<RecordType> = (
   data: readonly RecordType[],
   info: {

tests/Virtual.spec.tsx

@@ -709,6 +709,26 @@ describe('Table.Virtual', () => {
     expect(onScroll).toHaveBeenCalled();
   });
 
+  it('onVirtualScroll event should work', async () => {
+    const onVirtualScroll = vi.fn();
+    const { container } = getTable({ onVirtualScroll });
+
+    await waitFakeTimer();
+
+    resize(container.querySelector('.rc-table')!);
+
+    fireEvent.wheel(container.querySelector('.rc-table-tbody-virtual-holder')!, {
+      deltaX: 10,
+    });
+
+    expect(onVirtualScroll).toHaveBeenCalled();
+    expect(
+      onVirtualScroll.mock.calls.some(
+        ([info]) => typeof info.x === 'number' && info.x > 0 && typeof info.y === 'number',
+      ),
+    ).toBe(true);
+  });
+
   it('scrollable when empty', async () => {
     const onScroll = vi.fn();
     const { container } = getTable({ data: [], onScroll });