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.

The following demo explores the usage of this API:

Scroll restoration

You can restore scroll to a previous position by definining 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:

<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 grid exposes a set of methods that enables all of these features using the imperative apiRef. To know more about how to use it, check the API Object section.

getScrollPosition()

Returns the current scroll position.

Signature:

getScrollPosition: () => GridScrollParams

scroll()

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

Signature:

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

scrollToIndexes()

Triggers the viewport to scroll to the cell at indexes given by params. Returns true if the grid had to scroll to reach the target.

Signature:

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