feat: expose scroll event

CHANGELOG.md

@@ -85,6 +85,7 @@
   - Only visible headers cells are now rendered. [#1837](https://github.com/adazzle/react-data-grid/pull/1837)
   - ⚠️ the `rowKey` prop is now required for row selection.
   - ⚠️ `column.cellClass` does not affect header cells anymore.
+  - ⚠️ `onScroll` will directly pass the UIEvent rather than the scrollLeft and scrollRight only.
 
 ## `master` to `alpha`
 - **Added:**

src/DataGrid.tsx

@@ -37,7 +37,6 @@ import {
   RowExpandToggleEvent,
   RowRendererProps,
   RowsUpdateEvent,
-  ScrollPosition,
   SelectRowEvent
 } from './common/types';
 import { CellNavigationMode, SortDirection } from './common/enums';
@@ -119,7 +118,7 @@ export interface DataGridProps<R, K extends keyof R, SR = unknown> {
   /** Function called whenever a row is clicked */
   onRowClick?: (rowIdx: number, row: R, column: CalculatedColumn<R, SR>) => void;
   /** Called when the grid is scrolled */
-  onScroll?: (scrollPosition: ScrollPosition) => void;
+  onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
   /** Called when a column is resized */
   onColumnResize?: (idx: number, width: number) => void;
   onRowExpandToggle?: (event: RowExpandToggleEvent) => void;
@@ -325,7 +324,7 @@ function DataGrid<R, K extends keyof R, SR>({
     const { scrollTop, scrollLeft } = event.currentTarget;
     setScrollTop(scrollTop);
     setScrollLeft(scrollLeft);
-    onScroll?.({ scrollTop, scrollLeft });
+    onScroll?.(event);
   }
 
   const handleColumnResize = useCallback((column: CalculatedColumn<R, SR>, width: number) => {

src/common/types.ts

@@ -135,11 +135,6 @@ export interface FilterRendererProps<TRow, TFilterValue = unknown, TSummaryRow =
   onChange: (value: TFilterValue) => void;
 }
 
-export interface ScrollPosition {
-  scrollLeft: number;
-  scrollTop: number;
-}
-
 export interface RowGroupMetaData {
   isGroup: boolean;
   treeDepth: number;

stories/demos/AllFeatures.tsx

@@ -56,9 +56,27 @@ function createRows(numberOfRows: number): Row[] {
   return rows;
 }
 
+function isAtBottom(event: React.UIEvent<HTMLDivElement>): boolean {
+  const target = event.target as HTMLDivElement;
+  return target.clientHeight + target.scrollTop === target.scrollHeight;
+}
+
+function loadMoreRows(newRowsCount: number, length: number): Promise<Row[]> {
+  return new Promise(resolve => {
+    const newRows: Row[] = [];
+
+    for (let i = 0; i < newRowsCount; i++) {
+      newRows[i] = createFakeRowObjectData(i + length);
+    }
+
+    setTimeout(() => resolve(newRows), 1000);
+  });
+}
+
 export default function AllFeatures() {
   const [rows, setRows] = useState(() => createRows(2000));
   const [selectedRows, setSelectedRows] = useState(() => new Set<string>());
+  const [isLoading, setIsLoading] = useState(false);
   const gridRef = useRef<DataGridHandle>(null);
 
   const columns = useMemo((): Column<Row>[] => [
@@ -190,26 +208,41 @@ export default function AllFeatures() {
     }
   }, []);
 
+  async function handleScroll(event: React.UIEvent<HTMLDivElement>) {
+    if (!isAtBottom(event)) return;
+
+    setIsLoading(true);
+
+    const newRows = await loadMoreRows(50, rows.length);
+
+    setRows([...rows, ...newRows]);
+    setIsLoading(false);
+  }
+
   return (
     <>
       <Toolbar onAddRow={handleAddRow} numberOfRows={rows.length} />
       <AutoSizer>
         {({ height, width }) => (
-          <DataGrid
-            ref={gridRef}
-            columns={columns}
-            rows={rows}
-            rowKey="id"
-            onRowsUpdate={handleRowUpdate}
-            onRowClick={handleRowClick}
-            rowHeight={30}
-            width={width}
-            height={height - 40}
-            selectedRows={selectedRows}
-            onSelectedRowsChange={setSelectedRows}
-            enableCellCopyPaste
-            enableCellDragAndDrop
-          />
+          <>
+            <DataGrid
+              ref={gridRef}
+              columns={columns}
+              rows={rows}
+              rowKey="id"
+              onRowsUpdate={handleRowUpdate}
+              onRowClick={handleRowClick}
+              rowHeight={30}
+              width={width}
+              height={height - 40}
+              selectedRows={selectedRows}
+              onScroll={handleScroll}
+              onSelectedRowsChange={setSelectedRows}
+              enableCellCopyPaste
+              enableCellDragAndDrop
+            />
+            {isLoading && <div className="load-more-rows-tag" style={{ left: width - 230 }}>Loading more rows...</div>}
+          </>
         )}
       </AutoSizer>
     </>

stories/index.less

@@ -11,3 +11,13 @@ body, html {
   height: 100vh;
   padding: 8px;
 }
+
+.load-more-rows-tag {
+  line-height: 35px;
+  width: 180px;
+  position: relative;
+  top: -70px;
+  padding: 8px 16px;
+  background: rgba(0,0,0,0.6);
+  color: white;
+}