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 Data Grid will not do any movement in the missing axis.

Indexes are zero-based. The rowIndex is an index into the full filtered and sorted row list, not relative to the current page, and it must fall within the range of rows displayed on the current page. With paginationMode="server" the Data Grid only holds the rows of the current page, so the absolute index is page * pageSize plus the index of the row within the loaded rows. The colIndex is an index into the visible columns. When an index is out of bounds, the Data Grid logs a warning in development and ignores that axis, so scrollToIndexes scrolls the other one and returns false if nothing moved.

The following demo explores the usage of this API:

Scroll restoration

You can restore scroll to a previous position by defining initialState.scroll values { top: number, left: number }. The Data Grid will mount at the specified scroll offset in pixels.

The following demo explores the usage of scroll restoration:

Edit code

<Box sx={{ height: 400 }}>
  <DataGridPro
    apiRef={apiRef}
    onCellClick={handleCellClick}
    hideFooter
    loading={loading}
    {...data}
    initialState={{
      ...data.initialState,
      scroll: { top: 1000, left: 1000 },
    }}
  />
</Box>

<Box sx={{ height: 400 }}>
  <DataGridPro
    apiRef={apiRef}
    onCellClick={handleCellClick}
    hideFooter
    loading={loading}
    {...data}
    initialState={{
      ...data.initialState,
      scroll: { top: 1000, left: 1000 },
    }}
  />
</Box>

Press Enter to start editing

apiRef

The Data Grid exposes a set of methods via the apiRef object that are used internally in the implementation of scrolling feature. The reference below describes the relevant functions. See API object for more details.

Signature:

getScrollPosition: () => GridScrollParams

Signature:

scroll: (params: Partial<GridScrollParams>) => void

Signature:

scrollToIndexes: (params: Partial<GridCellIndexCoordinates>) => boolean

Data Grid - Scrolling

Scrolling to specific cells

Scroll restoration

apiRef

getScrollPosition()Returns the current scroll position.

Signature:

scroll()Triggers the viewport to scroll to the given positions (in pixels).

Signature:

Signature:

API