[XGrid] Add onViewportRowsChange prop

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

@@ -97,6 +97,7 @@ import { XGrid } from '@material-ui/x-grid';
 | <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">(model: GridSelectionModel) => void</span> |   | Callback fired when the selection state of one or multiple rows changes. |
 | <span class="prop-name">onSortModelChange</span> | <span class="prop-type">(model: GridSortModel) => void</span> |   | Callback fired when the sort model changes before a column is sorted. |
+| <span class="prop-name">onViewportRowsChange</span> | <span class="prop-type">(param: GridViewportRowsChange) => void</span> |   | Callback fired when the virtual page changes. |
 | <span class="prop-name">page</span> | <span class="prop-type">number</span> | 1   |  Set the current page. |
 | <span class="prop-name">pageSize</span> | <span class="prop-type">number</span> | 100 | Set the number of rows in one page. |
 | <span class="prop-name">pagination</span> | <span class="prop-type">boolean</span> | false | If `true`, pagination is enabled. |

docs/src/pages/components/data-grid/events/events.json

@@ -167,5 +167,9 @@
   {
     "name": "columnVisibilityChange",
     "description": "Fired when a column visibility changes. Called with a GridColumnVisibilityChangeParams object."
+  },
+  {
+    "name": "viewportRowsChange",
+    "description": "Fired when the viewport rows change. Called with a GridViewportRowsChange object."
   }
 ]

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

@@ -440,3 +440,9 @@ export const GRID_STATE_CHANGE = 'stateChange';
  * @event
  */
 export const GRID_COLUMN_VISIBILITY_CHANGE = 'columnVisibilityChange';
+
+/**
+ * Fired when the viewport rows change. Called with a [[GridViewportRowsChange]] object.
+ * @event
+ */
+export const GRID_VIEWPORT_ROWS_CHANGE = 'viewportRowsChange';

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

@@ -2,50 +2,118 @@ 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 {
+  GRID_ROWS_SCROLL,
+  GRID_ROWS_SCROLL_END,
+  GRID_VIEWPORT_ROWS_CHANGE,
+} from '../../../constants/eventsConstants';
 import { gridContainerSizesSelector } from '../../root/gridContainerSizesSelector';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../root/useGridApiEventHandler';
 import { GridRowScrollEndParams } from '../../../models/params/gridRowScrollEndParams';
 import { visibleGridColumnsSelector } from '../columns/gridColumnsSelector';
 import { GridComponentProps } from '../../../GridComponentProps';
+import { GridScrollParams } from '../../../models/params/gridScrollParams';
+import { GridViewportRowsChange } from '../../../models/params/gridViewportRowsChange';
 
 export const useGridInfiniteLoader = (
   apiRef: GridApiRef,
-  props: Pick<GridComponentProps, 'onRowsScrollEnd'>,
+  props: Pick<GridComponentProps, 'onRowsScrollEnd' | 'onViewportRowsChange'>,
 ): void => {
   const options = useGridSelector(apiRef, optionsSelector);
   const containerSizes = useGridSelector(apiRef, gridContainerSizesSelector);
   const visibleColumns = useGridSelector(apiRef, visibleGridColumnsSelector);
   const isInScrollBottomArea = React.useRef<boolean>(false);
+  const totalRowsScrolledHeight = React.useRef<number>(0);
+  const lastScrollPosition = React.useRef<GridScrollParams>({ top: 0, left: 0 });
+  const firstRowIndex = React.useRef<number>(0);
+
+  const handleRowsScrollEnd = React.useCallback(
+    (scrollPosition) => {
+      if (!containerSizes) {
+        return;
+      }
+
+      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;
+      }
+    },
+    [apiRef, options, visibleColumns, containerSizes],
+  );
+
+  const handleViewportRowsChange = React.useCallback(
+    (scrollPosition) => {
+      if (!containerSizes) {
+        return;
+      }
+      const firstPartialRow =
+        containerSizes.windowSizes.height - containerSizes.viewportPageSize * options.rowHeight;
+
+      if (
+        lastScrollPosition.current.top < scrollPosition.top &&
+        firstPartialRow + totalRowsScrolledHeight.current + 1 <= scrollPosition.top
+      ) {
+        totalRowsScrolledHeight.current += options.rowHeight;
+        firstRowIndex.current += 1;
+        const viewportRowsChangeParams: GridViewportRowsChange = {
+          firstRowIndex: firstRowIndex.current,
+          lastRowIndex: containerSizes.viewportPageSize + firstRowIndex.current,
+          api: apiRef,
+        };
+        apiRef.current.publishEvent(GRID_VIEWPORT_ROWS_CHANGE, viewportRowsChangeParams);
+      }
+
+      if (
+        lastScrollPosition.current.top > scrollPosition.top &&
+        totalRowsScrolledHeight.current - firstPartialRow - 1 >= scrollPosition.top
+      ) {
+        totalRowsScrolledHeight.current -= options.rowHeight;
+        firstRowIndex.current -= 1;
+        const viewportRowsChangeParams: GridViewportRowsChange = {
+          firstRowIndex: firstRowIndex.current,
+          lastRowIndex: containerSizes.viewportPageSize + firstRowIndex.current,
+          api: apiRef,
+        };
+        apiRef.current.publishEvent(GRID_VIEWPORT_ROWS_CHANGE, viewportRowsChangeParams);
+      }
+
+      lastScrollPosition.current = scrollPosition;
+    },
+    [apiRef, options, containerSizes],
+  );
 
   const handleGridScroll = React.useCallback(() => {
-    if (!containerSizes) {
+    if (!props.onRowsScrollEnd && !props.onViewportRowsChange) {
       return;
     }
 
     const scrollPosition = apiRef.current.getScrollPosition();
-    const scrollPositionBottom =
-      scrollPosition.top + containerSizes.windowSizes.height + options.scrollEndThreshold;
 
-    if (scrollPositionBottom < containerSizes.dataContainerSizes.height) {
-      isInScrollBottomArea.current = false;
+    if (props.onViewportRowsChange) {
+      handleViewportRowsChange(scrollPosition);
     }
-
-    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;
+    if (props.onRowsScrollEnd) {
+      handleRowsScrollEnd(scrollPosition);
     }
-  }, [options, containerSizes, apiRef, visibleColumns]);
+  }, [props, apiRef, handleViewportRowsChange, handleRowsScrollEnd]);
 
   useGridApiEventHandler(apiRef, GRID_ROWS_SCROLL, handleGridScroll);
   useGridApiOptionHandler(apiRef, GRID_ROWS_SCROLL_END, props.onRowsScrollEnd);
