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-3146
Corn
Madge Tucker
70,320
7.009 %
no
Open
D-5610
Coffee C
Helena Bates
44,738
8.53 %
no
Filled
D-9324
Soybeans
Steve McCoy
18,443
17.031 %
no
Open
D-6187
Milk
Darrell Nelson
35,105
34.101 %
no
Open
D-787
Adzuki bean
Addie Walton
82,042
90.45 %
no
Filled
D-1523
Milk
Emma Reynolds
2,643
60.953 %
no
Partially Filled
D-2052
Sugar No.11
Rodney Burton
13,929
7.667 %
no
Rejected
D-1598
Coffee C
Aaron Edwards
32,799
32.98 %
no
Open
D-1143
Rough Rice
Eunice Mills
74,419
78.63 %
no
Open
D-3222
Sugar No.14
Jane Horton
23,651
36.48 %
no
Rejected

apiRef

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