Page reset examples

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>
+  );
+}

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>
+  );
+}

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 }}
+/>

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).

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>
+  );
+}

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>
+  );
+}

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
+/>

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.