[DataGrid] Warn when pageSize is not present in rowsPerPageOptions

packages/grid/_modules_/grid/components/GridPagination.tsx

@@ -7,6 +7,7 @@ import { gridPaginationSelector } from '../hooks/features/pagination/gridPaginat
 import { optionsSelector } from '../hooks/utils/optionsSelector';
 import { useGridApiContext } from '../hooks/root/useGridApiContext';
 import { getMuiVersion, createTheme } from '../utils';
+import { GridRootPropsContext } from '../context/GridRootPropsContext';
 
 const defaultTheme = createTheme();
 // Used to hide the Rows per page selector on small devices
@@ -43,6 +44,7 @@ export const GridPagination = React.forwardRef<
 >(function GridPagination(props, ref) {
   const classes = useStyles();
   const apiRef = useGridApiContext();
+  const rootProps = React.useContext(GridRootPropsContext)!;
   const paginationState = useGridSelector(apiRef, gridPaginationSelector);
 
   const lastPage = React.useMemo(
@@ -80,6 +82,26 @@ export const GridPagination = React.forwardRef<
     };
   };
 
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const warnedOnceMissingPageSizeInRowsPerPageOptions = React.useRef(false);
+    if (
+      !warnedOnceMissingPageSizeInRowsPerPageOptions.current &&
+      !rootProps.autoPageSize &&
+      !rootProps.rowsPerPageOptions!.includes(rootProps.pageSize ?? paginationState.pageSize)
+    ) {
+      console.warn(
+        [
+          `Material-UI: The page size \`${
+            rootProps.pageSize ?? paginationState.pageSize
+          }\` is not preset in the \`rowsPerPageOptions\``,
+          `Add it to show the pagination select.`,
+        ].join('\n'),
+      );
+      warnedOnceMissingPageSizeInRowsPerPageOptions.current = true;
+    }
+  }
+
   return (
     // @ts-ignore TODO remove once upgraded v4 support is dropped
     <TablePagination
@@ -94,8 +116,7 @@ export const GridPagination = React.forwardRef<
       count={paginationState.rowCount}
       page={paginationState.page <= lastPage ? paginationState.page : lastPage}
       rowsPerPageOptions={
-        options.rowsPerPageOptions &&
-        options.rowsPerPageOptions.indexOf(paginationState.pageSize) > -1
+        options.rowsPerPageOptions?.includes(paginationState.pageSize)
           ? options.rowsPerPageOptions
           : []
       }

packages/grid/_modules_/grid/hooks/features/core/gridState.ts

@@ -30,7 +30,7 @@ import {
   getInitialGridRenderingState,
   InternalRenderingState,
 } from '../virtualization/renderingState';
-import { GridPaginationState } from '../pagination/gridPaginationState';
+import { getInitialPaginationState, GridPaginationState } from '../pagination/gridPaginationState';
 
 export interface GridState {
   rows: InternalGridRowsState;
@@ -60,12 +60,7 @@ export interface GridState {
 export const getInitialGridState = (): GridState => ({
   rows: getInitialGridRowState(),
   editRows: {},
-  pagination: {
-    page: 0,
-    pageCount: 0,
-    rowCount: 0,
-    pageSize: 100,
-  },
+  pagination: getInitialPaginationState(),
   options: DEFAULT_GRID_OPTIONS,
   isScrolling: false,
   columns: getInitialGridColumnsState(),

packages/grid/_modules_/grid/hooks/features/pagination/gridPaginationState.ts

@@ -4,3 +4,10 @@ export interface GridPaginationState {
   pageCount: number;
   rowCount: number;
 }
+
+export const getInitialPaginationState = (): GridPaginationState => ({
+  page: 0,
+  pageCount: 0,
+  rowCount: 0,
+  pageSize: 100,
+});

packages/grid/_modules_/grid/hooks/features/useGridComponents.tsx

@@ -1,8 +1,72 @@
 import * as React from 'react';
+import MUICheckbox from '@material-ui/core/Checkbox';
 import { GridApiRef } from '../../models/api/gridApiRef';
 import { GridApiRefComponentsProperty } from '../../models/api/gridComponentsApi';
-import { DEFAULT_GRID_SLOTS_COMPONENTS, GridSlotsComponent } from '../../models/gridSlotsComponent';
+import { GridSlotsComponent } from '../../models/gridSlotsComponent';
 import { GridSlotsComponentsProps } from '../../models/gridSlotsComponentsProps';
+import { GridIconSlotsComponent } from '../../models';
+import {
+  GridArrowDownwardIcon,
+  GridArrowUpwardIcon,
+  GridCheckIcon,
+  GridCloseIcon,
+  GridColumnIcon,
+  GridColumnMenu,
+  GridColumnsPanel,
+  GridFilterAltIcon,
+  GridFilterListIcon,
+  GridFilterPanel,
+  GridFooter,
+  GridHeader,
+  GridLoadingOverlay,
+  GridNoRowsOverlay,
+  GridPagination,
+  GridPanel,
+  GridPreferencesPanel,
+  GridSaveAltIcon,
+  GridSeparatorIcon,
+  GridTableRowsIcon,
+  GridTripleDotsVerticalIcon,
+  GridViewHeadlineIcon,
+  GridViewStreamIcon,
+} from '../../components';
+import { GridColumnUnsortedIcon } from '../../components/columnHeaders/GridColumnUnsortedIcon';
+import { ErrorOverlay } from '../../components/ErrorOverlay';
+import { GridNoResultsOverlay } from '../../components/GridNoResultsOverlay';
+
+const DEFAULT_GRID_SLOTS_ICONS: GridIconSlotsComponent = {
+  BooleanCellTrueIcon: GridCheckIcon,
+  BooleanCellFalseIcon: GridCloseIcon,
+  OpenFilterButtonIcon: GridFilterListIcon,
+  ColumnFilteredIcon: GridFilterAltIcon,
+  ColumnSelectorIcon: GridColumnIcon,
+  ColumnMenuIcon: GridTripleDotsVerticalIcon,
+  ColumnUnsortedIcon: GridColumnUnsortedIcon,
+  ColumnSortedAscendingIcon: GridArrowUpwardIcon,
+  ColumnSortedDescendingIcon: GridArrowDownwardIcon,
+  ColumnResizeIcon: GridSeparatorIcon,
+  DensityCompactIcon: GridViewHeadlineIcon,
+  DensityStandardIcon: GridTableRowsIcon,
+  DensityComfortableIcon: GridViewStreamIcon,
+  ExportIcon: GridSaveAltIcon,
+};
+
+export const DEFAULT_GRID_SLOTS_COMPONENTS: GridApiRefComponentsProperty = {
+  ...DEFAULT_GRID_SLOTS_ICONS,
+  Checkbox: MUICheckbox,
+  ColumnMenu: GridColumnMenu,
+  ColumnsPanel: GridColumnsPanel,
+  ErrorOverlay,
+  FilterPanel: GridFilterPanel,
+  Footer: GridFooter,
+  Header: GridHeader,
+  PreferencesPanel: GridPreferencesPanel,
+  LoadingOverlay: GridLoadingOverlay,
+  NoResultsOverlay: GridNoResultsOverlay,
+  NoRowsOverlay: GridNoRowsOverlay,
+  Pagination: GridPagination,
+  Panel: GridPanel,
+};
 
 export const useGridComponents = (
   apiRef: GridApiRef,

packages/grid/_modules_/grid/models/gridSlotsComponent.ts

@@ -1,34 +1,5 @@
 import * as React from 'react';
-import MUICheckbox from '@material-ui/core/Checkbox';
-import { ErrorOverlay } from '../components/ErrorOverlay';
-import { GridFooter } from '../components/GridFooter';
-import { GridHeader } from '../components/GridHeader';
-import { GridPreferencesPanel } from '../components/panel/GridPreferencesPanel';
-import {
-  GridArrowDownwardIcon,
-  GridArrowUpwardIcon,
-  GridColumnIcon,
-  GridFilterAltIcon,
-  GridFilterListIcon,
-  GridSeparatorIcon,
-  GridTableRowsIcon,
-  GridTripleDotsVerticalIcon,
-  GridViewHeadlineIcon,
-  GridViewStreamIcon,
-  GridSaveAltIcon,
-  GridCloseIcon,
-  GridCheckIcon,
-} from '../components/icons/index';
-import { GridLoadingOverlay } from '../components/GridLoadingOverlay';
-import { GridColumnMenu } from '../components/menu/columnMenu/GridColumnMenu';
-import { GridNoRowsOverlay } from '../components/GridNoRowsOverlay';
-import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay';
-import { GridPagination } from '../components/GridPagination';
-import { GridColumnsPanel } from '../components/panel/GridColumnsPanel';
-import { GridFilterPanel } from '../components/panel/filterPanel/GridFilterPanel';
-import { GridPanel } from '../components/panel/GridPanel';
-import { GridColumnUnsortedIcon } from '../components/columnHeaders/GridColumnUnsortedIcon';
-import { GridApiRefComponentsProperty } from './api/gridComponentsApi';
+
 import { GridIconSlotsComponent } from './gridIconSlotsComponent';
 
 /**
@@ -94,37 +65,3 @@ export interface GridSlotsComponent extends GridIconSlotsComponent {
    */
   Panel?: React.JSXElementConstructor<any>;
 }
-
-export const DEFAULT_GRID_SLOTS_ICONS: GridIconSlotsComponent = {
-  BooleanCellTrueIcon: GridCheckIcon,
-  BooleanCellFalseIcon: GridCloseIcon,
-  OpenFilterButtonIcon: GridFilterListIcon,
-  ColumnFilteredIcon: GridFilterAltIcon,
-  ColumnSelectorIcon: GridColumnIcon,
-  ColumnMenuIcon: GridTripleDotsVerticalIcon,
-  ColumnUnsortedIcon: GridColumnUnsortedIcon,
-  ColumnSortedAscendingIcon: GridArrowUpwardIcon,
-  ColumnSortedDescendingIcon: GridArrowDownwardIcon,
-  ColumnResizeIcon: GridSeparatorIcon,
-  DensityCompactIcon: GridViewHeadlineIcon,
-  DensityStandardIcon: GridTableRowsIcon,
-  DensityComfortableIcon: GridViewStreamIcon,
-  ExportIcon: GridSaveAltIcon,
-};
-
-export const DEFAULT_GRID_SLOTS_COMPONENTS: GridApiRefComponentsProperty = {
-  ...DEFAULT_GRID_SLOTS_ICONS,
-  Checkbox: MUICheckbox,
-  ColumnMenu: GridColumnMenu,
-  ColumnsPanel: GridColumnsPanel,
-  ErrorOverlay,
-  FilterPanel: GridFilterPanel,
-  Footer: GridFooter,
-  Header: GridHeader,
-  PreferencesPanel: GridPreferencesPanel,
-  LoadingOverlay: GridLoadingOverlay,
-  NoResultsOverlay: GridNoResultsOverlay,
-  NoRowsOverlay: GridNoRowsOverlay,
-  Pagination: GridPagination,
-  Panel: GridPanel,
-};