[DataGridPro] Document how to use the scroll feature

[oliviertassinari]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

https://github.com/mui-org/material-ui-x/blob/726235cfc1510e62a2bce84c6a2b7b9ea8433589/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualRows.ts#L308-L309

This feature is already implemented but the documentation doesn't cover it. From the eye of a developer, it's as if we had never implemented it. I propose we add a section for it.

Examples 🌈

• https://react-window.vercel.app/#/examples/list/scroll-to-item
• https://adazzle.github.io/react-data-grid/canary/?path=/story/demos--scroll-to-row
• https://www.ag-grid.com/documentation/react/grid-api/#reference-scrolling
• https://virtuoso.dev/scroll-to-index/

I'm not sure we need an actual demo for the feature. I think that the main problem is that there is no way to use this feature without diving deep into the source.

Motivation 🔦

One use case example: "as a developer, I'm streaming updates to the rows in the data grid. When an update is pushed, I would like to scroll the data grid to make it visible."

[embeddedt]

I'd also like to know if there is a way of doing this for DataGrid (the MIT version). The documentation mentioned that there are supposed to be prop equivalents for things in apiRef, but I'm having trouble finding this for scrollToIndexes. I looked for something relating to scrolling state or a scrolling model but couldn't find anything.

[oliviertassinari]

@embeddedt I agree with the general feeling. We use virtualization in the DataGrid but curb it. This prevents developers to use the regular DOM API to scroll to a specific index, It seems that this API should be available to all developers, the same way it's available in https://react-window.vercel.app/#/examples/list/scroll-to-item as an example.

[cactusjosh]

I've been able to interact with X-Grid's useGridApiRef() hook to do something like this:

const tableApiRef = useGridApiRef();

// inside a useEffect()
const columnIndexToScrollTo = tableApiRef.current.getRowIndex(someIDField);
tableApiRef.current.scrollToIndexes(columnIndexToScrollTo);

