[DataGrid] Merge page and pageSize props into paginationModel

docs/data/data-grid/api-object/UseGridApiContext.js

@@ -23,14 +23,20 @@ export default function UseGridApiContext() {
     maxColumns: 6,
   });
 
+  const [paginationModel, setPaginationModel] = React.useState({
+    pageSize: 10,
+    page: 0,
+  });
+
   return (
     <Box sx={{ height: 400, width: '100%' }}>
       <DataGrid
         {...data}
         components={{
           Toolbar: CustomToolbar,
         }}
-        pageSize={10}
+        paginationModel={paginationModel}
+        onPaginationModelChange={setPaginationModel}
       />
     </Box>
   );

docs/data/data-grid/api-object/UseGridApiContext.tsx

@@ -23,14 +23,20 @@ export default function UseGridApiContext() {
     maxColumns: 6,
   });
 
+  const [paginationModel, setPaginationModel] = React.useState({
+    pageSize: 10,
+    page: 0,
+  });
+
   return (
     <Box sx={{ height: 400, width: '100%' }}>
       <DataGrid
         {...data}
         components={{
           Toolbar: CustomToolbar,
         }}
-        pageSize={10}
+        paginationModel={paginationModel}
+        onPaginationModelChange={setPaginationModel}
       />
     </Box>
   );

docs/data/data-grid/api-object/UseGridApiContext.tsx.preview

@@ -3,5 +3,6 @@
   components={{
     Toolbar: CustomToolbar,
   }}
-  pageSize={10}
+  paginationModel={paginationModel}
+  onPaginationModelChange={setPaginationModel}
 />

docs/data/data-grid/api-object/UseGridApiRef.js

@@ -12,6 +12,11 @@ export default function UseGridApiRef() {
     maxColumns: 6,
   });
 
+  const [paginationModel, setPaginationModel] = React.useState({
+    page: 0,
+    pageSize: 10,
+  });
+
   const apiRef = useGridApiRef();
 
   const handleGoToPage1 = () => apiRef.current.setPage(1);
@@ -20,7 +25,13 @@ export default function UseGridApiRef() {
     <Stack spacing={1} sx={{ width: '100%' }} alignItems="flex-start">
       <Button onClick={handleGoToPage1}>Go to page 1</Button>
       <Box sx={{ height: 400, width: '100%' }}>
-        <DataGrid {...data} apiRef={apiRef} pagination pageSize={10} />
+        <DataGrid
+          {...data}
+          apiRef={apiRef}
+          pagination
+          paginationModel={paginationModel}
+          onPaginationModelChange={setPaginationModel}
+        />
       </Box>
     </Stack>
   );

docs/data/data-grid/api-object/UseGridApiRef.tsx

@@ -12,6 +12,11 @@ export default function UseGridApiRef() {
     maxColumns: 6,
   });
 
+  const [paginationModel, setPaginationModel] = React.useState({
+    page: 0,
+    pageSize: 10,
+  });
+
   const apiRef = useGridApiRef();
 
   const handleGoToPage1 = () => apiRef.current.setPage(1);
@@ -20,7 +25,13 @@ export default function UseGridApiRef() {
     <Stack spacing={1} sx={{ width: '100%' }} alignItems="flex-start">
       <Button onClick={handleGoToPage1}>Go to page 1</Button>
       <Box sx={{ height: 400, width: '100%' }}>
-        <DataGrid {...data} apiRef={apiRef} pagination pageSize={10} />
+        <DataGrid
+          {...data}
+          apiRef={apiRef}
+          pagination
+          paginationModel={paginationModel}
+          onPaginationModelChange={setPaginationModel}
+        />
       </Box>
     </Stack>
   );

docs/data/data-grid/api-object/UseGridApiRef.tsx.preview

@@ -1,4 +1,10 @@
 <Button onClick={handleGoToPage1}>Go to page 1</Button>
 <Box sx={{ height: 400, width: '100%' }}>
