pythonag-gridsession-statestreamlit

Streamlit how to use session state with Aggrid to keep the selection even after switching pages?


This is potentially an easy one, but I just can’t figure out how to do it. Here’s a simple reproducible code example. How to use session state to keep the tickbox selection, even after switching pages (you will need to create a page folder to include multi pages)?

import pandas as pd
import streamlit as st
from st_aggrid import GridOptionsBuilder, AgGrid, GridUpdateMode, DataReturnMode, ColumnsAutoSizeMode


data = {
    "calories": [420, 380, 390],
    "duration": [50, 40, 45],
    "random1": [5, 12, 1],
    "random2": [230, 23, 1]
}

df = pd.DataFrame(data)

gb = GridOptionsBuilder.from_dataframe(df[["calories", "duration"]])
gb.configure_selection(selection_mode="single", use_checkbox=True)
gb.configure_side_bar()
gridOptions = gb.build()

data = AgGrid(df,
              gridOptions=gridOptions,
              enable_enterprise_modules=True,
              allow_unsafe_jscode=True,
              update_mode=GridUpdateMode.SELECTION_CHANGED,
              columns_auto_size_mode=ColumnsAutoSizeMode.FIT_CONTENTS)

selected_rows = data["selected_rows"]

if len(selected_rows) != 0:
    selected_rows[0]

For example, when I select the tickbox, and after I switch to page 2, then back to test page, the tickbox selection still remains. enter image description here


Solution

  • The method configure_selection has a parameter pre_selected_rows used to pre-select a row. Once the user selected a row, we will save this row's index in session state variable so we can use it to restore the previous selected row when coming from a different page.

    I revise your code a bit to make it work.

    import pandas as pd
    import streamlit as st
    from st_aggrid import GridOptionsBuilder, AgGrid, GridUpdateMode, DataReturnMode, ColumnsAutoSizeMode
    
    
    if 'sid' not in st.session_state:
        st.session_state.sid = None
    
    
    data = {
        "calories": [420, 380, 390],
        "duration": [50, 40, 45],
        "random1": [5, 12, 1],
        "random2": [230, 23, 1]
    }
    
    df = pd.DataFrame(data)
    
    gb = GridOptionsBuilder.from_dataframe(df[["calories", "duration"]])
    
    # Add pre_selected_rows param.
    gb.configure_selection(selection_mode="single", use_checkbox=True,
                           pre_selected_rows=[st.session_state.sid])
    gb.configure_side_bar()
    gridOptions = gb.build()
    
    # Add key.
    data = AgGrid(df,
                  gridOptions=gridOptions,
                  enable_enterprise_modules=True,
                  allow_unsafe_jscode=True,
                  update_mode=GridUpdateMode.SELECTION_CHANGED,
                  columns_auto_size_mode=ColumnsAutoSizeMode.FIT_CONTENTS,
                  key='mykey')
    
    selected_rows = data["selected_rows"]
    
    # Save the row index of the selected row.
    if len(selected_rows):
        ind = selected_rows[0]['_selectedRowNodeInfo']['nodeRowIndex']
        st.session_state.sid = ind
    
    if len(selected_rows) != 0:
        selected_rows[0]