Skip to content

Data grid - Scrolling

This section presents how to programmatically control the scroll.

Scrolling to specific cells

You can scroll to a specific cell by calling apiRef.current.scrollToIndexes(). The only argument that must be passed is an object containing the row index and the column index of the cell to scroll. If the row or column index is not present, the grid will not do any movement in the missing axis.

The following demo explores the usage of this API:

Desk
Commodity
Trader Name
Trader Email
Quantity
Filled Quantity
Is Filled
Status
D-9474
Wheat
Billy Pierce
33,591
76.321 %
no
Filled
D-9354
Frozen Concentrated Orange Juice
Myrtle Price
69,706
30.56 %
no
Partially Filled
D-4916
Cocoa
Adam Cook
69,459
86.419 %
no
Partially Filled
D-6017
Rough Rice
Sallie Patrick
60,311
45.36 %
no
Rejected
D-7714
Rapeseed
Lulu Griffin
25,522
21.64 %
no
Open
D-1295
Robusta coffee
Etta McCoy
5,484
81.637 %
no
Rejected
D-3389
Cotton No.2
Callie Edwards
94,674
33.85 %
no
Partially Filled
D-2760
Cocoa
Myrtle Howard
85,150
81.91 %
no
Rejected
D-2073
Corn
Theresa Rowe
61,459
72.85 %
no
Open
D-8608
Corn
Luella Hunter
40,580
50.441 %
no
Partially Filled

apiRef

Signature:
getScrollPosition: () => GridScrollParams
Signature:
scroll: (params: Partial<GridScrollParams>) => void
Signature:
scrollToIndexes: (params: Partial<GridCellIndexCoordinates>) => boolean