From 20ffdf49b96b48f90f23d4f3378652263bf5cc76 Mon Sep 17 00:00:00 2001
From: Armin Mehinovic <armin@mui.com>
Date: Tue, 4 Feb 2025 14:28:06 +0100
Subject: [PATCH] Page reset examples

---
 .../filtering/FilteringWithPageReset.js       | 27 +++++++++++++++++++
 .../filtering/FilteringWithPageReset.tsx      | 27 +++++++++++++++++++
 .../FilteringWithPageReset.tsx.preview        |  9 +++++++
 docs/data/data-grid/filtering/index.md        |  6 +++++
 .../data-grid/sorting/SortingWithPageReset.js | 26 ++++++++++++++++++
 .../sorting/SortingWithPageReset.tsx          | 26 ++++++++++++++++++
 .../sorting/SortingWithPageReset.tsx.preview  |  8 ++++++
 docs/data/data-grid/sorting/sorting.md        |  6 +++++
 8 files changed, 135 insertions(+)
 create mode 100644 docs/data/data-grid/filtering/FilteringWithPageReset.js
 create mode 100644 docs/data/data-grid/filtering/FilteringWithPageReset.tsx
 create mode 100644 docs/data/data-grid/filtering/FilteringWithPageReset.tsx.preview
 create mode 100644 docs/data/data-grid/sorting/SortingWithPageReset.js
 create mode 100644 docs/data/data-grid/sorting/SortingWithPageReset.tsx
 create mode 100644 docs/data/data-grid/sorting/SortingWithPageReset.tsx.preview

