Clicking on AgGrid table forces the app to rerun

đŸ§© Streamlit Components streamlit-aggrid
1

I display a dataframe using AgGrid component. When I click on any column in the table to sort or filter it forces the app to re-run and clears all the output. How to fix this behaviour to allow users to interact with the table and see the output (e.g. sorted or filtered table)?

I specified reload_data = False parameter.
Please see below a code example.

# Import libraries
import streamlit as st
import pandas as pd
from st_aggrid import AgGrid, JsCode


st.set_page_config(
    page_title="AgGrid Test"
)

# User input
with st.form('input'):
    text_input = st.text_area("Enter text here", height=350)  
    submit_button = st.form_submit_button(label="Extract data")    

 
# Extract metadata on submit 
if submit_button:
    df = pd.DataFrame(data = {'column1': ['a', 'b', 'c'], 'column2': [1,2,3]})
    AgGrid(df, reload_data = False)

Python==3.8.0
streamlit==1.11.1
streamlit-aggrid==0.3.2
Linux AWS EC2 instance Ubuntu 18.04.3 LTS
Chrome Version 103.0.5060.134 (Official Build) (64-bit)

2

Hmmm. I am not use, but I have some different options set than you and this problem doesn’t happen to me. Perhaps you can try running it as below and see if the problem persists?


def aggrid_interactive_table(df: pd.DataFrame):
    """Creates an st-aggrid interactive table based on a dataframe.

    Args:
        df (pd.DataFrame]): Source dataframe

    Returns:
        dict: The selected row
    """
    options = GridOptionsBuilder.from_dataframe(
        df, enableRowGroup=True, enableValue=True, enablePivot=True
    )

    options.configure_side_bar()

    options.configure_selection("single")
    selection = AgGrid(
        df,
        enable_enterprise_modules=True,
        gridOptions=options.build(),
        theme="light",
        update_mode=GridUpdateMode.MODEL_CHANGED,
        allow_unsafe_jscode=True,
    )

    return selection

selection = aggrid_interactive_table(df=tabledata)
3

Thank you @hack-r. I tried adding update_mode=GridUpdateMode.MODEL_CHANGED but it did not make any difference.

4

Try adding a line to your AgGrid call update_on=['cellValueChanged']

I was experiencing same issue and this fixed it for me. I think it’s to do with an apparent change from using GridUpdateMode to using the update_on property to control how/when AgGrid reloads. Pablo notes that GridUpdateMode is deprecated in a comment on an init.py on st-aggrids github

5

Thank you @Connor. When I add update_on=['cellValueChanged'] the table just keeps loading forever and never gets displayed. Please see a screenshot below.

streamlit
streamlit741×431 2.43 KB

6

Hi @Jurgita - Ah I ran into that issue as well; Quite a strange one.

Try clearing streamlit cache then in the call to AgGrid instead of the update_on=['cellValueChanged'] I posted above try update_mode="value_changed"

7

Hey, I was having the same issue.
Try this code, this may help.

import streamlit as st
import pandas as pd
from st_aggrid import AgGrid, JsCode

st.set_page_config(
page_title=“AgGrid Test”
)
if “load_state” not in st.session_state:
st.session_state.load_state = False

with st.form(‘input’):
text_input = st.text_area(“Enter text here”, height=350)
submit_button = st.form_submit_button(label=“Extract data”)

if submit_button or st.session_state.load_state:
st.session_state.load_state = True
df = pd.DataFrame(data = {‘column1’: [‘a’, ‘b’, ‘c’], ‘column2’: [1,2,3]})
AgGrid(df, reload_data = False)

8 
update_mode = GridUpdateMode.SELECTION_CHANGED, and reload_data=True

solved it for me. I needed reload_data for another purpose, I guess update_mode made the difference.

9

Nothing of the above solved my issue. What solved it: I discovered that one column in my pandas DataFrame was encoded as datetime64[ns]. If I converted that column or dropped it the reload error vanished.

1 Like