[DataGrid] Add onRowsScrollEnd to support infinite loading

docs/pages/api-docs/x-grid.md

@@ -72,6 +72,7 @@ import { XGrid } from '@material-ui/x-grid';
 | <span class="prop-name">onRowEnter</span> | <span class="prop-type">(param: GridRowParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouse enter comes from a row container element. |
 | <span class="prop-name">onRowLeave</span> | <span class="prop-type">(param: GridRowParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouse leave event comes from a row container element. |
 | <span class="prop-name">onRowSelected</span> | <span class="prop-type">(param: GridRowSelectedParams) => void</span> |   | Callback fired when one row is selected. |
+| <span class="prop-name">onRowsScrollEnd</span> | <span class="prop-type">(param: GridRowScrollEndParams) => void</span> |   | Callback fired when scrolling to the bottom of the grid viewport. |
 | <span class="prop-name">onSelectionModelChange</span> | <span class="prop-type">(param: GridSelectionModelChangeParams) => void</span> |   | Callback fired when the selection state of one or multiple rows changes. |
 | <span class="prop-name">onSortModelChange</span> | <span class="prop-type">(param: GridSortModelParams) => void</span> |   | Callback fired when the sort model changes before a column is sorted. |
 | <span class="prop-name">page</span> | <span class="prop-type">number</span> | 1   |  Set the current page. |
@@ -83,6 +84,7 @@ import { XGrid } from '@material-ui/x-grid';
 | <span class="prop-name">rowHeight</span> | <span class="prop-type">number</span> | 52 | Set the height in pixel of a row in the grid. |
 | <span class="prop-name">rowsPerPageOptions</span> | <span class="prop-type">number[]</span> | [25, 50, 100] | Select the pageSize dynamically using the component UI. |
 | <span class="prop-name">scrollbarSize</span> | <span class="prop-type">number</span> | 15 | Set the height/width of the grid inner scrollbar. |
+| <span class="prop-name">scrollEndThreshold</span> | <span class="prop-type">number</span> | 80 | Set the area at the bottom of the grid viewport where onRowsScrollEnd is called. |
 | <span class="prop-name">selectionModel</span> | <span class="prop-type">GridSelectionModel</span> |   | Set the selection model of the grid. |
 | <span class="prop-name">showCellRightBorder</span> | <span class="prop-type">boolean</span> | false | If `true`, the right border of the cells are displayed. |
 | <span class="prop-name">showColumnRightBorder</span> | <span class="prop-type">boolean</span> | false | If `true`, the right border of the column headers are displayed. |

docs/src/pages/components/data-grid/rows/InfiniteLoadingGrid.js

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { XGrid, GridOverlay } from '@material-ui/x-grid';
+import {
+  useDemoData,
+  getRealData,
+  getCommodityColumns,
+} from '@material-ui/x-grid-data-generator';
+import LinearProgress from '@material-ui/core/LinearProgress';
+
+const MAX_ROW_LENGTH = 500;
+
+async function sleep(duration) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, duration);
+  });
+}
+
+function CustomLoadingOverlay() {
+  return (
+    <GridOverlay>
+      <div style={{ position: 'absolute', top: 0, width: '100%' }}>
+        <LinearProgress />
+      </div>
+    </GridOverlay>
+  );
+}
+
+export default function InfiniteLoadingGrid() {
+  const [loading, setLoading] = React.useState(false);
+  const [loadedRows, setLoadedRows] = React.useState([]);
+  const mounted = React.useRef(true);
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 20,
+    maxColumns: 6,
+  });
+
+  const loadServerRows = async (newRowLength) => {
+    setLoading(true);
+    const newData = await getRealData(newRowLength, getCommodityColumns());
+    // Simulate network throttle
+    await sleep(Math.random() * 500 + 100);
+
+    if (mounted.current) {
+      setLoading(false);
+      setLoadedRows(loadedRows.concat(newData.rows));
+    }
+  };
+
+  const handleOnRowsScrollEnd = (params) => {
+    if (loadedRows.length <= MAX_ROW_LENGTH) {
+      loadServerRows(params.viewportPageSize);
+    }
+  };
+
+  React.useEffect(() => {
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <XGrid
+        {...data}
+        rows={data.rows.concat(loadedRows)}
+        loading={loading}
+        hideFooterPagination
+        onRowsScrollEnd={handleOnRowsScrollEnd}
+        components={{
+          LoadingOverlay: CustomLoadingOverlay,
+        }}
+      />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/rows/InfiniteLoadingGrid.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { XGrid, GridOverlay } from '@material-ui/x-grid';
+import {
+  useDemoData,
+  getRealData,
+  getCommodityColumns,
+} from '@material-ui/x-grid-data-generator';
+import LinearProgress from '@material-ui/core/LinearProgress';
+
+const MAX_ROW_LENGTH = 500;
+
+async function sleep(duration: number) {
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, duration);
+  });
+}
+
+function CustomLoadingOverlay() {
+  return (
+    <GridOverlay>
+      <div style={{ position: 'absolute', top: 0, width: '100%' }}>
+        <LinearProgress />
+      </div>
+    </GridOverlay>
+  );
+}
+
+export default function InfiniteLoadingGrid() {
+  const [loading, setLoading] = React.useState(false);
+  const [loadedRows, setLoadedRows] = React.useState<any>([]);
+  const mounted = React.useRef(true);
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 20,
+    maxColumns: 6,
+  });
+
+  const loadServerRows = async (newRowLength) => {
+    setLoading(true);
+    const newData = await getRealData(newRowLength, getCommodityColumns());
+    // Simulate network throttle
+    await sleep(Math.random() * 500 + 100);
+
+    if (mounted.current) {
+      setLoading(false);
+      setLoadedRows(loadedRows.concat(newData.rows));
+    }
+  };
+
+  const handleOnRowsScrollEnd = (params) => {
+    if (loadedRows.length <= MAX_ROW_LENGTH) {
+      loadServerRows(params.viewportPageSize);
+    }
+  };
+
+  React.useEffect(() => {
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <XGrid
+        {...data}
+        rows={data.rows.concat(loadedRows)}
+        loading={loading}
+        hideFooterPagination
+        onRowsScrollEnd={handleOnRowsScrollEnd}
+        components={{
+          LoadingOverlay: CustomLoadingOverlay,
+        }}
+      />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/rows/rows.md

@@ -28,6 +28,14 @@ It replaces the previous values. This approach has some drawbacks:
 - You need to provide all the rows.
 - You might create a performance bottleneck when preparing the rows array to provide to the grid.
 
+### Infinite loading [<span class="pro"></span>](https://material-ui.com/store/items/material-ui-pro/)
+
+The grid provides a `onRowsScrollEnd` prop that can be used to load additional rows when the scroll reaches the bottom of the viewport area.
+
+In addition, the area in which the callback provided to the `onRowsScrollEnd` is called can be changed using `scrollEndThreshold`.
+
+{{"demo": "pages/components/data-grid/rows/InfiniteLoadingGrid.js", "bg": "inline"}}
+
 ### apiRef [<span class="pro"></span>](https://material-ui.com/store/items/material-ui-pro/)
 
 The second way to update rows is to use the apiRef.

packages/grid/_modules_/grid/GridComponent.tsx

@@ -48,6 +48,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) {
@@ -92,6 +93,7 @@ export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps
     useGridColumnResize(columnsHeaderRef, apiRef);
     useGridPagination(apiRef);
     useGridCsvExport(apiRef);
+    useGridInfiniteLoader(apiRef);
 
     const components = useGridComponents(props.components, props.componentsProps, apiRef);
     useStateProp(apiRef, props.state);

packages/grid/_modules_/grid/components/GridScrollArea.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {
   GRID_COL_REORDER_START,
   GRID_COL_REORDER_STOP,
-  GRID_SCROLLING,
+  GRID_ROWS_SCROLL,
 } from '../constants/eventsConstants';
 import { useGridApiEventHandler } from '../hooks/root/useGridApiEventHandler';
 import { GridApiRef } from '../models/api/gridApiRef';
@@ -68,7 +68,7 @@ export const GridScrollArea = React.memo(function GridScrollArea(props: ScrollAr
     setDragging((prevdragging) => !prevdragging);
   }, []);
 
-  useGridApiEventHandler(api as GridApiRef, GRID_SCROLLING, handleScrolling);
+  useGridApiEventHandler(api as GridApiRef, GRID_ROWS_SCROLL, handleScrolling);
   useGridApiEventHandler(api as GridApiRef, GRID_COL_REORDER_START, toggleDragging);
   useGridApiEventHandler(api as GridApiRef, GRID_COL_REORDER_STOP, toggleDragging);
 

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/root/gridContainerSizesSelector';
 
 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 { GridEmptyCell } from '../GridEmptyCell';
 import { GridScrollArea } from '../GridScrollArea';
-import { gridContainerSizesSelector } from '../GridViewport';
 import { GridColumnHeadersItemCollection } from './GridColumnHeadersItemCollection';
 import { gridDensityHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
+import { gridContainerSizesSelector } from '../../hooks/root/gridContainerSizesSelector';
 
 export const gridScrollbarStateSelector = (state: GridState) => state.scrollBar;
 

packages/grid/_modules_/grid/constants/eventsConstants.ts

@@ -3,7 +3,7 @@ export const GRID_RESIZE = 'resize';
 export const GRID_FOCUS_OUT = 'focusout';
 export const GRID_KEYDOWN = 'keydown';
 export const GRID_KEYUP = 'keyup';
-export const GRID_SCROLL = 'scroll';
+export const GRID_NATIVE_SCROLL = 'scroll';
 export const GRID_DRAGEND = 'dragend';
 
 // GRID events
@@ -42,7 +42,8 @@ export const GRID_SELECTION_CHANGED = 'selectionChange';
 export const GRID_PAGE_CHANGED = 'pageChange';
 export const GRID_PAGESIZE_CHANGED = 'pageSizeChange';
 
-export const GRID_SCROLLING = 'scrolling';
+export const GRID_ROWS_SCROLL = 'scrolling:rows';
+export const GRID_ROWS_SCROLL_END = 'scroll:rowEnd';
 
 export const GRID_COL_RESIZE_START = 'colResizing:start';
 export const GRID_COL_RESIZE_STOP = 'colResizing:stop';

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,47 @@
+import * as React from 'react';
+import { optionsSelector } from '../../utils/optionsSelector';
+import { GridApiRef } from '../../../models/api/gridApiRef';
+import { useGridSelector } from '../core/useGridSelector';
+import { GRID_ROWS_SCROLL, GRID_ROWS_SCROLL_END } from '../../../constants/eventsConstants';
+import { gridContainerSizesSelector } from '../../root/gridContainerSizesSelector';
+import { useGridApiEventHandler } from '../../root/useGridApiEventHandler';
+import { GridRowScrollEndParams } from '../../../models/params/gridRowScrollEndParams';
+import { visibleGridColumnsSelector } from '../columns/gridColumnsSelector';
+
+export const useGridInfiniteLoader = (apiRef: GridApiRef): void => {
+  const options = useGridSelector(apiRef, optionsSelector);
+  const containerSizes = useGridSelector(apiRef, gridContainerSizesSelector);
+  const visibleColumns = useGridSelector(apiRef, visibleGridColumnsSelector);
+  const isInScrollBottomArea = React.useRef<boolean>(false);
+
+  const handleGridScroll = React.useCallback(() => {
+    if (!containerSizes) {
+      return;
+    }
+
+    const scrollPosition = apiRef.current.getScrollPosition();
+    const scrollPositionBottom =
+      scrollPosition.top + containerSizes.windowSizes.height + options.scrollEndThreshold;
+
+    if (scrollPositionBottom < containerSizes.dataContainerSizes.height) {
+      isInScrollBottomArea.current = false;
+    }
+
+    if (
+      scrollPositionBottom >= containerSizes.dataContainerSizes.height &&
+      !isInScrollBottomArea.current
+    ) {
+      const rowScrollEndParam: GridRowScrollEndParams = {
+        api: apiRef,
+        visibleColumns,
+        viewportPageSize: containerSizes.viewportPageSize,
+        virtualRowsCount: containerSizes.virtualRowsCount,
+      };
+      apiRef.current.publishEvent(GRID_ROWS_SCROLL_END, rowScrollEndParam);
+      isInScrollBottomArea.current = true;
+    }
+  }, [options, containerSizes, apiRef, visibleColumns]);
+
+  useGridApiEventHandler(apiRef, GRID_ROWS_SCROLL, handleGridScroll);
+  useGridApiEventHandler(apiRef, GRID_ROWS_SCROLL_END, options.onRowsScrollEnd);
+};

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 '../../root/gridContainerSizesSelector';
 
 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 '../../root/gridContainerSizesSelector';
 import { useLogger } from '../../utils/useLogger';
 import { useGridReducer } from '../core/useGridReducer';
 import { useGridSelector } from '../core/useGridSelector';

packages/grid/_modules_/grid/hooks/features/virtualization/renderingStateSelector.ts

@@ -1,3 +1,11 @@
+import { createSelector } from 'reselect';
+import { GridScrollParams } from '../../../models/params/gridScrollParams';
 import { GridState } from '../core/gridState';
+import { InternalRenderingState } from './renderingState';
 
 export const renderStateSelector = (state: GridState) => state.rendering;
+export const scrollStateSelector = createSelector<
+  GridState,
+  InternalRenderingState,
+  GridScrollParams
+>(renderStateSelector, (renderingState) => renderingState.realScroll);