CODEWITHSUNDEEP
pythonag-gridsession-statestreamlit
Subaru Spirit
Subaru Spirit

Reputation: 464

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

Upvotes: 0

Views: 1069

Answers (1)

ferdy
ferdy

Reputation: 5024

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]

Upvotes: 2

Related Questions