-  <DataGrid {...data} apiRef={apiRef} pagination pageSize={10} />
+  <DataGrid
+    {...data}
+    apiRef={apiRef}
+    pagination
+    paginationModel={paginationModel}
+    onPaginationModelChange={setPaginationModel}
+  />
 </Box>

docs/data/data-grid/components/CustomPaginationGrid.js

@@ -62,7 +62,10 @@ export default function CustomPaginationGrid() {
           Pagination: CustomPagination,
         }}
         {...data}
-        initialState={{ ...data.initialState, pagination: { pageSize: 25 } }}
+        initialState={{
+          ...data.initialState,
+          pagination: { paginationModel: { pageSize: 25, page: 0 } },
+        }}
       />
     </Box>
   );

docs/data/data-grid/components/CustomPaginationGrid.tsx

@@ -51,7 +51,10 @@ export default function CustomPaginationGrid() {
           Pagination: CustomPagination,
         }}
         {...data}
-        initialState={{ ...data.initialState, pagination: { pageSize: 25 } }}
+        initialState={{
+          ...data.initialState,
+          pagination: { paginationModel: { pageSize: 25, page: 0 } },
+        }}
       />
     </Box>
   );

docs/data/data-grid/components/CustomPaginationGrid.tsx.preview

@@ -4,5 +4,8 @@
     Pagination: CustomPagination,
   }}
   {...data}
-  initialState={{ ...data.initialState, pagination: { pageSize: 25 } }}
+  initialState={{
+    ...data.initialState,
+    pagination: { paginationModel: { pageSize: 25, page: 0 } },
+  }}
 />

docs/data/data-grid/components/components.md

