[XGrid] Make Infinite loading support rowCount

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,24 +65,37 @@ 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]}
-            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}
+              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,42 @@
+import * as React from 'react';
+import clsx from 'clsx';
+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((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}
+    />
+  );
+});
+
+GridSkeletonCell.displayName = 'GridSkeletonCell';

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

@@ -0,0 +1,60 @@
+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((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>
+  );
+});
+GridSkeletonRowCells.displayName = 'GridSkeletonRowCells';

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',
@@ -240,6 +240,25 @@ export const useStyles = makeStyles(
             },
           },
         },
+        '& .MuiDataGrid-skeletonCell': {
+          display: 'block',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          borderBottom: `1px solid ${borderColor}`,
+          paddingTop: theme.spacing(1),
+          paddingBottom: theme.spacing(1),
+          '&::before': {
+            content: '""',
+            display: 'block',
+            width: '100%',
+            height: '100%',
+            '-webkit-animation': `3000ms ${theme.transitions.easing.easeInOut} $skeleton infinite`,
+            animation: `3000ms ${theme.transitions.easing.easeInOut} $skeleton infinite`,
+            background: theme.palette.grey[300],
+            willChange: 'transform-origin, transform, opacity',
+          },
+        },
         '& .MuiDataGrid-cell': {
           display: 'block',
           overflow: 'hidden',
@@ -377,7 +396,50 @@ export const useStyles = makeStyles(
         },
       };
     }
-    return gridStyle;
+    return {
+      ...gridStyle,
+      '@keyframes skeleton': {
+        '0%': {
+          opacity: 0.3,
+          transform: 'scaleX(0)',
+          transformOrigin: 'left',
+        },
+        '20%': {
+          opacity: 1,
+          transform: 'scaleX(1)',
+          transformOrigin: 'left',
+        },
+        '28%': {
+          transform: 'scaleX(1)',
+          transformOrigin: 'right',
+        },
+        '51%': {
+          transform: 'scaleX(0)',
+          transformOrigin: 'right',
+        },
+        '58%': {
+          transform: 'scaleX(0)',
+          transformOrigin: 'right',
+        },
+        '82%': {
+          transform: 'scaleX(1)',
+          transformOrigin: 'right',
+        },
+        '83%': {
+          transform: 'scaleX(1)',
+          transformOrigin: 'left',
+        },
+        '96%': {
+          transform: 'scaleX(0)',
+          transformOrigin: 'left',
+        },
+        '100%': {
+          opacity: 0.3,
+          transform: 'scaleX(0)',
+          transformOrigin: 'left',
+        },
+      },
+    };
   },
   { name: 'MuiDataGrid', defaultTheme },
 );

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

@@ -13,3 +13,4 @@ export const GRID_COLUMN_HEADER_TITLE_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-colu
 export const GRID_DATA_CONTAINER_CSS_CLASS = 'data-container';
 export const GRID_COLUMN_HEADER_DROP_ZONE_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-columnHeader-dropZone`;
 export const GRID_COLUMN_HEADER_DRAGGING_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-columnHeader-dragging`;
+export const GRID_SKELETON_CELL_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-skeletonCell`;

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

@@ -459,3 +459,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);