How to scroll to selected rows?

[thunderbug1]

In my application I have a quite large dataframe with a group of selected rows. With: gb.configure_selection(selection_mode="multiple", use_checkbox=True, pre_selected_rows=pre_selected_rows) it is possible to pre-select the rows but I could not figure out how to automatically scroll the view to show the rows.

The Aggrid API does have the functionality to scroll to a certain Row here. I tried to use this in javascript callbacks but I could not get it to work.

[thunderbug1]

Here is a small example of what I mean:

import streamlit as st
from st_aggrid import AgGrid, GridOptionsBuilder
import pandas as pd
import numpy as np

@st.experimental_memo
def get_df():
    df = pd.DataFrame(columns=['foo','bar','baz'], data=np.random.choice(range(10), size=(150,3)))
    return df

df = get_df()

gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_selection(selection_mode="multiple", use_checkbox=True, pre_selected_rows=[100,101])
gb.configure_default_column(value=True, enableRowGroup=True, aggFunc=None, editable=False)

gb.configure_selection(selection_mode="multiple", use_checkbox=True)

AgGrid(df, gridOptions=gb.build(), height=700, data_return_mode="AS_INPUT", update_mode="SELECTION_CHANGED")

[PablocFonseca]

Hello! I Just changed your example, it should work:

import streamlit as st
from st_aggrid import AgGrid, GridOptionsBuilder, JsCode
import pandas as pd
import numpy as np

@st.experimental_memo
def get_df():
    df = pd.DataFrame(columns=['foo','bar','baz'], data=np.random.choice(range(10), size=(150,3)))
    return df

df = get_df()

gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_selection(selection_mode="multiple", use_checkbox=True, pre_selected_rows=[100,101])
gb.configure_default_column(value=True, enableRowGroup=True, aggFunc=None, editable=False)
gb.configure_selection(selection_mode="multiple", use_checkbox=True)

onFirstDataRendered = JsCode("""
    function(e) { 
        e.api.ensureIndexVisible(100,'top');
    }
""")

gb.configure_grid_options(onFirstDataRendered=onFirstDataRendered.js_code)

AgGrid(df, gridOptions=gb.build(), height=700, data_return_mode="AS_INPUT", update_mode="SELECTION_CHANGED", allow_unsafe_jscode=True)

[thunderbug1]

Awesome, many thanks :)