[XGrid] Make Infinite loading support rowCount

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

@@ -44,6 +44,7 @@ import { DataGrid } from '@material-ui/data-grid';
 | <span class="prop-name">hideFooterRowCount</span> | <span class="prop-type">boolean</span> | false | If `true`, the row count in the footer is hidden. |
 | <span class="prop-name">hideFooterSelectedRowCount</span> | <span class="prop-type">boolean</span> | false | If `true`, the selected row count in the footer is hidden. |
 | <span class="prop-name">icons</span> | <span class="prop-type">IconsOptions</span> |   | Set of icons used in the grid. |
+| <span class="prop-name">infniteLoadingMode</span> | <span class="prop-type">GridFeatureMode</span> | 'client' | Infnite loading can be processed on the server or client-side. Set it to 'client' if you would like to handle the infnite loading on the client-side. Set it to 'server' if you would like to handle the infnite loading on the server-side. |
 | <span class="prop-name">isCellEditable</span> | <span class="prop-type">(params: GridCellParams) => boolean</span> |   | Callback fired when a cell is rendered, returns true if the cell is editable. |
 | <span class="prop-name">isRowSelectable</span> | <span class="prop-type">(params: GridRowParams) => boolean</span> |   | Determines if a row can be selected. |
 | <span class="prop-name">loading</span> | <span class="prop-type">boolean</span> |  false | If `true`, a  loading overlay is displayed. |

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

@@ -57,6 +57,7 @@ import { GridApi } from '@material-ui/x-grid';
 | <span class="prop-name">hideColumnMenu</span>                                                     | <span class="prop-type">() =&gt; void</span>                                                                                                                                             | Hides the column menu that is open.                                                                                                                            |
 | <span class="prop-name">hideFilterPanel</span>                                                    | <span class="prop-type">() =&gt; void</span>                                                                                                                                             | Hides the filter panel.                                                                                                                                        |
 | <span class="prop-name">hidePreferences</span>                                                    | <span class="prop-type">() =&gt; void</span>                                                                                                                                             | Hides the preferences panel.                                                                                                                                   |
+| <span class="prop-name">insertRows</span>                                                         | <span class="prop-type">(params: GridInsertRowParams) =&gt; void</span>                                                                                                                  | Inserts a new subset of Rows.                                                                                                                                  |
 | <span class="prop-name">isCellEditable</span>                                                     | <span class="prop-type">(params: GridCellParams) =&gt; boolean</span>                                                                                                                    | Controls if a cell is editable.                                                                                                                                |
 | <span class="prop-name">isColumnVisibleInWindow</span>                                            | <span class="prop-type">(colIndex: number) =&gt; boolean</span>                                                                                                                          | Checks if a column at the index given by `colIndex` is currently visible in the viewport.                                                                      |
 | <span class="prop-name">publishEvent</span>                                                       | <span class="prop-type">(name: string, ...args: any[]) =&gt; void</span>                                                                                                                 | Emits an event.                                                                                                                                                |

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

@@ -48,6 +48,7 @@ import { XGrid } from '@material-ui/x-grid';
 | <span class="prop-name">hideFooterRowCount</span> | <span class="prop-type">boolean</span> | false | If `true`, the row count in the footer is hidden. |
 | <span class="prop-name">hideFooterSelectedRowCount</span> | <span class="prop-type">boolean</span> | false | If `true`, the selected row count in the footer is hidden. |
 | <span class="prop-name">icons</span> | <span class="prop-type">IconsOptions</span> |   | Set of icons used in the grid. |
