[data grid][docs] Clarify enabling pagination (mui#13350)

Signed-off-by: Olivier Tassinari <olivier.tassinari@gmail.com>
Co-authored-by: Sycamore <71297412+samuelsycamore@users.noreply.github.com>

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

@@ -127,12 +127,10 @@ export default function PageSizeAutoPremium() {
   return (
     <div style={{ height: 320, width: '100%' }}>
       <DataGridPremium
+        pagination
         rows={rows}
         columns={columns}
-        slots={{
-          toolbar: CustomToolbar,
-        }}
-        pagination
+        slots={{ toolbar: CustomToolbar }}
         autoPageSize
       />
     </div>

docs/data/data-grid/pagination/PageSizeAutoPremium.tsx

@@ -129,12 +129,10 @@ export default function PageSizeAutoPremium() {
   return (
     <div style={{ height: 320, width: '100%' }}>
       <DataGridPremium
+        pagination
         rows={rows}
         columns={columns}
-        slots={{
-          toolbar: CustomToolbar,
-        }}
-        pagination
+        slots={{ toolbar: CustomToolbar }}
         autoPageSize
       />
     </div>

docs/data/data-grid/pagination/PageSizeAutoPremium.tsx.preview

@@ -1,9 +1,7 @@
 <DataGridPremium
+  pagination
   rows={rows}
   columns={columns}
-  slots={{
-    toolbar: CustomToolbar,
-  }}
-  pagination
+  slots={{ toolbar: CustomToolbar }}
   autoPageSize
 />

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+export default function PaginationCommunityNoSnap() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 500,
+    maxColumns: 6,
+  });
+
+  return (
+    <div style={{ height: 300, width: '100%' }}>
+      <DataGrid {...data} />
+    </div>
+  );
+}

docs/data/data-grid/pagination/PaginationCommunityNoSnap.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+export default function PaginationCommunityNoSnap() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 500,
+    maxColumns: 6,
+  });
+
+  return (
+    <div style={{ height: 300, width: '100%' }}>
+      <DataGrid {...data} />
+    </div>
+  );
+}

docs/data/data-grid/pagination/PaginationCommunityNoSnap.tsx.preview

@@ -0,0 +1 @@
+<DataGrid {...data} />

docs/data/data-grid/pagination/pagination.md

@@ -2,6 +2,27 @@
 
 <p class="description">Easily paginate your rows and only fetch what you need.</p>
 
+## Enabling pagination
+
+The default pagination behavior depends on your plan:
+
+:::info
+Exported CSV and Excel files include all data and disregard pagination by default.
+To apply pagination to exported files, review the available [row selectors](/x/react-data-grid/export/#exported-rows).
+:::
+
+### Community plan
+
+For the Community Data Grid, pagination is enabled by default and cannot be disabled.
+
+{{"demo": "PaginationCommunityNoSnap.js", "bg": "inline"}}
+
+### Pro [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan') and Premium [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')
+
+For the Pro and Premium Data Grid, pagination is disabled by default; use the `pagination` prop to enable it.
+
+{{"demo": "PageSizeAutoPremium.js", "bg": "inline"}}
+
 ## Size of the page
 
 The `DataGrid` (MIT license) is limited to pages of up to 100 rows.
@@ -38,20 +59,6 @@ You cannot use both the `autoPageSize` and `autoHeight` props at the same time b
 
 {{"demo": "PageSizeAuto.js", "bg": "inline"}}
 
-## Pagination on Pro and Premium [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')[<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')
-
-The default pagination behavior depends on your plan.
-
-- On the `DataGrid`, pagination is enabled by default and cannot be disabled.
-- On the `DataGridPro` and `DataGridPremium`, pagination is disabled by default; use the `pagination` prop to enable it.
-
-The following example activates pagination on a `DataGridPremium` component.
-
-:::info
-On a side note, exported CSV and Excel files will contain the full data and disregard the pagination by default. To apply pagination on exported files, please check the available [row selectors](/x/react-data-grid/export/#exported-rows).
-:::
-{{"demo": "PageSizeAutoPremium.js", "bg": "inline"}}
-
 ## Pagination model
 
 The pagination model is an object containing the current page and the size of the page. The default value is `{ page: 0, pageSize: 100 }`. To change the default value, make it controlled by `paginationModel` prop or initialize a custom value using `initialState.pagination.paginationModel`.
@@ -222,7 +229,7 @@ If an external data fetching library sets the values to undefined during loading
 
 The Data Grid uses the [Table Pagination](/material-ui/api/table-pagination/) component from the Material UI library which doesn't support `estimated` row count. Until this is supported natively by the Table Pagination component, a workaround to make the localization work is to provide the `labelDisplayedRows` function to the `localeText.MuiTablePagination` property as per the locale you are interested in.
 
-The Grid injects an additional variable `estimated` to the `labelDisplayedRows` function which you can use to accomodate the estimated row count.
+The Grid injects an additional variable `estimated` to the `labelDisplayedRows` function which you can use to accommodate the estimated row count.
 The following example demonstrates how to show the estimated row count in the pagination footer in the Croatian (hr-HR) language.
 
 ```jsx
@@ -243,7 +250,7 @@ const labelDisplayedRows = ({ from, to, count, estimated }) => {
 />
 ```
 
-For more information, see [Translation keys](/x/react-data-grid/localization/#translation-keys) section of the localization documentation.
+For more information, see the [Translation keys](/x/react-data-grid/localization/#translation-keys) section of the localization documentation.
 
 :::