[DataGrid] Add onRowsScrollEnd to support infinite loading

packages/grid/_modules_/grid/GridComponent.tsx

@@ -47,6 +47,7 @@ import { GridApiContext } from './components/GridApiContext';
 import { useGridFilter } from './hooks/features/filter/useGridFilter';
 import { useLocaleText } from './hooks/features/localeText/useLocaleText';
 import { useGridCsvExport } from './hooks/features/export';
+import { useGridInfiniteLoader } from './hooks/features/infiniteLoader';
 
 export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps>(
   function GridComponent(props, ref) {
@@ -90,6 +91,7 @@ export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps
     useGridColumnResize(columnsHeaderRef, apiRef);
     useGridPagination(apiRef);
     useGridCsvExport(apiRef);
+    useGridInfiniteLoader(windowRef, apiRef);
 
     const components = useGridComponents(props.components, props.componentsProps, apiRef);
     useStateProp(apiRef, props.state);

packages/grid/_modules_/grid/components/GridViewport.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { visibleGridColumnsSelector } from '../hooks/features/columns/gridColumnsSelector';
-import { GridState } from '../hooks/features/core/gridState';
 import { useGridSelector } from '../hooks/features/core/useGridSelector';
 import { gridDensityRowHeightSelector } from '../hooks/features/density/densitySelector';
 import { visibleSortedGridRowsSelector } from '../hooks/features/filter/gridFilterSelector';
@@ -15,13 +14,14 @@ import { GridRenderingZone } from './GridRenderingZone';
 import { GridRow } from './GridRow';
 import { GridRowCells } from './GridRowCells';
 import { GridStickyContainer } from './GridStickyContainer';
+import {
+  gridContainerSizesSelector,
+  gridViewportSizesSelector,
+  gridScrollBarSizeSelector,
+} from '../hooks/utils/sizesSelector';
 
 type ViewportType = React.ForwardRefExoticComponent<React.RefAttributes<HTMLDivElement>>;
 
-export const gridContainerSizesSelector = (state: GridState) => state.containerSizes;
-export const gridViewportSizesSelector = (state: GridState) => state.viewportSizes;
-export const gridScrollBarSizeSelector = (state: GridState) => state.scrollBar;
-
 export const GridViewport: ViewportType = React.forwardRef<HTMLDivElement, {}>(
   (props, renderingZoneRef) => {
     const apiRef = React.useContext(GridApiContext);

packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaders.tsx

@@ -7,9 +7,9 @@ import { optionsSelector } from '../../hooks/utils/optionsSelector';
 import { GridApiContext } from '../GridApiContext';
 import { GridLeftEmptyCell, GridRightEmptyCell } from '../GridCell';
 import { GridScrollArea } from '../GridScrollArea';
-import { gridContainerSizesSelector } from '../GridViewport';
 import { GridColumnHeadersItemCollection } from './GridColumnHeadersItemCollection';
 import { gridDensityHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
+import { gridContainerSizesSelector } from '../../hooks/utils/sizesSelector';
 
 export const gridScrollbarStateSelector = (state: GridState) => state.scrollBar;
 

packages/grid/_modules_/grid/hooks/features/infiniteLoader/index.ts

@@ -0,0 +1 @@
+export * from './useGridInfiniteLoader';

packages/grid/_modules_/grid/hooks/features/infiniteLoader/useGridInfiniteLoader.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { optionsSelector } from '../../utils/optionsSelector';
+import { GridApiRef } from '../../../models/api/gridApiRef';
+import { useGridSelector } from '../core/useGridSelector';
+import { useNativeEventListener } from '../../root/useNativeEventListener';
+import { GRID_SCROLL } from '../../../constants/eventsConstants';
+import { gridContainerSizesSelector } from '../../utils/sizesSelector';
+
+export const useGridInfiniteLoader = (
+  windowRef: React.MutableRefObject<HTMLDivElement | null>,
+  apiRef: GridApiRef,
+): void => {
+  const options = useGridSelector(apiRef, optionsSelector);
+  const containerSizes = useGridSelector(apiRef, gridContainerSizesSelector);
+  const isInScrollBottomArea = React.useRef<boolean>(false);
+
+  const handleGridScroll = React.useCallback(
+    (event) => {
+      const scrollPositionBottom =
+        event.target.scrollTop + containerSizes?.windowSizes.height + options.scrollBottomThreshold;
+
+      if (containerSizes && scrollPositionBottom >= containerSizes.dataContainerSizes.height) {
+        if (!isInScrollBottomArea.current && options.onScrollBottom) {
+          isInScrollBottomArea.current = true;
+          options.onScrollBottom();
+        }
+      } else {
+        isInScrollBottomArea.current = false;
+      }
+    },
+    [options, containerSizes],
+  );
+
+  useNativeEventListener(apiRef, windowRef, GRID_SCROLL, handleGridScroll, { passive: true });
+};

packages/grid/_modules_/grid/hooks/features/keyboard/useGridKeyboard.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { gridContainerSizesSelector } from '../../../components/GridViewport';
 import { GRID_CELL_CSS_CLASS, GRID_ROW_CSS_CLASS } from '../../../constants/cssClassesConstants';
 import {
   GRID_ELEMENT_FOCUS_OUT,
@@ -33,6 +32,7 @@ import { useLogger } from '../../utils/useLogger';
 import { useGridApiEventHandler } from '../../root/useGridApiEventHandler';
 import { gridSelectionStateSelector } from '../selection/gridSelectionSelector';
 import { KeyboardState } from './keyboardState';
+import { gridContainerSizesSelector } from '../../utils/sizesSelector';
 
 const getNextCellIndexes = (code: string, indexes: GridCellIndexCoordinates) => {
   if (!isArrowKeys(code)) {

packages/grid/_modules_/grid/hooks/features/pagination/useGridPagination.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { gridContainerSizesSelector } from '../../../components/GridViewport';
 import { GRID_PAGE_CHANGED, GRID_PAGESIZE_CHANGED } from '../../../constants/eventsConstants';
 import { GridApiRef } from '../../../models/api/gridApiRef';
 import { GridPaginationApi } from '../../../models/api/gridPaginationApi';
 import { GridPageChangeParams } from '../../../models/params/gridPageChangeParams';
 import { useGridApiEventHandler } from '../../root/useGridApiEventHandler';
 import { useGridApiMethod } from '../../root/useGridApiMethod';
 import { optionsSelector } from '../../utils/optionsSelector';
+import { gridContainerSizesSelector } from '../../utils/sizesSelector';
 import { useLogger } from '../../utils/useLogger';
 import { useGridReducer } from '../core/useGridReducer';
 import { useGridSelector } from '../core/useGridSelector';

packages/grid/_modules_/grid/hooks/utils/sizesSelector.ts

@@ -0,0 +1,5 @@
+import { GridState } from '../features/core/gridState';
+
+export const gridContainerSizesSelector = (state: GridState) => state.containerSizes;
+export const gridViewportSizesSelector = (state: GridState) => state.viewportSizes;
+export const gridScrollBarSizeSelector = (state: GridState) => state.scrollBar;

packages/grid/_modules_/grid/models/gridOptions.tsx

@@ -336,6 +336,14 @@ export interface GridOptions {
    * You can find all the translation keys supported in [the source](https://github.com/mui-org/material-ui-x/blob/HEAD/packages/grid/_modules_/grid/constants/localeTextConstants.ts) in the GitHub repository.
    */
   localeText: Partial<GridLocaleText>;
+  /**
+   *
+   */
+  onScrollBottom?: () => void;
+  /**
+   *
+   */
+  scrollBottomThreshold: number;
 }
 
 /**
@@ -347,6 +355,7 @@ export const DEFAULT_GRID_OPTIONS: GridOptions = {
   columnBuffer: 2,
   rowsPerPageOptions: [25, 50, 100],
   pageSize: 100,
+  scrollBottomThreshold: 80,
   paginationMode: GridFeatureModeConstant.client,
   sortingMode: GridFeatureModeConstant.client,
   filterMode: GridFeatureModeConstant.client,

packages/grid/x-grid-data-generator/src/useDemoData.ts

@@ -85,7 +85,7 @@ export const useDemoData = (options: DemoDataOptions): DemoDataReturnType => {
   const [loading, setLoading] = React.useState(true);
 
   React.useEffect(() => {
-    const cacheKey = `${options.dataSet}-${rowLength}-${index}-${options.maxColumns}`;
+    const cacheKey = `${options.dataSet}-${options.rowLength}-${index}-${options.maxColumns}`;
 
     // Cache to allow fast switch between the JavaScript and TypeScript version
     // of the demos.
@@ -107,11 +107,11 @@ export const useDemoData = (options: DemoDataOptions): DemoDataReturnType => {
 
       let newData;
 
-      if (rowLength > 1000) {
+      if (options.rowLength > 1000) {
         newData = await getRealData(1000, columns);
-        newData = await extrapolateSeed(rowLength, columns, newData);
+        newData = await extrapolateSeed(options.rowLength, columns, newData);
       } else {
-        newData = await getRealData(rowLength, columns);
+        newData = await getRealData(options.rowLength, columns);
       }
 
       if (!active) {
@@ -131,7 +131,7 @@ export const useDemoData = (options: DemoDataOptions): DemoDataReturnType => {
     return () => {
       active = false;
     };
-  }, [rowLength, options.dataSet, index, options.maxColumns]);
+  }, [options.rowLength, options.dataSet, index, options.maxColumns]);
 
   return {
     data,

packages/storybook/src/stories/grid-rendering.stories.tsx

@@ -1,8 +1,20 @@
 import * as React from 'react';
-import { XGrid } from '@material-ui/x-grid';
+import { XGrid, GridOverlay, useGridApiRef } from '@material-ui/x-grid';
+import LinearProgress from '@material-ui/core/LinearProgress';
+import { useDemoData } from '@material-ui/x-grid-data-generator';
 import '../style/grid-stories.css';
 import { action } from '@storybook/addon-actions';
 
+function CustomLoadingOverlay() {
+  return (
+    <GridOverlay>
+      <div style={{ position: 'absolute', top: 0, width: '100%' }}>
+        <LinearProgress />
+      </div>
+    </GridOverlay>
+  );
+}
+
 export default {
   title: 'X-Grid Tests/Rendering',
   component: XGrid,
@@ -40,3 +52,31 @@ export const RenderInputInCell = () => {
     </div>
   );
 };
+export const InfiniteLoading = () => {
+  const apiRef = useGridApiRef();
+  const [size, setSize] = React.useState(50);
+  const { loading, data, loadNewData } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: size,
+    maxColumns: 20,
+  });
+
+  const handleOnScrollBottom = () => {
+    setSize(size + 20);
+    loadNewData();
+  };
+
+  return (
+    <div className="grid-container">
+      <XGrid
+        {...data}
+        apiRef={apiRef}
+        loading={loading}
+        onScrollBottom={handleOnScrollBottom}
+        components={{
+          LoadingOverlay: CustomLoadingOverlay,
+        }}
+      />
+    </div>
+  );
+};