Extend onScroll API

examples/demos/Wrapper.tsx

@@ -3,10 +3,10 @@ import { Menu, MenuOpen } from '@material-ui/icons';
 
 interface Props {
   title: string;
-  children: React.ReactChild;
+  isLoading?: boolean;
 }
 
-export default function Wrapper({ title, children }: Props) {
+export default function Wrapper({ title, children, isLoading }: React.PropsWithChildren<Props>) {
   const [isSidebarVisible, setIsSidebarVisible] = useState(true);
 
   useLayoutEffect(() => {
@@ -17,11 +17,18 @@ export default function Wrapper({ title, children }: Props) {
   }, [isSidebarVisible]);
 
   return (
-    <div className="example">
-      <h1 onClick={() => setIsSidebarVisible(!isSidebarVisible)}>
-        {isSidebarVisible ? <MenuOpen /> : <Menu />} {title}
-      </h1>
-      {children}
-    </div>
+    <>
+      {isLoading && (
+        <div className="rdg-loading">
+          <div className="rdg-loading-text">Loading...</div>
+        </div>
+      )}
+      <div className="example">
+        <h1 onClick={() => setIsSidebarVisible(!isSidebarVisible)}>
+          {isSidebarVisible ? <MenuOpen /> : <Menu />} {title}
+        </h1>
+        {children}
+      </div>
+    </>
   );
 }

examples/demos/example13-all-features.tsx

@@ -1,7 +1,8 @@
 import faker from 'faker';
-import React, { useState, useMemo, useCallback, useRef } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { AutoSizer } from 'react-virtualized';
-import DataGrid, { Column, CellContent, SelectColumn, UpdateActions, DataGridHandle, GridRowsUpdatedEvent } from '../../src';
+
+import DataGrid, { CellContent, Column, DataGridHandle, GridRowsUpdatedEvent, ScrollPosition, SelectColumn, UpdateActions } from '../../src';
 import DropDownEditor from './components/Editors/DropDownEditor';
 import ImageFormatter from './components/Formatters/ImageFormatter';
 import Toolbar from './components/Toolbar/Toolbar';
@@ -28,6 +29,11 @@ faker.locale = 'en_GB';
 
 const titles = ['Dr.', 'Mr.', 'Mrs.', 'Miss', 'Ms.'];
 
+function isReachedBottom(event: React.UIEvent<HTMLDivElement>): boolean {
+  const target = event.target as HTMLDivElement;
+  return target.clientHeight + target.scrollTop === target.scrollHeight;
+}
+
 function createFakeRowObjectData(index: number): Row {
   return {
     id: `id_${index}`,
@@ -47,6 +53,18 @@ function createFakeRowObjectData(index: number): Row {
   };
 }
 
+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);
+  });
+}
+
 function createRows(numberOfRows: number): Row[] {
   const rows: Row[] = [];
 
@@ -60,6 +78,7 @@ function createRows(numberOfRows: number): Row[] {
 export default function AllFeaturesExample(): JSX.Element {
   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: Column<Row>[] = useMemo(() => [
@@ -191,38 +210,48 @@ export default function AllFeaturesExample(): JSX.Element {
 
   const handleAddRow = useCallback(({ newRowIndex }: { newRowIndex: number}): void => setRows([...rows, createFakeRowObjectData(newRowIndex)]), [rows]);
 
+  const handleScroll = useCallback(async (position: ScrollPosition, event: React.UIEvent<HTMLDivElement>) => {
+    if (!isReachedBottom(event)) return;
+
+    setIsLoading(true);
+
+    const newRows = await loadMoreRows(50, rows.length);
+
+    setRows([...rows, ...newRows]);
+    setIsLoading(false);
+  }, [rows]);
+
   const getRowAt = useCallback((index: number): Row => rows[index], [rows]);
 
   const getSize = useCallback((): number => rows.length, [rows.length]);
 
   const onSelectedRowsChange = useCallback((newSelectedRows: Set<string>): void => setSelectedRows(newSelectedRows), []);
 
   return (
-    <Wrapper title="All the features grid">
-      <>
-        <Toolbar onAddRow={handleAddRow} numberOfRows={rows.length} />
-        <div className="grid-autosizer-wrapper">
-          <AutoSizer>
-            {({ height, width }) => (
-              <DataGrid<Row, keyof Row>
-                ref={gridRef}
-                enableCellSelect
-                columns={columns}
-                rowGetter={getRowAt}
-                rowsCount={getSize()}
-                onGridRowsUpdated={handleGridRowsUpdated}
-                rowHeight={30}
-                minWidth={width}
-                minHeight={height}
-                selectedRows={selectedRows}
-                onSelectedRowsChange={onSelectedRowsChange}
-                enableCellCopyPaste
-                enableCellDragAndDrop
-              />
-            )}
-          </AutoSizer>
-        </div>
-      </>
+    <Wrapper title="All the features grid" isLoading={isLoading}>
+      <Toolbar onAddRow={handleAddRow} numberOfRows={rows.length} />
+      <div className="grid-autosizer-wrapper">
+        <AutoSizer>
+          {({ height, width }) => (
+            <DataGrid<Row, keyof Row>
+              ref={gridRef}
+              enableCellSelect
+              columns={columns}
+              rowGetter={getRowAt}
+              rowsCount={getSize()}
+              onGridRowsUpdated={handleGridRowsUpdated}
+              rowHeight={30}
+              minWidth={width}
+              minHeight={height}
+              selectedRows={selectedRows}
+              onSelectedRowsChange={onSelectedRowsChange}
+              enableCellCopyPaste
+              enableCellDragAndDrop
+              onScroll={handleScroll}
+            />
+          )}
+        </AutoSizer>
+      </div>
     </Wrapper>
   );
 }

examples/index.html

@@ -62,6 +62,23 @@
     .grid-autosizer-wrapper {
       flex: 1 1 auto;
     }
+
+    .rdg-loading {
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      z-index: 9999;
+      background-color: rgba(0,0,0,0.75);
+    }
+
+    .rdg-loading .rdg-loading-text {
+      transform: translate(-50%, -50%);
+      top: 50%;
+      left: 50%;
+      position: absolute;
+      color: white;
+      font-size: 24px;
+    }
   </style>
   <script defer src="https://unpkg.com/core-js-bundle/minified.js"></script>
   <script defer src="./index.js"></script>

src/Canvas.tsx

@@ -47,7 +47,7 @@ export interface CanvasProps<R, K extends keyof R> extends SharedDataGridProps<R
   colOverscanEndIdx: number;
   colVisibleStartIdx: number;
   colVisibleEndIdx: number;
-  onScroll(position: ScrollPosition): void;
+  onScroll(position: ScrollPosition, event: React.UIEvent<HTMLDivElement>): void;
   onCanvasKeydown?(e: React.KeyboardEvent<HTMLDivElement>): void;
   onCanvasKeyup?(e: React.KeyboardEvent<HTMLDivElement>): void;
   onRowSelectionChange(rowIdx: number, row: R, checked: boolean, isShiftClick: boolean): void;
@@ -98,7 +98,7 @@ function Canvas<R, K extends keyof R>({
   function handleScroll(e: React.UIEvent<HTMLDivElement>) {
     const { scrollLeft, scrollTop } = e.currentTarget;
     setScrollTop(scrollTop);
-    onScroll({ scrollLeft, scrollTop });
+    onScroll({ scrollLeft, scrollTop }, e);
     if (summaryRef.current) {
       summaryRef.current.scrollLeft = scrollLeft;
     }

src/DataGrid.tsx

@@ -106,7 +106,7 @@ export interface DataGridProps<R, K extends keyof R> {
   /** Function called whenever grid is sorted*/
   onGridSort?(columnKey: keyof R, direction: DEFINE_SORT): void;
   /** Called when the grid is scrolled */
-  onScroll?(scrollPosition: ScrollPosition): void;
+  onScroll?(scrollPosition: ScrollPosition, event: React.UIEvent<HTMLDivElement>): void;
   /** Component used to render a draggable header cell */
   draggableHeaderCell?: React.ComponentType<{ column: CalculatedColumn<R>; onHeaderDrop(): void }>;
   RowsContainer?: React.ComponentType<RowsContainerProps>;
@@ -231,12 +231,12 @@ function DataGrid<R, K extends keyof R>({
     props.onColumnResize?.(column.idx, width);
   }
 
-  function handleScroll(scrollPosition: ScrollPosition) {
+  function handleScroll(scrollPosition: ScrollPosition, event: React.UIEvent<HTMLDivElement>) {
     if (headerRef.current) {
       headerRef.current.scrollLeft = scrollPosition.scrollLeft;
     }
     setScrollLeft(scrollPosition.scrollLeft);
-    props.onScroll?.(scrollPosition);
+    props.onScroll?.(scrollPosition, event);
   }
 
   function handleGridRowsUpdated(event: GridRowsUpdatedEvent<R>) {

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;
 }