feat: Table support onScroll event (#1089)

* feat: support onScroll

* test: add test case

* test: fix vitest cov

Author: zombieJ

src/Table.tsx

@@ -121,6 +121,9 @@ export interface TableProps<RecordType = unknown>
 
   sticky?: boolean | TableSticky;
 
+  // Events
+  onScroll?: React.UIEventHandler<HTMLDivElement>;
+
   // =================================== Internal ===================================
   /**
    * @private Internal usage, may remove by refactor. Should always use `columns` instead.
@@ -204,6 +207,9 @@ function Table<RecordType extends DefaultRecordType>(
     onRow,
     onHeaderRow,
 
+    // Events
+    onScroll,
+
     // Internal
     internalHooks,
     transformColumns,
@@ -426,7 +432,7 @@ function Table<RecordType extends DefaultRecordType>(
     }
   }
 
-  const onScroll = useEvent(
+  const onInternalScroll = useEvent(
     ({ currentTarget, scrollLeft }: { currentTarget: HTMLElement; scrollLeft?: number }) => {
       const isRTL = direction === 'rtl';
       const mergedScrollLeft =
@@ -462,9 +468,14 @@ function Table<RecordType extends DefaultRecordType>(
     },
   );
 
+  const onBodyScroll = useEvent((e: React.UIEvent<HTMLDivElement>) => {
+    onInternalScroll(e);
+    onScroll?.(e);
+  });
+
   const triggerOnScroll = () => {
     if (horizonScroll && scrollBodyRef.current) {
-      onScroll({ currentTarget: scrollBodyRef.current } as React.UIEvent<HTMLDivElement>);
+      onInternalScroll({ currentTarget: scrollBodyRef.current } as React.UIEvent<HTMLDivElement>);
     } else {
       setPingedLeft(false);
       setPingedRight(false);
@@ -606,7 +617,7 @@ function Table<RecordType extends DefaultRecordType>(
       bodyContent = customizeScrollBody(mergedData, {
         scrollbarSize,
         ref: scrollBodyRef,
-        onScroll,
+        onScroll: onInternalScroll,
       });
 
       headerProps.colWidths = flattenColumns.map(({ width }, index) => {
@@ -631,7 +642,7 @@ function Table<RecordType extends DefaultRecordType>(
             ...scrollXStyle,
             ...scrollYStyle,
           }}
-          onScroll={onScroll}
+          onScroll={onBodyScroll}
           ref={scrollBodyRef}
           className={classNames(`${prefixCls}-body`)}
         >
@@ -663,7 +674,7 @@ function Table<RecordType extends DefaultRecordType>(
       ...columnContext,
       direction,
       stickyClassName,
-      onScroll,
+      onScroll: onInternalScroll,
     };
 
     groupTableNode = (
@@ -700,7 +711,7 @@ function Table<RecordType extends DefaultRecordType>(
             ref={stickyRef}
             offsetScroll={offsetScroll}
             scrollBodyRef={scrollBodyRef}
-            onScroll={onScroll}
+            onScroll={onInternalScroll}
             container={container}
             data={data}
           />
@@ -716,7 +727,7 @@ function Table<RecordType extends DefaultRecordType>(
           ...scrollYStyle,
         }}
         className={classNames(`${prefixCls}-content`)}
-        onScroll={onScroll}
+        onScroll={onInternalScroll}
         ref={scrollBodyRef}
       >
         <TableComponent

src/VirtualTable/BodyGrid.tsx

@@ -41,7 +41,13 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
     'emptyNode',
     'scrollX',
   ]);
-  const { sticky, scrollY, listItemHeight, getComponent } = useContext(StaticContext);
+  const {
+    sticky,
+    scrollY,
+    listItemHeight,
+    getComponent,
+    onScroll: onTablePropScroll,
+  } = useContext(StaticContext);
 
   // =========================== Ref ============================
   const listRef = React.useRef<ListRef>();
@@ -233,6 +239,7 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
             scrollLeft: x,
           });
         }}
+        onScroll={onTablePropScroll}
         extraRender={extraRender}
       >
         {(item, index, itemProps) => {

src/VirtualTable/context.ts

@@ -6,6 +6,7 @@ export interface StaticContextProps {
   listItemHeight: number;
   sticky: boolean | TableSticky;
   getComponent: GetComponent;
+  onScroll?: React.UIEventHandler<HTMLDivElement>;
 }
 
 export const StaticContext = createContext<StaticContextProps>(null);

src/VirtualTable/index.tsx

@@ -33,6 +33,7 @@ function VirtualTable<RecordType>(props: VirtualTableProps<RecordType>, ref: Rea
     className,
     listItemHeight,
     components,
+    onScroll,
   } = props;
 
   let { x: scrollX, y: scrollY } = scroll || {};
@@ -59,10 +60,13 @@ function VirtualTable<RecordType>(props: VirtualTableProps<RecordType>, ref: Rea
     (path, defaultComponent) => getValue(components, path) || defaultComponent,
   );
 
+  // Memo this
+  const onInternalScroll = useEvent(onScroll);
+
   // ========================= Context ==========================
   const context = React.useMemo(
-    () => ({ sticky, scrollY, listItemHeight, getComponent }),
-    [sticky, scrollY, listItemHeight, getComponent],
+    () => ({ sticky, scrollY, listItemHeight, getComponent, onScroll: onInternalScroll }),
+    [sticky, scrollY, listItemHeight, getComponent, onInternalScroll],
   );
 
   // ========================== Render ==========================

tests/Table.spec.jsx

@@ -6,6 +6,7 @@ import Table, { INTERNAL_COL_DEFINE } from '../src';
 import BodyRow from '../src/Body/BodyRow';
 import Cell from '../src/Cell';
 import { INTERNAL_HOOKS } from '../src/constant';
+import { fireEvent, render } from '@testing-library/react';
 
 describe('Table.Basic', () => {
   const data = [
@@ -1319,4 +1320,17 @@ describe('Table.Basic', () => {
         .props().style.width + wrapper.find('col').last().props().style.width,
     ).toEqual(width);
   });
+
+  it('onScroll event', () => {
+    const onScroll = vi.fn();
+    const wrapper = render(
+      createTable({
+        onScroll,
+        scroll: { x: 100, y: 100 },
+      }),
+    );
+
+    fireEvent.scroll(wrapper.container.querySelector('.rc-table-body'));
+    expect(onScroll).toHaveBeenCalled();
+  });
 });

tests/Virtual.spec.tsx

@@ -433,4 +433,14 @@ describe('Table.Virtual', () => {
       'my-cell',
     );
   });
+
+  it('onScroll event should work', async () => {
+    const onScroll = vi.fn();
+    const { container } = getTable({ onScroll });
+
+    await waitFakeTimer();
+
+    fireEvent.scroll(container.querySelector('.rc-table-tbody-virtual-holder')!);
+    expect(onScroll).toHaveBeenCalled();
+  });
 });

vitest.config.ts

@@ -6,12 +6,11 @@ export default defineConfig({
   },
   test: {
     include: ['**/tests/*.spec.*'],
-    exclude: ['**/coverage/**'],
     globals: true,
     setupFiles: './tests/setup.ts',
     environment: 'jsdom',
     coverage: {
-      exclude: ['**/docs/**', '**/__mocks__/**'],
+      exclude: ['**/docs/**', '**/__mocks__/**', '**/coverage/**'],
     },
   },
 });