[XGrid] Make Infinite loading support rowCount

packages/grid/_modules_/grid/components/GridRow.tsx

@@ -30,6 +30,7 @@ export const GridRow = (props: GridRowProps) => {
   const apiRef = React.useContext(GridApiContext);
   const rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
   const options = useGridSelector(apiRef, optionsSelector);
+  const rowId = id || `key-${Math.floor(Math.random() * 1000)}`;
 
   const publish = React.useCallback(
     (eventName: string) => (event: React.MouseEvent) => {
@@ -69,8 +70,8 @@ export const GridRow = (props: GridRowProps) => {
 
   return (
     <div
-      key={id}
-      data-id={id}
+      key={rowId}
+      data-id={rowId}
       data-rowindex={rowIndex}
       role="row"
       className={cssClasses}

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

@@ -52,6 +52,7 @@ export const GridViewport: ViewportType = React.forwardRef<HTMLDivElement, {}>(
         renderState.renderContext.firstRowIdx,
         renderState.renderContext.lastRowIdx!,
       );
+
       return renderedRows.map(([id, row], idx) => (
         <GridRow
           className={
@@ -63,22 +64,26 @@ export const GridViewport: ViewportType = React.forwardRef<HTMLDivElement, {}>(
           rowIndex={renderState.renderContext!.firstRowIdx! + idx}
         >
           <GridEmptyCell width={renderState.renderContext!.leftEmptyWidth} height={rowHeight} />
-          <GridRowCells
-            columns={visibleColumns}
-            row={row}
-            id={id}
-            firstColIdx={renderState.renderContext!.firstColIdx!}
-            lastColIdx={renderState.renderContext!.lastColIdx!}
-            hasScrollX={scrollBarState.hasScrollX}
-            hasScrollY={scrollBarState.hasScrollY}
-            showCellRightBorder={!!options.showCellRightBorder}
-            extendRowFullWidth={!options.disableExtendRowFullWidth}
-            rowIndex={renderState.renderContext!.firstRowIdx! + idx}
-            cellFocus={cellFocus}
-            cellTabIndex={cellTabIndex}
-            isSelected={selectionState[id] !== undefined}
-            editRowState={editRowsState[id]}
-          />
+          {id.toString().indexOf('null-') === 0 ? (
+            <div>EMPTY</div>
+          ) : (
+            <GridRowCells
+              columns={visibleColumns}
+              row={row}
+              id={id}
+              firstColIdx={renderState.renderContext!.firstColIdx!}
+              lastColIdx={renderState.renderContext!.lastColIdx!}
+              hasScrollX={scrollBarState.hasScrollX}
+              hasScrollY={scrollBarState.hasScrollY}
+              showCellRightBorder={!!options.showCellRightBorder}
+              extendRowFullWidth={!options.disableExtendRowFullWidth}
+              rowIndex={renderState.renderContext!.firstRowIdx! + idx}
+              cellFocus={cellFocus}
+              cellTabIndex={cellTabIndex}
+              isSelected={selectionState[id] !== undefined}
+              editRowState={editRowsState[id]}
+            />
+          )}
           <GridEmptyCell width={renderState.renderContext!.rightEmptyWidth} height={rowHeight} />
         </GridRow>
       ));

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

@@ -89,3 +89,9 @@ export const GRID_STATE_CHANGE = 'stateChange';
  * @event
  */
 export const GRID_COLUMN_VISIBILITY_CHANGE = 'columnVisibilityChange';
+
+/**
+ * Fired when the virtual page changes. Called with a [[GridVirtualPageChangeParams]] object.
+ * @event
+ */
+export const GRID_VIRTUAL_PAGE_CHANGE = 'virtualPageChange';

packages/grid/_modules_/grid/hooks/features/export/seralizers/csvSeraliser.ts

@@ -34,7 +34,7 @@ export function buildCSV(
   selectedRows: Record<string, GridRowId>,
   getCellValue: (id: GridRowId, field: string) => GridCellValue,
 ): string {
-  let rowIds = [...rows.keys()];
+  let rowIds = [...rows.keys()].filter((id) => id.toString().indexOf('null-') !== 0);
   const selectedRowIds = Object.keys(selectedRows);
 
   if (selectedRowIds.length) {

packages/grid/_modules_/grid/hooks/features/filter/useGridFilter.ts

@@ -92,6 +92,10 @@ export const useGridFilter = (apiRef: GridApiRef, rowsProp: GridRowsProp): void
         const rows = sortedGridRowsSelector(state);
 
         rows.forEach((row: GridRowModel, id: GridRowId) => {
+          if (id.toString().indexOf('null-') === 0) {
+            return;
+          }
+
           const params = apiRef.current.getCellParams(id, filterItem.columnField!);
 
           const isShown = applyFilterOnRow(params);

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

@@ -2,24 +2,34 @@ 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_VIRTUAL_PAGE_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 { GridVirtualPageChangeParams } from '../../../models/params/gridVirtualPageChangeParams';
+import { useLogger } from '../../utils/useLogger';
 
 export const useGridInfiniteLoader = (apiRef: GridApiRef): void => {
+  const logger = useLogger('useGridInfiniteLoader');
   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(() => {
+    logger.debug('Checking if scroll position reached bottom');
+
     if (!containerSizes) {
       return;
     }
 
     const scrollPosition = apiRef.current.getScrollPosition();
+
     const scrollPositionBottom =
       scrollPosition.top + containerSizes.windowSizes.height + options.scrollEndThreshold;
 
@@ -29,7 +39,8 @@ export const useGridInfiniteLoader = (apiRef: GridApiRef): void => {
 
     if (
       scrollPositionBottom >= containerSizes.dataContainerSizes.height &&
-      !isInScrollBottomArea.current
+      !isInScrollBottomArea.current &&
+      !options.rowCount
     ) {
       const rowScrollEndParam: GridRowScrollEndParams = {
         api: apiRef,
@@ -40,8 +51,44 @@ export const useGridInfiniteLoader = (apiRef: GridApiRef): void => {
       apiRef.current.publishEvent(GRID_ROWS_SCROLL_END, rowScrollEndParam);
       isInScrollBottomArea.current = true;
     }
-  }, [options, containerSizes, apiRef, visibleColumns]);
+  }, [logger, options, containerSizes, apiRef, visibleColumns]);
+
+  const handleGridVirtualPageChange = React.useCallback(
+    (params: GridVirtualPageChangeParams) => {
+      logger.debug('Virtual page changed');
+
+      if (!containerSizes || !options.loadRows) {
+        return;
+      }
+
+      const state = apiRef.current.getState();
+      const newRowsBatchStartIndex = (params.nextPage + 1) * containerSizes.viewportPageSize;
+      const toBeLoadedRange: any = [...state.rows.allRows].splice(
+        newRowsBatchStartIndex,
+        containerSizes.viewportPageSize,
+      );
+
+      if (!toBeLoadedRange.includes(null)) {
+        return;
+      }
+
+      const newRowsBatch = options.loadRows({
+        startIndex: newRowsBatchStartIndex,
+        viewportPageSize: containerSizes.viewportPageSize,
+      });
+
+      if (newRowsBatch.length) {
+        apiRef.current.loadRows(
+          newRowsBatchStartIndex,
+          containerSizes.viewportPageSize,
+          newRowsBatch,
+        );
+      }
+    },
+    [logger, options, containerSizes, apiRef],
+  );
 
   useGridApiEventHandler(apiRef, GRID_ROWS_SCROLL, handleGridScroll);
+  useGridApiEventHandler(apiRef, GRID_VIRTUAL_PAGE_CHANGE, handleGridVirtualPageChange);
   useGridApiOptionHandler(apiRef, GRID_ROWS_SCROLL_END, options.onRowsScrollEnd);
 };

packages/grid/_modules_/grid/hooks/features/rows/gridRowsState.ts

@@ -6,8 +6,10 @@ export interface InternalGridRowsState {
   totalRowCount: number;
 }
 
-export const getInitialGridRowState: () => InternalGridRowsState = () => ({
+export const getInitialGridRowState: (rowCount?: number) => InternalGridRowsState = (
+  rowsCount = 0,
+) => ({
   idRowsLookup: {},
-  allRows: [],
+  allRows: new Array(rowsCount).fill(null),
   totalRowCount: 0,
 });

packages/grid/_modules_/grid/hooks/features/rows/useGridRows.ts

@@ -36,13 +36,13 @@ export function convertGridRowsPropToState(
   rowIdGetter?: GridRowIdGetter,
 ): InternalGridRowsState {
   const state: InternalGridRowsState = {
-    ...getInitialGridRowState(),
+    ...getInitialGridRowState(totalRowCount),
     totalRowCount: totalRowCount && totalRowCount > rows.length ? totalRowCount : rows.length,
   };
 
-  rows.forEach((rowData) => {
+  rows.forEach((rowData, index) => {
     const id = getGridRowId(rowData, rowIdGetter);
-    state.allRows.push(id);
+    state.allRows[index] = id;
     state.idRowsLookup[id] = rowData;
   });
 
@@ -114,6 +114,36 @@ export const useGridRows = (
     [apiRef],
   );
 
+  const loadRows = React.useCallback(
+    (startIndex: number, pageSize: number, newRows: GridRowModel[]) => {
+      logger.debug(`Loading rows from index:${startIndex} to index:${startIndex + pageSize}`);
+
+      const newRowsToState = convertGridRowsPropToState(newRows, newRows.length, getRowIdProp);
+
+      setGridState((state) => {
+        const allRowsUpdated = state.rows.allRows.map((row, index) => {
+          if (index >= startIndex && index < startIndex + pageSize) {
+            return newRowsToState.allRows[index - startIndex];
+          }
+          return row;
+        });
+
+        internalRowsState.current = {
+          allRows: allRowsUpdated,
+          idRowsLookup: { ...state.rows.idRowsLookup, ...newRowsToState.idRowsLookup },
+          totalRowCount: state.rows.totalRowCount,
+        };
+
+        return { ...state, rows: internalRowsState.current };
+      });
+
+      forceUpdate();
+      apiRef.current.updateViewport();
+      apiRef.current.applySorting();
+    },
+    [logger, apiRef, getRowIdProp, setGridState, forceUpdate],
+  );
+
   const setRows = React.useCallback(
     (allNewRows: GridRowModel[]) => {
       logger.debug(`updating all rows, new length ${allNewRows.length}`);
@@ -222,6 +252,7 @@ export const useGridRows = (
     getAllRowIds,
     setRows,
     updateRows,
+    loadRows,
   };
   useGridApiMethod(apiRef, rowApi, 'GridRowApi');
 };

packages/grid/_modules_/grid/hooks/features/sorting/gridSortingSelector.ts

@@ -33,7 +33,8 @@ export const sortedGridRowsSelector = createSelector<
   (sortedIds: GridRowId[], idRowsLookup: GridRowsLookup) => {
     const map = new Map<GridRowId, GridRowModel>();
     sortedIds.forEach((id) => {
-      map.set(id, idRowsLookup[id]);
+      const normalizeId = id !== null ? id : `null-${Math.floor(Math.random() * 1000)}`;
+      map.set(normalizeId, idRowsLookup[id]);
     });
     return map;
   },

packages/grid/_modules_/grid/hooks/features/sorting/useGridSorting.ts

@@ -174,14 +174,21 @@ export const useGridSorting = (apiRef: GridApiRef, rowsProp: GridRowsProp) => {
     if (sortModel.length > 0) {
       const comparatorList = buildComparatorList(sortModel);
       logger.debug('Sorting rows with ', sortModel);
+      const rowIdsLength = rowIds.length;
       sorted = rowIds
+        .filter((id) => id !== null)
         .map((id) => {
           return comparatorList.map((colComparator) => {
             return getSortCellParams(id, colComparator.field);
           });
         })
         .sort(comparatorListAggregate(comparatorList))
         .map((field) => field[0].id);
+
+      if (rowIdsLength !== sorted.length) {
+        const NullArray = new Array(rowIdsLength - sorted.length).fill(null);
+        sorted = sorted.concat(NullArray);
+      }
     }
 
     setGridState((oldState) => {

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

@@ -3,6 +3,7 @@ import {
   GRID_RESIZE,
   GRID_NATIVE_SCROLL,
   GRID_ROWS_SCROLL,
+  GRID_VIRTUAL_PAGE_CHANGE,
 } from '../../../constants/eventsConstants';
 import { GridApiRef } from '../../../models/api/gridApiRef';
 import { GridVirtualizationApi } from '../../../models/api/gridVirtualizationApi';
@@ -154,6 +155,12 @@ export const useGridVirtualRows = (
       if (containerProps.isVirtualized && page !== nextPage) {
         setRenderingState({ virtualPage: nextPage });
         logger.debug(`Changing page from ${page} to ${nextPage}`);
+
+        apiRef.current.publishEvent(GRID_VIRTUAL_PAGE_CHANGE, {
+          currentPage: page,
+          nextPage,
+          api: apiRef,
+        });
         requireRerender = true;
       } else {
         if (!containerProps.isVirtualized && page > 0) {

packages/grid/_modules_/grid/models/api/gridRowApi.ts

@@ -42,4 +42,11 @@ export interface GridRowApi {
    * @param id
    */
   getRowFromId: (id: GridRowId) => GridRowModel;
+  /**
+   * Loads a new subset of Rows.
+   * @param startIndex
+   * @param pageSize
+   * @param rows
+   */
+  loadRows: (startIndex: number, pageSize: number, rows: GridRowModel[]) => void;
 }

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

@@ -171,6 +171,10 @@ export interface GridOptions {
    * Callback fired when a cell is rendered, returns true if the cell is editable.
    */
   isCellEditable?: (params: GridCellParams) => boolean;
+  /**
+   *
+   */
+  loadRows?: (params) => any;
   /**
    * Set the locale text of the grid.
    * 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.

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

@@ -0,0 +1,17 @@
+/**
+ * Object passed as parameter of the virtual page change event.
+ */
+export interface GridVirtualPageChangeParams {
+  /**
+   * The current page.
+   */
+  currentPage: number;
+  /**
+   * The next page.
+   */
+  nextPage: number;
+  /**
+   * Api that let you manipulate the grid.
+   */
+  api: any;
+}