+| <span class="prop-name">infniteLoadingMode</span> | <span class="prop-type">GridFeatureMode</span> | 'client' | Infnite loading can be processed on the server or client-side. Set it to 'client' if you would like to handle the infnite loading on the client-side. Set it to 'server' if you would like to handle the infnite loading on the server-side. |
 | <span class="prop-name">isCellEditable</span> | <span class="prop-type">(params: GridCellParams) => boolean</span> |   | Callback fired when a cell is rendered, returns true if the cell is editable. |
 | <span class="prop-name">isRowSelectable</span> | <span class="prop-type">(params: GridRowParams) => boolean</span> |   | Determines if a row can be selected. |
 | <span class="prop-name">loading</span> | <span class="prop-type">boolean</span> |  false | If `true`, a  loading overlay is displayed.. |

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

@@ -181,5 +181,13 @@
   {
     "name": "columnVisibilityChange",
     "description": "Fired when a column visibility changes. Called with a GridColumnVisibilityChangeParams object."
+  },
+  {
+    "name": "virtualPageChange",
+    "description": "Fired when the virtual page changes. Called with a GridVirtualPageChangeParams object."
+  },
+  {
+    "name": "fetchRows",
+    "description": "Fired when the virtual page changes. Called with a GridFetchRowsParams object."
   }
 ]

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

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { XGrid } from '@material-ui/x-grid';
+import {
+  useDemoData,
+  getRealData,
+  getCommodityColumns,
+} from '@material-ui/x-grid-data-generator';
+
+async function sleep(duration) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, duration);
+  });
+}
+
+const loadServerRows = async (newRowLength) => {
+  const newData = await getRealData(newRowLength, getCommodityColumns());
+  // Simulate network throttle
+  await sleep(Math.random() * 100 + 100);
+
+  return newData.rows;
+};
+
+export default function InfiniteLoadingGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 6,
+  });
+
+  const handleFetchRows = async (params) => {
+    const newRowsBatch = await loadServerRows(params.viewportPageSize);
+
+    params.api.current.insertRows({
+      startIndex: params.startIndex,
+      pageSize: params.viewportPageSize,
+      newRows: newRowsBatch,
+    });
+  };
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <XGrid
+        {...data}
+        hideFooterPagination
+        rowCount={50}
+        sortingMode="server"
+        filterMode="server"
+        infniteLoadingMode="server"
+        onFetchRows={handleFetchRows}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { GridFetchRowsParams, GridRowData, XGrid } from '@material-ui/x-grid';
+import {
+  useDemoData,
+  getRealData,
+  getCommodityColumns,
+} from '@material-ui/x-grid-data-generator';
+
+async function sleep(duration) {
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, duration);
+  });
+}
+
+const loadServerRows = async (newRowLength: number): Promise<GridRowData[]> => {
+  const newData = await getRealData(newRowLength, getCommodityColumns());
+  // Simulate network throttle
+  await sleep(Math.random() * 100 + 100);
+
+  return newData.rows;
+};
+
+export default function InfiniteLoadingGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 6,
+  });
+
+  const handleFetchRows = async (params: GridFetchRowsParams) => {
+    const newRowsBatch: GridRowData[] = await loadServerRows(
+      params.viewportPageSize,
+    );
+
+    params.api.current.insertRows({
+      startIndex: params.startIndex,
+      pageSize: params.viewportPageSize,
+      newRows: newRowsBatch,
+    });
+  };
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <XGrid
+        {...data}
+        hideFooterPagination
+        rowCount={50}
+        sortingMode="server"
+        filterMode="server"
+        infniteLoadingMode="server"
+        onFetchRows={handleFetchRows}
+      />
+    </div>
+  );
+}

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

@@ -35,6 +35,19 @@ In addition, the area in which the callback provided to the `onRowsScrollEnd` is
 
 {{"demo": "pages/components/data-grid/rows/InfiniteLoadingGrid.js", "bg": "inline", "disableAd": true}}
 
