Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to scroll to selected rows? #57

Closed
thunderbug1 opened this issue Jan 24, 2022 · 3 comments
Closed

How to scroll to selected rows? #57

thunderbug1 opened this issue Jan 24, 2022 · 3 comments

Comments

@thunderbug1
Copy link
Contributor

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
Copy link
Contributor Author

thunderbug1 commented Jan 24, 2022

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
Copy link
Owner

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
Copy link
Contributor Author

Awesome, many thanks :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants