Add scroll reach bottom api for lazy loading usage

examples/demos/example13-all-features.js

@@ -212,6 +212,17 @@ export default class extends React.Component {
                 minHeight={height}
                 selectedRows={this.state.selectedRows}
                 onSelectedRowsChange={this.onSelectedRowsChange}
+                onScroll={(scrollOption) => {
+                  if (scrollOption.reachedBottom) {
+                    this.setState(({ rows }) => {
+                      const newRows = [];
+                      for (let i = 0; i < 50; i++) {
+                        newRows[i] = { ...this.createFakeRowObjectData(i), id: i + rows.length };
+                      }
+                      return { rows: [...rows, ...newRows] };
+                    });
+                  }
+                }}
               />
             )}
           </AutoSizer>

packages/react-data-grid/src/Canvas.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { EventTypes } from './common/enums';
-import { CalculatedColumn, CellMetaData, ColumnMetrics, InteractionMasksMetaData, Position, ScrollPosition } from './common/types';
+import { CalculatedColumn, CellMetaData, ColumnMetrics, InteractionMasksMetaData, Position, ScrollOption } from './common/types';
 import EventBus from './EventBus';
 import InteractionMasks from './masks/InteractionMasks';
 import { DataGridProps } from './DataGrid';
@@ -38,7 +38,7 @@ export interface CanvasProps<R, K extends keyof R> extends SharedDataGridProps<R
   height: number;
   eventBus: EventBus;
   interactionMasksMetaData: InteractionMasksMetaData<R>;
-  onScroll(position: ScrollPosition): void;
+  onScroll(position: ScrollOption): void;
   onCanvasKeydown?(e: React.KeyboardEvent<HTMLDivElement>): void;
   onCanvasKeyup?(e: React.KeyboardEvent<HTMLDivElement>): void;
   onRowSelectionChange(rowIdx: number, row: R, checked: boolean, isShiftClick: boolean): void;
@@ -110,6 +110,12 @@ export default function Canvas<R, K extends keyof R>({
     }
   }, [rowHeight, scrollToRowIndex]);
 
+  useEffect(() => {
+    if (scrollTop + clientHeight - rowHeight * rowsCount === 8) {
+      onScroll({ scrollLeft, scrollTop, reachedBottom: true });
+    }
+  }, [scrollTop, rowHeight, rowsCount, rowOverscanEndIdx, clientHeight, onScroll, scrollLeft]);
+
   function handleScroll(e: React.UIEvent<HTMLDivElement>) {
     const { scrollLeft, scrollTop } = e.currentTarget;
     setScrollLeft(scrollLeft);

packages/react-data-grid/src/DataGrid.tsx

@@ -37,7 +37,7 @@ import {
   SubRowDetails,
   SubRowOptions,
   IRowRendererProps,
-  ScrollPosition
+  ScrollOption
 } from './common/types';
 
 export interface DataGridProps<R, K extends keyof R> {
@@ -116,7 +116,7 @@ export interface DataGridProps<R, K extends keyof R> {
   /** The direction to sort the sortColumn*/
   sortDirection?: DEFINE_SORT;
   /** Called when the grid is scrolled */
-  onScroll?(scrollPosition: ScrollPosition): void;
+  onScroll?(scrollOption: ScrollOption): void;
   /** Component used to render a draggable header cell */
   draggableHeaderCell?: React.ComponentType<{ column: CalculatedColumn<R>; onHeaderDrop(): void }>;
   getValidFilterValues?(columnKey: keyof R): unknown;
@@ -256,7 +256,7 @@ function DataGrid<R, K extends keyof R>({
     }
   }
 
-  function handleScroll(scrollPosition: ScrollPosition) {
+  function handleScroll(scrollPosition: ScrollOption) {
     if (headerRef.current && scrollLeft.current !== scrollPosition.scrollLeft) {
       scrollLeft.current = scrollPosition.scrollLeft;
       headerRef.current.setScrollLeft(scrollPosition.scrollLeft);

packages/react-data-grid/src/common/types.ts

@@ -254,6 +254,10 @@ export interface ScrollPosition {
   scrollTop: number;
 }
 
+export interface ScrollOption extends ScrollPosition {
+  reachedBottom?: boolean;
+}
+
 export interface InteractionMasksMetaData<TRow> {
   onCheckCellIsEditable?(e: CheckCellIsEditableEvent<TRow>): boolean;
   onCellCopyPaste?(e: CellCopyPasteEvent<TRow>): void;

packages/react-data-grid/style/rdg-core.less

@@ -29,4 +29,5 @@
 .rdg-grid {
   // min-height is here to show the horizontal scrollbar when there are no rows
   min-height: 1px;
+  margin-bottom: 8px;
 }