[data grid] TablePagination in toolbar

[jonasgheeraert]

Steps to reproduce

Steps:

1. Put TablePagination in toolbar slots (premium datagrid)
2. Disable footer pagination
3. Asure there's a scrollbar on the right. When no scrollbar, it works fine

Current behavior

Expected behavior

The "number of rows" popup should not dissapear when I open it.

Context

I want to have the pagination toolbar in my upper toolbar of the databrid. This is more user friendly. Datagrid is premium.

Your environment

System:
OS: Windows 11 10.0.22631
Binaries:
Node: 18.17.0 - C:\Program Files\nodejs\node.EXE
npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (127.0.2651.74)
npmPackages:
@emotion/react: ^11.8.2 => 11.13.3
@emotion/styled: ^11.8.1 => 11.13.0
@mui/base: 5.0.0-beta.40
@mui/core-downloads-tracker: 5.16.7
@mui/icons-material: ^5.8.3 => 5.16.7
@mui/lab: ^5.0.0-alpha.85 => 5.0.0-alpha.173
@mui/material: ^5.8.6 => 5.16.7
@mui/private-theming: 5.16.6
@mui/styled-engine: 5.16.6
@mui/styles: ^5.15.14 => 5.16.7
@mui/system: 5.16.7
@mui/types: 7.2.17
@mui/utils: 5.16.6
@mui/x-data-grid: ^6.6.0 => 6.20.4
@mui/x-data-grid-generator: ^7.9.0 => 7.19.0
@mui/x-data-grid-premium: 7.19.0
@mui/x-data-grid-pro: ^6.6.0 => 6.20.4
@mui/x-date-pickers: ^6.19.6 => 6.20.2
@mui/x-internals: 7.18.0
@mui/x-license: 7.18.0
@mui/x-license-pro: 6.10.2
@types/react: ^18.0.0 => 18.3.11
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
typescript: ^5.6.2 => 5.6.2

Search keywords: datagrid pagination toolbar top
Order ID:

[KenanYusuf]

Hi @jonasgheeraert - that's an interesting use case.

Can you reproduce the issue on this reproduction codesandbox? https://codesandbox.io/p/sandbox/zealous-breeze-dctmz8

[3ops-jgheeraert]

Hi @KenanYusuf It's my bad. I used the TablePagination component in stead of the GridPagination component. With GridPagination, it works perfectly! Thanks for the info!

[KenanYusuf]

Glad to hear it 😄

Will close this issue now.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@jonasgheeraert How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.