How to keep streamlit ag-grid selected rows after page update?

🧩 Custom Components streamlit-aggrid
1

Hello everyone,

I’m currently working on a real-time metrics dashboard with an AgGrid table to display the data. To keep the data up-to-date, I would like to reload it automatically every 15 seconds. I’ve tried using st_autorefresh to accomplish this, but I’m facing an issue where the AgGrid table loses the selected rows after each page update, even when using pre_selected_rows.

Do any of you have experience with this issue and know how to solve it?

Here’s the link for the example repository:
https://github.com/andrewssobral/streamlit-example
Here’s the link of the running application:
https://andrewssobral-streamlit-example-streamlit-app-txrvx1.streamlit.app/

import numpy as np
import pandas as pd
import streamlit as st

from streamlit_autorefresh import st_autorefresh
from st_aggrid import GridOptionsBuilder, AgGrid, GridUpdateMode, DataReturnMode, JsCode

if 'pre_selected_rows' not in st.session_state:
    st.session_state.pre_selected_rows = []

df = pd.DataFrame(columns=['ID', 'STATUS'])
df['ID'] = [1, 2, 3]
df['STATUS'] = np.random.randint(0,100,size=(3))
st.write(df)

# get pre-selected rows from session state
pre_selected_rows = st.session_state.pre_selected_rows
st.write("pre_selected_rows: ", st.session_state.pre_selected_rows)

# use the pre-selected rows when building the grid options
gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_default_column(editable=True, wrapText=True, autoHeight=True)
gb.configure_column('ID', minWidth=80, maxWidth=80, type=["numericColumn","numberColumnFilter"], sortable=True, sort='desc', checkboxSelection=True, headerCheckboxSelection=True)
gb.configure_column('STATUS', minWidth=100, maxWidth=100)
gb.configure_pagination(paginationAutoPageSize=False, paginationPageSize=3)
gb.configure_side_bar()
gb.configure_selection('multiple', pre_selected_rows=pre_selected_rows, use_checkbox=True)
gb_grid_options = gb.build()

# render the grid and get the selected rows
grid_return = AgGrid(
        df,
        gridOptions = gb_grid_options,
        key = 'ID',
        reload_data = True,
        data_return_mode = DataReturnMode.AS_INPUT,
        update_mode = GridUpdateMode.MODEL_CHANGED, # GridUpdateMode.SELECTION_CHANGED or GridUpdateMode.VALUE_CHANGED or 
        allow_unsafe_jscode = True,
        fit_columns_on_grid_load = False,
        enable_enterprise_modules = False,
        height = 320,
        width = '100%',
        theme = "streamlit"
    )
selected_rows = grid_return["selected_rows"]

# save the row indexes of the selected rows in the session state
pre_selected_rows = []
for selected_row in selected_rows:
        pre_selected_rows.append(selected_row['_selectedRowNodeInfo']['nodeRowIndex'])
st.session_state.pre_selected_rows = pre_selected_rows

# print the selected rows
st.write("Selected rows: ", selected_rows)

st_autorefresh(interval=((1*15*1000)), key="dataframerefresh")
2

Hi @Andrews

Is this what you are looking for:

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

if 'pre_selected_rows' not in st.session_state:
    st.session_state.pre_selected_rows = []

df = pd.DataFrame(columns=['ID', 'STATUS'])
df['ID'] = [1, 2, 3]
df['STATUS'] = np.random.randint(0,100,size=(3))

# get pre-selected rows from session state
pre_selected_rows = st.session_state.pre_selected_rows

# use the pre-selected rows when building the grid options
gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_selection('multiple', pre_selected_rows=st.session_state.pre_selected_rows, use_checkbox=True)
gb_grid_options = gb.build()

# render the grid and get the selected rows
grid_return = AgGrid(
        df,
        gridOptions = gb_grid_options,
        key = 'ID',
        data_return_mode = DataReturnMode.AS_INPUT,
        update_mode = GridUpdateMode.MODEL_CHANGED, # GridUpdateMode.SELECTION_CHANGED or GridUpdateMode.VALUE_CHANGED or 
        height = 150,
        theme = "streamlit"
    )

if st.button("rerun"):
    st.experimental_rerun()

Cheers

3

Hello Shawn,

Thank you for your message.

While I appreciate your suggestion, it does not address the specific issue that I am currently facing. What I need is a solution that allows me to keep the selected rows in an AgGrid table after reloading the data.

To help you better understand my issue, I have provided an example here:
https://andrewssobral-streamlit-example-streamlit-app-txrvx1.streamlit.app/

If you have any suggestions or solutions that could help me with this problem, I would be grateful to hear them.

Thank you for your assistance.

Best regards,
Andrews

4

Any update on your problem Andrews? I do face the same isse :smiley:

1 Like