+  useGridApiOptionHandler(apiRef, GRID_VIEWPORT_ROWS_CHANGE, props.onViewportRowsChange);
 };

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

@@ -25,6 +25,7 @@ import { GridResizeParams } from './params/gridResizeParams';
 import { GridColumnResizeParams } from './params/gridColumnResizeParams';
 import { GridColumnVisibilityChangeParams } from './params/gridColumnVisibilityChangeParams';
 import { GridClasses } from './gridClasses';
+import { GridViewportRowsChange } from './params/gridViewportRowsChange';
 
 export type MuiEvent<E> = (E | React.SyntheticEvent) & {
   defaultMuiPrevented?: boolean;
@@ -413,6 +414,10 @@ export interface GridOptions {
    * Callback fired when the state of the grid is updated.
    */
   onStateChange?: (params: any) => void;
+  /**
+   * Callback fired when the virtual page changes.
+   */
+  onViewportRowsChange?: (params: GridViewportRowsChange) => void;
   /**
    * Set the current page.
    * @default 1

packages/grid/_modules_/grid/models/params/gridViewportRowsChange.ts

@@ -0,0 +1,17 @@
+/**
+ * Object passed as parameter of the virtual rows change event.
+ */
+export interface GridViewportRowsChange {
+  /**
+   * The index of the first row in the viewport.
+   */
+  firstRowIndex: number;
+  /**
+   * The index of the last row in the viewport.
+   */
+  lastRowIndex: number;
+  /**
+   * Api that let you manipulate the grid.
+   */
+  api: any;
+}

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

@@ -27,6 +27,7 @@ export type DataGridProps = Omit<
   | 'licenseStatus'
   | 'options'
   | 'onRowsScrollEnd'
+  | 'onViewportRowsChange'
   | 'pagination'
   | 'scrollEndThreshold'
   | 'selectionModel'
@@ -39,6 +40,7 @@ export type DataGridProps = Omit<
   disableMultipleColumnsSorting?: true;
   disableMultipleSelection?: true;
   onRowsScrollEnd?: undefined;
+  onViewportRowsChange?: undefined;
   selectionModel?: GridRowId | GridRowId[];
   pagination?: true;
 };
@@ -208,6 +210,19 @@ DataGrid.propTypes = {
     }
     return null;
   }),
