Scroll To

Use the scrollTo prop to scroll to a specific position in the grid.

Requires dash-ag-grid>=2.2.0

scrollTo is a dict with keys:

• rowIndex (number; optional): rowIndex, typically a row number, to scroll to.

• rowId (string; optional): Id of the row to scroll to.

• data (dict; optional): The rowData of the row to scroll to.

• rowPosition (“top” | “bottom” | “middle”; optional): Default “top”. If a position is provided, the grid will attempt to scroll until the row is at the given position within the viewport.

• column (string; optional): Ensures the column is visible by scrolling the grid horizontally if needed. Must be a field in columnDefs.

• columnPosition (“auto” | “start” | “middle” | “end”; optional): Default “auto”. Position of the column in the grid after scrolling.

• “auto” - Scrolls the minimum amount to make sure the column is visible.
• “start” - Scrolls the column to the start of the viewport.
• “middle” - Scrolls the column to the middle of the viewport.
• “end” - Scrolls the column to the end of the viewport.

NOTE: If any of rowIndex, rowId, and data are passed to scrollTo simultaneously only one of them will be used as all of them set the vertical scroll position.
The order of priority will be rowIndex, then rowId, and finally data.

Scroll To Row Index

This example scrolls to the row index, typically the row number. You can also specify if the specified index should be at the top, middle or bottom of the viewport, and scroll horizontally to ensure that a column is visible.

Scroll To Row Id

This example will scroll vertically to a unique row id, rather than scrolling to a row number like the example above. Try sorting a column in each example to see the difference.

In this example we create a unique id using the index of the dataframe. See more
information the Row IDs section.

Scroll To Row Data

Here we use the "data" key in the scrollTo prop to position the grid at a certain row.
Note the following:
- The data must be a single row in the same format as rowData
- Since we are not specifying position of the row and columns in the viewport, the grid uses the defaults:
{"rowPosition":"top", "columnPosition": "auto"}

Initial Scroll To Position

It’s possible to specify the initial Scroll To position when the app starts. This example sets the scrollTo prop in
the grid definition, here to start at row number 100, rather than only in a callback:

grid = dag.AgGrid(
    scrollTo={"rowIndex": 100},
    # other props
)

Scroll To with Pagination

In order to scroll to a position, the row must exist the DOM. When using pagination, only rows on the current
page exist. To scroll to a row on a different page, the grid must be on that page prior to setting the scrollTo prop.

In this example we use a clientside callback to calculate which page the row is located and the paginationGoToPage
function to show the page. Note that it goes to the correct page based on the current state of the grid, including sort and/or filters applied.

Scroll To with Infinite Row Model

The scrollTo prop works with both the clientside and serverside row models. Here is an example with the Infinite Row Model.

Scroll To with Row Groups

As with pagination, when using Row Groups (an AG Grid Enterprise feature), the row group must be expanded prior to setting the scrollTo prop.
See an example in the Scroll To With Row Groups example in the Enterprise section.