@@ -41,13 +41,13 @@ They can be used as below:
 ```tsx
 function CustomPagination() {
   const apiRef = useGridApiContext();
-  const page = useGridSelector(apiRef, gridPageSelector);
+  const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
   const pageCount = useGridSelector(apiRef, gridPageCountSelector);
 
   return (
     <Pagination
       count={pageCount}
-      page={page + 1}
+      page={paginationModel.page + 1}
       onChange={(event, value) => apiRef.current.setPage(value - 1)}
     />
   );

docs/data/data-grid/events/events.json

@@ -248,16 +248,9 @@
   },
   {
     "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
-    "name": "pageChange",
-    "description": "Fired when the page changes.",
-    "params": "number",
-    "event": "MuiEvent<{}>"
-  },
-  {
-    "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
-    "name": "pageSizeChange",
-    "description": "Fired when the page size changes.",
-    "params": "number",
+    "name": "paginationModelChange",
+    "description": "Fired when the pagination model changes.",
+    "params": "GridPaginationModel",
     "event": "MuiEvent<{}>"
   },
   {

docs/data/data-grid/export/CsvGetRowsToExport.js

@@ -65,13 +65,19 @@ export default function CsvGetRowsToExport() {
     maxColumns: 6,
   });
 
+  const [paginationModel, setPaginationModel] = React.useState({
+    page: 0,
+    pageSize: 10,
+  });
+
   return (
     <div style={{ height: 300, width: '100%' }}>
       <DataGrid
         {...data}
         loading={loading}
         components={{ Toolbar: CustomToolbar }}
-        pageSize={10}
+        paginationModel={paginationModel}
+        onPaginationModelChange={setPaginationModel}
         rowsPerPageOptions={[10]}
         initialState={{
           ...data.initialState,

docs/data/data-grid/export/CsvGetRowsToExport.tsx

@@ -70,13 +70,19 @@ export default function CsvGetRowsToExport() {
     maxColumns: 6,
   });
 
+  const [paginationModel, setPaginationModel] = React.useState({
+    page: 0,
+    pageSize: 10,
+  });
+
   return (
     <div style={{ height: 300, width: '100%' }}>
       <DataGrid
         {...data}
         loading={loading}
         components={{ Toolbar: CustomToolbar }}
-        pageSize={10}
+        paginationModel={paginationModel}
+        onPaginationModelChange={setPaginationModel}
         rowsPerPageOptions={[10]}
         initialState={{
           ...data.initialState,

docs/data/data-grid/overview/DataGridDemo.js

@@ -47,12 +47,18 @@ const rows = [
 ];
 
 export default function DataGridDemo() {
+  const [paginationModel, setPaginationModel] = React.useState({
+    page: 0,
+    pageSize: 5,
+  });
+
   return (
     <Box sx={{ height: 400, width: '100%' }}>
       <DataGrid
         rows={rows}
         columns={columns}
-        pageSize={5}
+        paginationModel={paginationModel}
+        onPaginationModelChange={setPaginationModel}
         rowsPerPageOptions={[5]}
         checkboxSelection
         disableRowSelectionOnClick

docs/data/data-grid/overview/DataGridDemo.tsx

@@ -47,12 +47,18 @@ const rows = [
 ];
 
 export default function DataGridDemo() {
+  const [paginationModel, setPaginationModel] = React.useState({
+    page: 0,
+    pageSize: 5,
+  });
+
   return (
     <Box sx={{ height: 400, width: '100%' }}>
       <DataGrid
         rows={rows}
         columns={columns}
-        pageSize={5}
+        paginationModel={paginationModel}
+        onPaginationModelChange={setPaginationModel}
         rowsPerPageOptions={[5]}
         checkboxSelection
         disableRowSelectionOnClick

docs/data/data-grid/overview/DataGridDemo.tsx.preview

@@ -1,7 +1,8 @@
 <DataGrid
   rows={rows}
   columns={columns}
-  pageSize={5}
+  paginationModel={paginationModel}
+  onPaginationModelChange={setPaginationModel}
   rowsPerPageOptions={[5]}
   checkboxSelection
   disableRowSelectionOnClick

docs/data/data-grid/pagination/CursorPaginationGrid.js

@@ -13,31 +13,37 @@ const { useQuery, ...data } = createFakeServer({}, SERVER_OPTIONS);
 export default function CursorPaginationGrid() {
   const mapPageToNextCursor = React.useRef({});
 
-  const [page, setPage] = React.useState(0);
+  const [paginationModel, setPaginationModel] = React.useState({
+    page: 0,
+    pageSize: PAGE_SIZE,
+  });
 
   const queryOptions = React.useMemo(
     () => ({
-      cursor: mapPageToNextCursor.current[page - 1],
-      pageSize: PAGE_SIZE,
+      cursor: mapPageToNextCursor.current[paginationModel.page - 1],
+      pageSize: paginationModel.pageSize,
     }),
-    [page],
+    [paginationModel],
   );
 
   const { isLoading, rows, pageInfo } = useQuery(queryOptions);
 
-  const handlePageChange = (newPage) => {
+  const handlePaginationModelChange = (newPaginationModel) => {
     // We have the cursor, we can allow the page transition.
-    if (newPage === 0 || mapPageToNextCursor.current[newPage - 1]) {
-      setPage(newPage);
+    if (
+      newPaginationModel.page === 0 ||
+      mapPageToNextCursor.current[newPaginationModel.page - 1]
+    ) {
+      setPaginationModel(newPaginationModel);
     }
   };
 
   React.useEffect(() => {
     if (!isLoading && pageInfo?.nextCursor) {
       // We add nextCursor when available
-      mapPageToNextCursor.current[page] = pageInfo?.nextCursor;
+      mapPageToNextCursor.current[paginationModel.page] = pageInfo?.nextCursor;
     }
-  }, [page, isLoading, pageInfo?.nextCursor]);
+  }, [paginationModel, isLoading, pageInfo?.nextCursor]);
 
   // Some API clients return undefined while loading
   // Following lines are here to prevent `rowCountState` from being undefined during the loading
@@ -59,12 +65,11 @@ export default function CursorPaginationGrid() {
         rows={rows}
         {...data}
         pagination
-        pageSize={PAGE_SIZE}
         rowsPerPageOptions={[PAGE_SIZE]}
         rowCount={rowCountState}
         paginationMode="server"
-        onPageChange={handlePageChange}
-        page={page}
+        onPaginationModelChange={handlePaginationModelChange}
+        paginationModel={paginationModel}
         loading={isLoading}
       />
     </div>