[Data grid] Fix number of rows to display for page size options with …

…negative value (#14890) Co-authored-by: Rom Grk <[email protected]>
mui · Oct 18, 2024 · 2880c9a · 2880c9a
1 parent 86da73a
commit 2880c9a
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 9 deletions.
diff --git a/docs/data/data-grid/pagination/PageSizeCustomOptions.js b/docs/data/data-grid/pagination/PageSizeCustomOptions.js
@@ -17,7 +17,7 @@ export default function PageSizeCustomOptions() {
           ...data.initialState,
           pagination: { paginationModel: { pageSize: 5 } },
         }}
-        pageSizeOptions={[5, 10, 25]}
+        pageSizeOptions={[5, 10, 25, { value: -1, label: 'All' }]}
       />
     </div>
   );

diff --git a/docs/data/data-grid/pagination/PageSizeCustomOptions.tsx b/docs/data/data-grid/pagination/PageSizeCustomOptions.tsx
@@ -17,7 +17,7 @@ export default function PageSizeCustomOptions() {
           ...data.initialState,
           pagination: { paginationModel: { pageSize: 5 } },
         }}
-        pageSizeOptions={[5, 10, 25]}
+        pageSizeOptions={[5, 10, 25, { value: -1, label: 'All' }]}
       />
     </div>
   );

diff --git a/docs/data/data-grid/pagination/PageSizeCustomOptions.tsx.preview b/docs/data/data-grid/pagination/PageSizeCustomOptions.tsx.preview
@@ -4,5 +4,5 @@
     ...data.initialState,
     pagination: { paginationModel: { pageSize: 5 } },
   }}
-  pageSizeOptions={[5, 10, 25]}
+  pageSizeOptions={[5, 10, 25, { value: -1, label: 'All' }]}
 />
diff --git a/docs/data/data-grid/pagination/pagination.md b/docs/data/data-grid/pagination/pagination.md
@@ -41,10 +41,10 @@ You should provide an array of items, each item should be one of these types:
   <DataGrid pageSizeOptions={[5, 10, 25]}>
   ```
 
-- **object**, the `value` and `label` keys will be used respectively for the value and label of the option.
+- **object**, the `value` and `label` keys will be used respectively for the value and label of the option. Define `value` as `-1` to display all results.
 
   ```jsx
-  <DataGrid pageSizeOptions={[10, 100, { value: 1000, label: '1,000' }]}>
+  <DataGrid pageSizeOptions={[10, 100, { value: 1000, label: '1,000' }, { value: -1, label: 'All' }]}>
   ```
 
 {{"demo": "PageSizeCustomOptions.js", "bg": "inline"}}

diff --git a/packages/x-data-grid/src/hooks/features/pagination/gridPaginationSelector.ts b/packages/x-data-grid/src/hooks/features/pagination/gridPaginationSelector.ts
@@ -8,6 +8,8 @@ import {
 import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
 import { getPageCount } from './gridPaginationUtils';
 
+const ALL_RESULTS_PAGE_VALUE = -1;
+
 /**
  * @category Pagination
  * @ignore - do not document.
@@ -92,10 +94,13 @@ export const gridPaginationRowRangeSelector = createSelectorMemoized(
       paginationModel.pageSize * paginationModel.page,
       visibleTopLevelRowCount - 1,
     );
-    const topLevelLastRowIndex = Math.min(
-      topLevelFirstRowIndex + paginationModel.pageSize - 1,
-      visibleTopLevelRowCount - 1,
-    );
+    const topLevelLastRowIndex =
+      paginationModel.pageSize === ALL_RESULTS_PAGE_VALUE
+        ? visibleTopLevelRowCount - 1
+        : Math.min(
+            topLevelFirstRowIndex + paginationModel.pageSize - 1,
+            visibleTopLevelRowCount - 1,
+          );
 
     // The range contains no element
     if (topLevelFirstRowIndex === -1 || topLevelLastRowIndex === -1) {