+### Unstable Server-side infinite loading [<span class="pro"></span>](https://material-ui.com/store/items/material-ui-pro/)
+
+By default, infinite loading works on the client-side.
+To switch it to server-side, set `infniteLoadingMode="server"`.
+Then the `rowCount` needs to be set and the number of initially loaded rows needs to be less than the `rowCount` value.
+In addition, you need to handle the `onFetchRows` callback to fetch the rows for the corresponding index.
+Finally, you need to use the `apiRef.current.insertRows()` to tell the DataGrid where to insert the newly fetched rows.
+
+**Note**: in order for the filtering and sorting to work you need to set their modes to `server`.
+You can find out more information about how to do that on the [server-side filter page](/components/data-grid/filtering/#server-side-filter) and on the [server-side sorting page](/components/data-grid/sorting/#server-side-sorting).
+
+{{"demo": "pages/components/data-grid/rows/ServerInfiniteLoadingGrid.js", "bg": "inline", "disableAd": true}}
+
 ### 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/components/GridViewport.tsx

@@ -17,6 +17,7 @@ import { GridEmptyCell } from './cell/GridEmptyCell';
 import { GridRenderingZone } from './GridRenderingZone';
 import { GridRow } from './GridRow';
 import { GridRowCells } from './cell/GridRowCells';
+import { GridSkeletonRowCells } from './cell/GridSkeletonRowCells';
 import { GridStickyContainer } from './GridStickyContainer';
 import {
   gridContainerSizesSelector,
@@ -52,6 +53,7 @@ export const GridViewport: ViewportType = React.forwardRef<HTMLDivElement, {}>(
         renderState.renderContext.firstRowIdx,
         renderState.renderContext.lastRowIdx!,
       );
+
       return renderedRows.map(([id, row], idx) => (
         <GridRow
           className={
@@ -63,25 +65,38 @@ 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}
-            height={rowHeight}
-            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]}
-            cellClassName={options.classes?.cell}
-            getCellClassName={options.getCellClassName}
-          />
+          {id.toString().indexOf('null-') === 0 ? (
+            <GridSkeletonRowCells
+              columns={visibleColumns}
+              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}
+            />
+          ) : (
+            <GridRowCells
+              columns={visibleColumns}
+              row={row}
+              id={id}
+              height={rowHeight}
+              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]}
+              cellClassName={options.classes?.cell}
+              getCellClassName={options.getCellClassName}
+            />
+          )}
           <GridEmptyCell width={renderState.renderContext!.rightEmptyWidth} height={rowHeight} />
         </GridRow>
       ));

packages/grid/_modules_/grid/components/cell/GridSkeletonCell.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import Skeleton from '@material-ui/lab/Skeleton';
+import { GRID_SKELETON_CELL_CSS_CLASS } from '../../constants/cssClassesConstants';
+
+export interface GridSkeletonCellProps {
+  colIndex: number;
+  height: number;
+  rowIndex: number;
+  showRightBorder?: boolean;
+  width: number;
+}
+
+export const GridSkeletonCell = React.memo(function GridSkeletonCell(props: GridSkeletonCellProps) {
+  const { colIndex, height, rowIndex, showRightBorder, width } = props;
+
+  const cellRef = React.useRef<HTMLDivElement>(null);
+  const cssClasses = clsx(GRID_SKELETON_CELL_CSS_CLASS, {
+    'MuiDataGrid-withBorder': showRightBorder,
+  });
+
+  const style = {
+    minWidth: width,
+    maxWidth: width,
+    lineHeight: `${height - 1}px`,
+    minHeight: height,
+    maxHeight: height,
+  };
+
+  return (
+    <div
+      ref={cellRef}
+      className={cssClasses}
+      role="cell"
+      data-rowindex={rowIndex}
+      aria-colindex={colIndex}
+      style={style}
+      tabIndex={-1}
+    >
+      <Skeleton animation="wave" />
+    </div>
+  );
+});