+  onViewportRowsChange: chainPropTypes(PropTypes.any, (props: any) => {
+    if (props.onViewportRowsChange != null) {
+      return new Error(
+        [
+          `Material-UI: \`onViewportRowsChange\` is not a valid prop.`,
+          'onViewportRowsChange is not available in the MIT version.',
+          '',
+          'You need to upgrade to the XGrid component to unlock this feature.',
+        ].join('\n'),
+      );
+    }
+    return null;
+  }),
   pageSize: chainPropTypes(PropTypes.number, (props: any) => {
     if (props.pageSize && props.pageSize > MAX_PAGE_SIZE) {
       return new Error(

packages/grid/x-grid/src/tests/events.XGrid.test.tsx

@@ -20,6 +20,7 @@ import {
 } from '@material-ui/x-grid';
 import { getCell, getColumnHeaderCell, getRow } from 'test/utils/helperFn';
 import { spy } from 'sinon';
+import { useData } from 'packages/storybook/src/hooks/useData';
 
 describe('<XGrid /> - Events Params', () => {
   // TODO v5: replace with createClientRender
@@ -72,6 +73,16 @@ describe('<XGrid /> - Events Params', () => {
     );
   };
 
+  const TestVirtualization = (props: Partial<XGridProps>) => {
+    apiRef = useGridApiRef();
+    const data = useData(50, 10);
+    return (
+      <div style={{ width: 300, height: 300 }}>
+        <XGrid rows={data.rows} columns={data.columns} apiRef={apiRef} {...props} />
+      </div>
+    );
+  };
+
   describe('columnHeaderParams', () => {
     it('should include the correct params', () => {
       let eventArgs: { params: GridColumnHeaderParams; event: React.MouseEvent } | null = null;
@@ -236,16 +247,17 @@ describe('<XGrid /> - Events Params', () => {
       expect(handleSelection.callCount).to.equal(0);
     });
   });
+
   it('publishing GRID_ROWS_SCROLL should call onRowsScrollEnd callback', () => {
-    const handleOnRowsScrollEnd = spy();
+    const handleRowsScrollEnd = spy();
 
-    render(<TestEvents onRowsScrollEnd={handleOnRowsScrollEnd} />);
+    render(<TestEvents onRowsScrollEnd={handleRowsScrollEnd} />);
     apiRef.current.publishEvent(GRID_ROWS_SCROLL);
-    expect(handleOnRowsScrollEnd.callCount).to.equal(1);
+    expect(handleRowsScrollEnd.callCount).to.equal(1);
   });
 
   it('call onRowsScrollEnd when viewport scroll reaches the bottom', () => {
-    const handleOnRowsScrollEnd = spy();
+    const handleRowsScrollEnd = spy();
     const data = {
       rows: [
         {
@@ -278,13 +290,37 @@ describe('<XGrid /> - Events Params', () => {
 
     const { container } = render(
       <div style={{ width: 300, height: 300 }}>
-        <XGrid columns={data.columns} rows={data.rows} onRowsScrollEnd={handleOnRowsScrollEnd} />
+        <XGrid columns={data.columns} rows={data.rows} onRowsScrollEnd={handleRowsScrollEnd} />
       </div>,
     );
     const gridWindow = container.querySelector('.MuiDataGrid-window');
     // arbitrary number to make sure that the bottom of the grid window is reached.
     gridWindow.scrollTop = 12345;
     gridWindow.dispatchEvent(new Event('scroll'));
-    expect(handleOnRowsScrollEnd.callCount).to.equal(1);
+    expect(handleRowsScrollEnd.callCount).to.equal(1);
+  });
+
+  it('call onViewportRowsChange when the viewport rows change', () => {
+    const handleViewportRowsChange = spy();
+    const { container } = render(
+      <div style={{ width: 300, height: 300 }}>
+        <TestVirtualization rowHeight={40} onViewportRowsChange={handleViewportRowsChange} />
+      </div>,
+    );
+    const gridWindow = container.querySelector('.MuiDataGrid-window');
+    const pageSize = apiRef.current.getState().containerSizes.viewportPageSize;
+    // scroll 1 rows.
+    gridWindow.scrollTop = 40;
+    gridWindow.dispatchEvent(new Event('scroll'));
+    expect(handleViewportRowsChange.callCount).to.equal(1);
+    expect(handleViewportRowsChange.lastCall.args[0].firstRowIndex).to.equal(1);
+    expect(handleViewportRowsChange.lastCall.args[0].lastRowIndex).to.equal(pageSize + 1);
+
+    // scroll 2 rows.
+    gridWindow.scrollTop = 80;
+    gridWindow.dispatchEvent(new Event('scroll'));
+    expect(handleViewportRowsChange.callCount).to.equal(2);
+    expect(handleViewportRowsChange.lastCall.args[0].firstRowIndex).to.equal(2);
+    expect(handleViewportRowsChange.lastCall.args[0].lastRowIndex).to.equal(pageSize + 2);
   });
 });