[data grid] Pagination Seems to Relocate Table at Bottom Instead of Top...

[lisaWriteJava]

The problem in depth

So we have a datgrid that seems to have an odd issue with pagination. When you scroll down the page jumps around. Sadly I can't reproduce that but, when you go to the next page you are positioned at the bottom of the page instead of the top of the new page. I think something is off in my configuration, please advise. Here is a demo: https://stackblitz.com/edit/react-obcliq?file=Demo.js

Expected Behavior is the next page the user is at the top of the list.

fyi, the npx @mui/envinfo didn't print out my packages so here the versions

npmPackages:
"@emotion/react": "latest",
    "@emotion/styled": "latest",

    "@mui/icons-material": "^5.15.15",
    "@mui/lab": "^5.0.0-alpha.170",
    "@mui/material": "^5.15.15",
    "@mui/private-theming": "^5.15.14",
    "@mui/styles": "^5.15.15",
    "@mui/utils": "^5.15.14",
    "@mui/x-charts": "^7.4.0",
    "@mui/x-data-grid-generator": "^7.2.0",
    "@mui/x-data-grid-premium": "^7.2.0",
    "@mui/x-license": "^7.2.0"
"react": "^18.2.0",
"react-dom": "^18.2.0",
"styled-components": "latest"

Your environment

`npx @mui/envinfo`

``` System: OS: Linux 4.18 Red Hat Enterprise Linux 8.10 (Ootpa) CPU: (16) x64 AMD EPYC 7R13 Processor Memory: 57.08 GB / 61.31 GB Container: Yes Shell: 4.4.20 - /bin/bash Binaries: Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node Yarn: 1.22.22 - ~/.nvm/versions/node/v16.15.1/bin/yarn npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm Managers: pip3: 9.0.3 - /usr/bin/pip3 Yum: 4.7.0 - /usr/bin/yum Utilities: Git: 2.43.5 - /usr/bin/git Curl: 7.61.1 - /usr/bin/curl IDEs: Nano: 2.9.8 - /usr/bin/nano VSCode: 1.85.1 - /home/lmcart4/.vscode-server/bin/0ee08df0cf4527e40edc9aa28f4b5bd38bbff2b2/bin/remote-cli/code Vim: 8.0 - /usr/bin/vim Languages: Bash: 4.4.20 - /usr/bin/bash Perl: 5.26.3 - /usr/bin/perl Python3: 3.6.8 - /usr/bin/python3 Browsers: Chrome: 128.0.6613.84 ```

Search keywords: datagrid pagination Order ID: 66765

[michelengelen]

It is not ... you are not limiting the height of the parent container and therefore it renders all 50 rows and with no need to scroll.

Again ... Please read this section of the docs: Data Grid - Layout

[lisaWriteJava]

The height is limited on this these lines:

const gridHeight = 'calc(100vh - 280px)';

  return (
    <Box sx={{ height: { gridHeight }, width: '100%' }}>

I calculate the height, then use that calculation in the parent container which is a box.

[michelengelen]

Now, this is still an incorrect assignment:

- <Box sx={{ height: { gridHeight }, width: '100%' }}>
+ <Box sx={{ height: gridHeight, width: '100%' }}>

would be correct. The way you are passing it to the sx prop is

sx={{
  height: {
    gridHeight: 'calc(100vh - 280px)',
  },
  width: '100%',
}

gridHeight is not a valid property of height.

[michelengelen]

I calculate the height, then use that calculation in the parent container which is a box.

This is not a calculation by the way, but a string defining a CSS property value.

[lisaWriteJava]

Got it, we will adjust all of the tables accordingly. Thanks, I guess the confusion was because in come instances we are able to use property ={xyz}. Thank your for the clarification.

[michelengelen]

yes, because property={foo} is a prop assignment in jsx, but in javascript the shorthand notation { property: { foo } } is equivalent to { property: { foo: value } }