Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[data grid] pagination has unexpected behavior using -1 for "All" rows per page #16431

Open
Drewpeifer opened this issue Feb 2, 2025 · 1 comment · May be fixed by #16485
Open

[data grid] pagination has unexpected behavior using -1 for "All" rows per page #16431

Drewpeifer opened this issue Feb 2, 2025 · 1 comment · May be fixed by #16485
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! feature: Pagination Related to the data grid Pagination feature good first issue Great for first contributions. Enable to learn the contribution process.

Comments

@Drewpeifer
Copy link

Drewpeifer commented Feb 2, 2025

Steps to reproduce

Steps:

  1. Open this link to live example: mui-x data-grid-pro Page Size Options example
  2. Set rows per page to 25
  3. Navigate to page 2 of results (26-50)
  4. Set rows per page to "All"
Image Image

Current behavior

In the example above, the rows disappear from table.

I have seen other behavior too selecting All when it's set to -1, such as the table showing a misc subset of rows, or showing the proper row count - 1.

Expected behavior

All of the rows should be shown in the table. My solution was to use the length of the rows array instead of -1 for "All".

Context

I was trying to display a dynamic setting for all rows without having to calculate it. For that purpose, it would be nice if displaying the "All" option was just a grid prop, e.g. allowAllRows, and was computed using the length of the rows array passed to the table. Maybe there's a limitation I don't know about though.

Your environment

N/A, bug is visible in docs example

Search keywords: data-grid page pagination all rows

@Drewpeifer Drewpeifer added bug 🐛 Something doesn't work status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 2, 2025
@github-actions github-actions bot added the component: data grid This is the name of the generic UI component, not the React module! label Feb 2, 2025
@Drewpeifer Drewpeifer changed the title data-grid-pro pagination has unexpected behavior using -1 for "All" rows per page [data-grid] pagination has unexpected behavior using -1 for "All" rows per page Feb 2, 2025
@Drewpeifer Drewpeifer changed the title [data-grid] pagination has unexpected behavior using -1 for "All" rows per page [data grid] pagination has unexpected behavior using -1 for "All" rows per page Feb 2, 2025
@MBilalShafi
Copy link
Member

I can reproduce the bug. To fix it, we need to reset the page to the first one whenever the pageSize is set to -1, the following diff seems to fix it:

diff --git a/packages/x-data-grid/src/hooks/features/pagination/useGridPaginationModel.ts b/packages/x-data-grid/src/hooks/features/pagination/useGridPaginationModel.ts
index c331fa6af6..fca83c2b2f 100644
--- a/packages/x-data-grid/src/hooks/features/pagination/useGridPaginationModel.ts
+++ b/packages/x-data-grid/src/hooks/features/pagination/useGridPaginationModel.ts
@@ -41,7 +41,7 @@ export const getDerivedPaginationModel = (
     paginationModel = paginationModelProp;
   }
 
-  const validPage = getValidPage(paginationModel.page, pageCount);
+  const validPage = pageSize === -1 ? 0 : getValidPage(paginationModel.page, pageCount);
   if (validPage !== paginationModel.page) {
     paginationModel = { ...paginationModel, page: validPage };
   }

Feel free to open up a PR since this is fairly straight-forward.

@MBilalShafi MBilalShafi added good first issue Great for first contributions. Enable to learn the contribution process. feature: Pagination Related to the data grid Pagination feature and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! feature: Pagination Related to the data grid Pagination feature good first issue Great for first contributions. Enable to learn the contribution process.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants