[data grid] Grid automatically scrolls horizontally with pinned columns that exceed or take the half the viewport

[louisaaron]

Steps to reproduce

Demo: https://stackblitz.com/edit/react-z2nfxa?file=Demo.tsx

1. Create a DataGrid component.
2. Pin the first 7-8 columns (or however many columns take up at least half of the screen width).
3. Ensure there are enough unpinned columns so that horizontal scrolling is enabled.
4. Select an unpinned cell, and use the arrow keys to move across the grid. The selected cell will move beneath the pinned columns.
5. Select an unpinned cell, then drag to multi-select cells. This will also trigger automatic horizontal scrolling.

Current behavior

When we pin the columns so that they take up half of your screen (like 5/6 columns with respective widths), the Datagrid automatically scrolls horizontally in two scenarios
Scenario 1. Select an un-pinned cell and move the selection in any direction (top, bottom, right) using the up, down, right arrow keys
Scenario 2. Select an un-pinned cell and try to multi-select cells using either mouse drag or shift + arrow keys

Expected behavior

It shouldn't scroll horizontally and cell selection should behave as default.

Context

Findings: In Datagrid v7, the data grid is built such that the selected cell stays in the middle till we reach the extreme right, but with more pinned columns this logic automatically scrolls the whole grid horizontally and selected cell moves under pinned columns.
Code Snippet:

import Box from "@mui/material/Box";
import { DataGridPremium, GridColDef, GridValueGetter } from "@mui/x-data-grid-premium";

const rows = Array.from({ length: 30 }, (_, id) => ({
  id: id + 1,
  firstName: `First${id + 1}`,
  lastName: `Last${id + 1}`,
  age: Math.floor(Math.random() * 100),
  occupation: `Occupation${id + 1}`,
  city: `City${id + 1}`,
  country: `Country${id + 1}`,
  email: `email${id + 1}@example.com`,
  phone: `+1-555-000${id + 1}`,
  company: `Company${id + 1}`,
  department: `Department${id + 1}`,
  salary: Math.floor(Math.random() * 100000),
  hireDate: new Date(`2023-0${(id % 9) + 1}-01`),
  performanceRating: (Math.random() * 5).toFixed(2),
  isActive: id % 2 === 0,
  status: id % 3 === 0 ? "Active" : "Inactive",
  role: `Role${id + 1}`,
  team: `Team${id + 1}`,
  manager: `Manager${id + 1}`,
  region: `Region${id + 1}`,
}));

const getFullName: GridValueGetter<(typeof rows)[number], unknown> = (value, row) => {
  return `${row.firstName || ""} ${row.lastName || ""}`;
};

const columns: GridColDef[] = [
  { field: "firstName", headerName: "First name", width: 130 },
  { field: "lastName", headerName: "Last name", width: 130 },
  {
    field: "fullName",
    headerName: "Full name",
    width: 160,
    valueGetter: getFullName,
  },
  { field: "age", headerName: "Age", width: 90, type: "number" },
  { field: "occupation", headerName: "Occupation", width: 160 },
  { field: "city", headerName: "City", width: 130 },
  { field: "country", headerName: "Country", width: 130 },
  { field: "email", headerName: "Email", width: 200 },
  { field: "phone", headerName: "Phone", width: 150 },
  { field: "company", headerName: "Company", width: 160 },
  { field: "department", headerName: "Department", width: 150 },
  { field: "salary", headerName: "Salary", width: 120, type: "number" },
  { field: "hireDate", headerName: "Hire Date", width: 130, type: "date" },
  { field: "performanceRating", headerName: "Rating", width: 110, type: "number" },
  { field: "isActive", headerName: "Active", width: 100, type: "boolean" },
  { field: "status", headerName: "Status", width: 120 },
  { field: "role", headerName: "Role", width: 130 },
  { field: "team", headerName: "Team", width: 130 },
  { field: "manager", headerName: "Manager", width: 130 },
  { field: "region", headerName: "Region", width: 130 },
];

export default function Test() {
  return (
    <Box sx={{ height: 400, width: "100%" }}>
      <DataGridPremium
        rows={rows}
        columns={columns}
        cellSelection
        initialState={{
          pinnedColumns: {
            left: ["firstName", "lastName", "fullName", "age", "occupation", "city"],
          },
        }}
      />
    </Box>
  );
}

Your environment

System:
OS: macOS 14.2
Binaries:
Node: 20.14.0 - ~/.volta/tools/image/node/20.14.0/bin/node
npm: 10.7.0 - ~/.volta/tools/image/node/20.14.0/bin/npm
pnpm: Not Found
Browsers:
Chrome: 128.0.6613.120
Edge: Not Found
Safari: 17.2
npmPackages:
@emotion/react: ^11.13.3 => 11.13.3
@emotion/styled: ^11.13.0 => 11.13.0
@mui/base: 5.0.0-beta.40
@mui/core-downloads-tracker: 5.16.7
@mui/icons-material: ^5.16.7 => 5.16.7
@mui/lab: ^5.0.0-alpha.173 => 5.0.0-alpha.173
@mui/material: ^5.16.7 => 5.16.7
@mui/private-theming: 5.16.6
@mui/styled-engine: 5.16.6
@mui/system: 5.16.7
@mui/types: 7.2.16
@mui/utils: 5.16.6
@mui/x-data-grid: 7.14.0
@mui/x-data-grid-premium: ^7.13.0 => 7.14.0
@mui/x-data-grid-pro: 7.14.0
@mui/x-date-pickers: 7.14.0
@mui/x-date-pickers-pro: ^7.13.0 => 7.14.0
@mui/x-internals: 7.14.0
@mui/x-license: ^7.13.0 => 7.14.0
@mui/x-license-pro: ^6.10.2 => 6.10.2
@types/react: ^18.0.6 => 18.3.3
react: ^18.1.0 => 18.3.1
react-dom: ^18.1.0 => 18.3.1
styled-components: 5.3.11
typescript: ^5.1.6 => 5.5.2

Search keywords: Horizontal scroll with pinned columns
Order ID: 85118

[louisaaron]

Hey @michelengelen ! Sorry to bug, but this issue is holding up some critical features for us and we're unable to build any workaround without forking the entire repo. Anything you can do to have someone take a look at this one would be appreciated. Thank you!

[michelengelen]

Hey @louisaaron ... I did raise this in our team channel.
From your example it seems that only the scroll (keyboard navigation) to the right is broken, right? For me navigating to the left seems to work (focused cell is aligned with the pinned columns). The same goes for the multi cell selection.

[cherniavskii]

Looks like it's a v7 regression – it worked as expected in v6: https://stackblitz.com/edit/react-z2nfxa-d6zknf

[louisaaron]

Confirming that yes it was working fine in v6. We just caught this when upgrading to v7 @michelengelen @cherniavskii . Thank you both

[louisaaron]

Hey @michelengelen . Just want to check and confirm that this is still being worked on since it's still a blocker for us. Thank you!

[KenanYusuf]

Hi @louisaaron - I am currently working on this issue, hope to have a fix soon. I have a work-in-progress PR open, but there are more issues to work through than initially thought.

[louisaaron]

Awesome thank you @KenanYusuf

[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

We value your feedback @louisaaron! How was your experience with our support team?
We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!