packages/grid/_modules_/grid/components/cell/GridSkeletonRowCells.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { GridColumns } from '../../models/index';
+import { GridApiContext } from '../GridApiContext';
+import { gridDensityRowHeightSelector } from '../../hooks/features/density/densitySelector';
+import { useGridSelector } from '../../hooks/features/core/useGridSelector';
+import { GridSkeletonCell } from './GridSkeletonCell';
+
+interface SkeletonRowCellsProps {
+  columns: GridColumns;
+  extendRowFullWidth: boolean;
+  firstColIdx: number;
+  hasScrollX: boolean;
+  hasScrollY: boolean;
+  lastColIdx: number;
+  rowIndex: number;
+  showCellRightBorder: boolean;
+}
+
+export const GridSkeletonRowCells = React.memo(function GridSkeletonRowCells(
+  props: SkeletonRowCellsProps,
+) {
+  const {
+    columns,
+    firstColIdx,
+    hasScrollX,
+    hasScrollY,
+    lastColIdx,
+    rowIndex,
+    showCellRightBorder,
+  } = props;
+  const apiRef = React.useContext(GridApiContext);
+  const rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
+
+  const skeletonCellsProps = columns.slice(firstColIdx, lastColIdx + 1).map((column, colIdx) => {
+    const colIndex = firstColIdx + colIdx;
+    const isLastColumn = colIndex === columns.length - 1;
+    const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
+    const showRightBorder = !isLastColumn
+      ? showCellRightBorder
+      : !removeLastBorderRight && !props.extendRowFullWidth;
+
+    const skeletonCellProps = {
+      field: column.field,
+      width: column.width!,
+      height: rowHeight,
+      showRightBorder,
+      rowIndex,
+      colIndex,
+    };
+
+    return skeletonCellProps;
+  });
+
+  return (
+    <React.Fragment>
+      {skeletonCellsProps.map((skeletonCellProps) => (
+        <GridSkeletonCell key={skeletonCellProps.field} {...skeletonCellProps} />
+      ))}
+    </React.Fragment>
+  );
+});

packages/grid/_modules_/grid/components/cell/index.ts

@@ -2,3 +2,5 @@ export * from './GridCell';
 export * from './GridEditInputCell';
 export * from './GridEmptyCell';
 export * from './GridRowCells';
+export * from './GridSkeletonRowCells';
+export * from './GridSkeletonCell';

packages/grid/_modules_/grid/components/containers/GridRootStyles.ts

@@ -84,7 +84,7 @@ export const useStyles = makeStyles(
           alignItems: 'center',
           overflow: 'hidden',
         },
-        '& .MuiDataGrid-columnHeader, & .MuiDataGrid-cell': {
+        '& .MuiDataGrid-columnHeader, & .MuiDataGrid-cell, & .MuiDataGrid-skeletonCell': {
           WebkitTapHighlightColor: 'transparent',
           lineHeight: null,
           padding: '0 10px',
@@ -244,7 +244,7 @@ export const useStyles = makeStyles(
             },
           },
         },
-        '& .MuiDataGrid-cell': {
+        '& .MuiDataGrid-cell, & .MuiDataGrid-skeletonCell': {
           display: 'block',
           overflow: 'hidden',
           textOverflow: 'ellipsis',

packages/grid/_modules_/grid/constants/cssClassesConstants.ts

@@ -12,3 +12,4 @@ export const GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS = `${GRID_CSS_CLAS
 export const GRID_COLUMN_HEADER_TITLE_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-columnHeaderTitleContainer`;
 export const GRID_COLUMN_HEADER_DROP_ZONE_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-columnHeaderDropZone`;
 export const GRID_COLUMN_HEADER_DRAGGING_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-${GRID_COLUMN_HEADER_CSS_CLASS_SUFFIX}--dragging`;
+export const GRID_SKELETON_CELL_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-skeletonCell`;

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

@@ -452,3 +452,15 @@ 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';
+
+/**
+ * Fired when the virtual page changes. Called with a [[GridFetchRowsParams]] object.
+ * @event
+ */
+export const GRID_FETCH_ROWS = 'fetchRows';