But I can't seem to get it to work. Since there's no documentation (I'm even guessing the fn parameters) I have no idea what I'm doing wrong.

Edit 1. I was using scrollToIndexes incorrectly. Here's what I think you need instead:

const columnIndexes = {rowIndex: 1, colIndex: 1};
tableApiRef.current.scrollToIndexes(columnIndexToScrollTo);

[oliviertassinari]

Related to #1818

[embeddedt]

@cactusjosh Thanks for the example! Unfortunately, this doesn't help me since I'm using DataGrid and not XGrid, which means that I don't have access to the apiRef functions.

[oliviertassinari]

Thanks for the example! Unfortunately, this doesn't help me since I'm using DataGrid and not XGrid, which means that I don't have access to the apiRef functions.

@embeddedt Ok, this should be solved with #1781. Without virtualization, you can read the DOM and change the scroll.

[embeddedt]

@oliviertassinari Maybe I'm missing something, but that feels very unidiomatic for React. It seems that I would have to do something like this (semi-pseudocode):

const gridRef = useRef(null);
const scrollToRow = useCallback((i) => {
    const rowEl = gridRef.current.querySelector(`div[data-id="${i}"]`);
    if(rowEl != null)
        rowEl.scrollIntoView();
}, [ gridRef ]);
return <DataGrid {...otherProps} ref={gridRef}/>;

This seems like it could easily break if the underlying approach for rendering rows change. Ideally I would like to just call an API that hides this implementation detail and scrolls to the desired index.

Please let me know if I misinterpreted the description.

[oliviertassinari]

@embeddedt Yes, this is the approach that we could encourage, with an extra role="row". I would expect it to be good enough.

[ZeeshanTamboli]

@oliviertassinari I can work on this. How do we approach? Points below:

1. Should we have a new section altogether? eg: DataGrid - Scrolling Page path: components/data-grid/scrolling. Will this also need work in core repo?
2. Add it in a existing section/page.

You are saying:

I'm not sure we need an actual demo for the feature

Should we not have a demo like https://virtuoso.dev/scroll-to-index/? What other possible ways you mean to document without a demo?

---

Also will this be marked as a Pro feature? AFAIK it is accessible in apiRef only, right?

[oliviertassinari]

@ZeeshanTamboli I believe this feature is linked to virtualization. Without virtualization, developers could use the web .scrollIntoView API without caring about what the data grid has available. So https://material-ui.com/components/data-grid/virtualization/ with a new h2 seems the most relevant location.

Regarding how we would document it. I would propose we have at the minimum an api Ref section like https://material-ui.com/components/data-grid/filtering/#apiref for scroll and scrollToIndexes.

And if we want to go the extra mile, a live demo.

AFAIK it is accessible in apiRef only, right?

Correct

[ZeeshanTamboli]

I just found out that we have the scroll APIs documented here at GridApi: https://material-ui.com/api/data-grid/grid-api/ with auto docs generation.

@oliviertassinari
Still would it be better to have it documented it again separately on virtualization section as part of virtualization like filtering API ref https://material-ui.com/components/data-grid/filtering/#apiref to complete solving this issue?

[oliviertassinari]

@ZeeshanTamboli Correct Yes. I think that an h2 apiRef section would be a good start. I also think that a proper demo with the scroll feature is needed to close this issue.

[nkennedy21]

scrollToIndexes only works properly if the grid height is exactly (n rows * rowHeight) + headerHeight. this is because of the transform: translate3d sytyle attribute in the renderingZone. making the grid height dynamic is more difficult because of this (still possible with calculations making it the height of a specific number of rows plus the headerHeight)

[m4theushw]

Closed by #2634, this is now documented in https://mui.com/components/data-grid/scrolling/.

[luan-dang-techlabs]

• https://www.ag-grid.com/documentation/react/grid-api/#reference-scrolling

I've been able to interact with X-Grid's useGridApiRef() hook to do something like this:

const tableApiRef = useGridApiRef();

// inside a useEffect()
const columnIndexToScrollTo = tableApiRef.current.getRowIndex(someIDField);
tableApiRef.current.scrollToIndexes(columnIndexToScrollTo);

But I can't seem to get it to work. Since there's no documentation (I'm even guessing the fn parameters) I have no idea what I'm doing wrong.

Edit 1. I was using scrollToIndexes incorrectly. Here's what I think you need instead:

const columnIndexes = {rowIndex: 1, colIndex: 1};
tableApiRef.current.scrollToIndexes(columnIndexToScrollTo);

I wrapped the call in requestAnimationFrame() to make scrollToIndexes() work.

 useEffect(() => {
    const animate = () => {
         // rowIndex: 20 can be anything
         const columnIndexes = {rowIndex: 20, colIndex: 1};
        tableApiRef.current.scrollToIndexes(columnIndexToScrollTo);
    }

// allow next repaint to make scrollToIndexes method to scroll to 'rowIndex'
    const id = requestAnimationFrame(animate);

     return () => {
   cancelAnimationFrame(id);
}
 }, [someDependecies, tableApiRef]);

[luan-dang-techlabs]

scrollToIndexes only works properly if the grid height is exactly (n rows * rowHeight) + headerHeight. this is because of the transform: translate3d sytyle attribute in the renderingZone. making the grid height dynamic is more difficult because of this (still possible with calculations making it the height of a specific number of rows plus the headerHeight)

@nkennedy21 - Can you elaborate on this? I think what you say make sense, I had to wrap the scrollToIndexes() call in a requestAnimationFrame() to make it work.

[c3-anerishah]

@m4theushw it looks like you'd added the documentation for scrolling to https://mui.com/x/react-data-grid/scrolling/ based on your comment above, but the demo doesn't seem to be working - clicking on Bottom doesn't scroll to the bottom of the grid and same with the other button respectively. I was wondering if something has changed in the scrollToIndexes API?

[m4theushw]

@c3-anerishah This demo stopped working in React 18. #6489 is fixing it.