[DataGrid] scrollToIndexes "behavior", "block" and "inline" parameters

[nlafleur]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

Just like the "scrollIntoView" function (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)

Examples 🌈

It would be usefull to allow the 3 parameters scrollIntoView also allows,

**behavior Optional**
Defines the transition animation. One of auto or smooth. Defaults to auto.

**block Optional**
Defines vertical alignment. One of start, center, end, or nearest. Defaults to start.

**inline Optional**
Defines horizontal alignment. One of start, center, end, or nearest. Defaults to nearest.

I used an alternative way to animate the scroll by adding the following style to the DataGrid:

sx={{
  "& .MuiDataGrid-virtualScroller": {
    scrollBehavior: "smooth",
  }
}}

Which works fine, but I also want to center the scrolled row.

Current behaviour is that it stops whenever the row is visible

Motivation 🔦

No response

Order ID 💳 (optional)

No response

[m4theushw]

This improvement was in my TODO for quite long time but I never took an action because it didn't know if someone would use it. I'm glad that there's need for it now. Related to https://github.com/mui/mui-x/issues/1911#issuecomment-861915818

[Primajin]

We would also be interested in this 🤩

Order ID 💳

48838

[WestCornfield]

Is there any plan to implement this "behavior", "block", "inline" parameters? I would also like this feature to be implemented.

[deepdawn0]

+1

[romgrk]

The feature isn't planned at the moment due to low number of upvotes (4 at the moment), but this doesn't seem too hard to implement. Any external contribution will be welcomed for this feature, the scrolling code is in useGridScroll.

[konstantinsp]

Hello, don't have time for contribution. but maybe these code could help someone with contribution or in general

center to the scrolled rowIndex

import {GridApiCommon} from "@mui/x-data-grid";

export const muiDataGridScroll = (apiRef: GridApiCommon, rowIndex: number) => {
    const dimensions = apiRef.state.dimensions;
    const virtualScrollerRef = apiRef.rootElementRef.current!.querySelector(".MuiDataGrid-virtualScroller")!;
    const rowsMeta = apiRef.state.rowsMeta;
    const targetOffsetHeight = rowsMeta.positions[rowIndex + 1]
        ? rowsMeta.positions[rowIndex + 1] - rowsMeta.positions[rowIndex]
        : rowsMeta.currentPageTotalHeight - rowsMeta.positions[rowIndex];

    const top = scrollIntoView({
        clientHeight: dimensions.viewportInnerSize.height,
        scrollTop: virtualScrollerRef.scrollTop,
        offsetHeight: targetOffsetHeight,
        offsetTop: rowsMeta.positions[rowIndex],
    });

    apiRef.scroll({top: top});
}

function scrollIntoView(dimensions: {
    clientHeight: number;
    scrollTop: number;
    offsetHeight: number;
    offsetTop: number;
}) {
    const { clientHeight, scrollTop, offsetHeight, offsetTop } = dimensions;

    const elementBottom = offsetTop + offsetHeight;
    // Always scroll to top when cell is higher than viewport to avoid scroll jump
    // See https://github.com/mui/mui-x/issues/4513 and https://github.com/mui/mui-x/issues/4514
    if (offsetHeight > clientHeight) {
        return offsetTop;
    }
    if (elementBottom - clientHeight > scrollTop) {
        return elementBottom - clientHeight + Math.round(clientHeight / 2) - Math.round(offsetHeight / 2);
    }
    if (offsetTop < scrollTop) {
        return offsetTop - Math.round(clientHeight / 2) + Math.round(offsetHeight / 2);
    }
    return undefined;
}