search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.57k stars 1.34k forks source link

[data grid] `TablePagination` in toolbar #15597

Closed jonasgheeraert closed 4 days ago

jonasgheeraert commented 4 days ago

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 commented 4 days ago

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 commented 4 days ago

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 commented 4 days ago

Glad to hear it 😄

Will close this issue now.

github-actions[bot] commented 4 days ago

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.