diff --git a/docs/data/data-grid/filtering/FilteringWithPageReset.js b/docs/data/data-grid/filtering/FilteringWithPageReset.js
new file mode 100644
index 0000000000000..88ca0cb27e762
--- /dev/null
+++ b/docs/data/data-grid/filtering/FilteringWithPageReset.js
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { DataGrid, GridToolbar } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
+
+export default function FilteringWithPageReset() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Employee',
+    visibleFields: VISIBLE_FIELDS,
+    rowLength: 100,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        {...data}
+        loading={loading}
+        pagination
+        initialState={{ pagination: { paginationModel: { page: 0, pageSize: 10 } } }}
+        pageSizeOptions={[10]}
+        resetPageAfterSortingOrFiltering
+        slots={{ toolbar: GridToolbar }}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/filtering/FilteringWithPageReset.tsx b/docs/data/data-grid/filtering/FilteringWithPageReset.tsx
new file mode 100644
index 0000000000000..88ca0cb27e762
--- /dev/null
+++ b/docs/data/data-grid/filtering/FilteringWithPageReset.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { DataGrid, GridToolbar } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
+
+export default function FilteringWithPageReset() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Employee',
+    visibleFields: VISIBLE_FIELDS,
+    rowLength: 100,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        {...data}
+        loading={loading}
+        pagination
+        initialState={{ pagination: { paginationModel: { page: 0, pageSize: 10 } } }}
+        pageSizeOptions={[10]}
+        resetPageAfterSortingOrFiltering
+        slots={{ toolbar: GridToolbar }}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/filtering/FilteringWithPageReset.tsx.preview b/docs/data/data-grid/filtering/FilteringWithPageReset.tsx.preview
new file mode 100644
index 0000000000000..ef71057573df4
--- /dev/null
+++ b/docs/data/data-grid/filtering/FilteringWithPageReset.tsx.preview
@@ -0,0 +1,9 @@
+<DataGrid
+  {...data}
+  loading={loading}
+  pagination
+  initialState={{ pagination: { paginationModel: { page: 0, pageSize: 10 } } }}
+  pageSizeOptions={[10]}
+  resetPageAfterSortingOrFiltering
+  slots={{ toolbar: GridToolbar }}
+/>
\ No newline at end of file
diff --git a/docs/data/data-grid/filtering/index.md b/docs/data/data-grid/filtering/index.md
index 3a1eff48b1349..7ecbd9c6b294b 100644
--- a/docs/data/data-grid/filtering/index.md
+++ b/docs/data/data-grid/filtering/index.md
@@ -147,6 +147,12 @@ const columns = [
 
 {{"demo": "ReadOnlyFilters.js", "bg": "inline", "defaultCodeOpen": false}}
 
+## Reset pagination
+
+By default user stays on the same page after the filter is applied, unless the new row count indicates that that page does not exist anymore. In that case, page is changed to the last page for the new row count. If you want to get the user back to the first page each time new filter is applied, use `resetPageAfterSortingOrFiltering` prop.
+
+{{"demo": "FilteringWithPageReset.js", "bg": "inline", "defaultCodeOpen": false}}
+
 ## Ignore diacritics (accents)
 
 You can ignore diacritics (accents) when filtering the rows. See [Quick filter - Ignore diacritics (accents)](/x/react-data-grid/filtering/quick-filter/#ignore-diacritics-accents).
diff --git a/docs/data/data-grid/sorting/SortingWithPageReset.js b/docs/data/data-grid/sorting/SortingWithPageReset.js
new file mode 100644
index 0000000000000..437eec5b2924a
--- /dev/null
+++ b/docs/data/data-grid/sorting/SortingWithPageReset.js
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
+
+export default function SortingWithPageReset() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Employee',
+    visibleFields: VISIBLE_FIELDS,
+    rowLength: 100,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        {...data}
+        loading={loading}
+        pagination
+        pageSizeOptions={[10]}
+        initialState={{ pagination: { paginationModel: { page: 0, pageSize: 10 } } }}
+        resetPageAfterSortingOrFiltering
+      />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/sorting/SortingWithPageReset.tsx b/docs/data/data-grid/sorting/SortingWithPageReset.tsx
new file mode 100644
index 0000000000000..437eec5b2924a
--- /dev/null
+++ b/docs/data/data-grid/sorting/SortingWithPageReset.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
+
+export default function SortingWithPageReset() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Employee',
+    visibleFields: VISIBLE_FIELDS,
+    rowLength: 100,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        {...data}
+        loading={loading}
+        pagination
+        pageSizeOptions={[10]}
+        initialState={{ pagination: { paginationModel: { page: 0, pageSize: 10 } } }}
+        resetPageAfterSortingOrFiltering
+      />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/sorting/SortingWithPageReset.tsx.preview b/docs/data/data-grid/sorting/SortingWithPageReset.tsx.preview
new file mode 100644
index 0000000000000..13c08acb3f3b9
--- /dev/null
+++ b/docs/data/data-grid/sorting/SortingWithPageReset.tsx.preview
@@ -0,0 +1,8 @@
+<DataGrid
+  {...data}
+  loading={loading}
+  pagination
+  pageSizeOptions={[10]}
+  initialState={{ pagination: { paginationModel: { page: 0, pageSize: 10 } } }}
+  resetPageAfterSortingOrFiltering
+/>
\ No newline at end of file
diff --git a/docs/data/data-grid/sorting/sorting.md b/docs/data/data-grid/sorting/sorting.md
index eb6c4f62f8bd2..66a225dec6f9c 100644
--- a/docs/data/data-grid/sorting/sorting.md
+++ b/docs/data/data-grid/sorting/sorting.md
@@ -91,6 +91,12 @@ In the following demo, the `firstName` column is not sortable by the default gri
 
 {{"demo": "ReadOnlySortingGrid.js", "bg": "inline", "defaultCodeOpen": false}}
 
+## Reset pagination
+
+By default sorting does not change the current page. If you want to get the user back to the first page each time new sort is applied, use `resetPageAfterSortingOrFiltering` prop.
+
+{{"demo": "SortingWithPageReset.js", "bg": "inline", "defaultCodeOpen": false}}
+
 ## Custom comparator
 
 A comparator determines how two cell values should be sorted.