I am trying the ag-grid component with a key (st.session_state.aggrid_key) and reload_data=True, to get the data to reload without redrawing (I want to avoid it disappearing for a fraction of a second). See my code below.
The button I am using works normally but after making an edit in ag-grid it stops working. Do you know why? Thanks in advance!
import pandas as pd
import streamlit as st
from st_aggrid import AgGrid, GridOptionsBuilder
st.title('Football goals for each player')
if 'aggrid_key' not in st.session_state:
st.session_state.aggrid_key = True
st.session_state.df = pd.DataFrame({'players':['A', 'B', 'C', 'D'], 'goals':[20, 23, 19, 41]})
st.markdown('When you load the app the button works normally')
if st.button('Add one goal to each player'):
st.session_state.df['goals'] = st.session_state.df['goals'] + 1
gb = GridOptionsBuilder.from_dataframe(st.session_state.df)
gb.configure_column(field='players',editable=False)
gb.configure_column(field='goals',editable=True)
gb.configure_grid_options(stopEditingWhenCellsLoseFocus=True,headerHeight=30,rowHeight=30)
go = gb.build()
st.markdown('But if later you edit the ag-grid, the button stops working')
ag = AgGrid(
dataframe=st.session_state.df,
key=st.session_state.aggrid_key,
reload_data=True,
height=180,
gridOptions=go,
enable_enterprise_modules=True)
if (st.session_state.df['goals'] != ag['data'].iloc[:,1]).any():
st.session_state.df['goals'] = ag['data'].iloc[:,1].values
st.experimental_rerun()
Hi there,
well sadly i don’t really have a solution here either.
to get the data to reload without redrawing (I want to avoid it disappearing for a fraction of a second)
I think the Agrid library itself does make this possible to change data with some javascript, but I am not sure if the react component does make it possible to do this from the python side of things.
The button I am using works normally but after making an edit in ag-grid it stops working. Do you know why?
I haven’t used the edit functionality myself yet, what exactly stops working?
The final three lines of code ensure that, if user edits Ag-Grid, the input dataframe is modified too.
If user edits Ag-Grid, the button above stops working.
Maybe the issue is with my code’s structure or the last three lines of code?
Anyways, here is the same example but maybe easier to understand:
import pandas as pd
import streamlit as st
from st_aggrid import AgGrid, GridOptionsBuilder,GridUpdateMode,DataReturnMode
st.set_page_config(layout="wide")
st.title('Football goals for each player')
st.write('')
def add_goals():
st.session_state.df['goals'] = st.session_state.df['goals'] + 1
st.session_state.counter += 1
if 'aggrid_key' not in st.session_state:
st.session_state.aggrid_key = 0
st.session_state.counter = 0
st.session_state.df = pd.DataFrame({'players':['A', 'B', 'C', 'D'], 'goals':[20, 23, 19, 41]})
col1,col2,col3,col4 = st.columns(4)
reload_data = False
with col1:
st.markdown('When you load the app the button works normally:')
bootoon = st.button('Add one goal to each player')
if bootoon:
add_goals()
reload_data = True
st.markdown('Count of times button was clicked:')
st.write(st.session_state.counter)
with col2:
st.markdown('Input dataframe before ag-grid:')
st.dataframe(st.session_state.df)
with col3:
st.markdown('But if later you edit the ag-grid, the button stops working')
gb = GridOptionsBuilder.from_dataframe(st.session_state.df)
gb.configure_column(field='players',editable=False)
gb.configure_column(field='goals',editable=True)
gb.configure_grid_options(stopEditingWhenCellsLoseFocus=True,headerHeight=30,rowHeight=30)
go = gb.build()
ag = AgGrid(
dataframe=st.session_state.df,
key=st.session_state.aggrid_key,
reload_data=reload_data,
height=180,
gridOptions=go,
enable_enterprise_modules=True)
with col4:
st.markdown('Input dataframe after ag-grid:')
st.dataframe(st.session_state.df)
if (st.session_state.df['goals'] != ag['data'].iloc[:,1]).any():
st.session_state.df['goals'] = ag['data'].iloc[:,1].values
st.experimental_rerun()
The only workarounds I found are either (a) changing the value of the key, or (b) not using a key at all, but both options make the Ag-Grid redraw and disappear for a fraction of a second, which is what I want to avoid that.
I am facing the same issue any solution yet?
When I set a key for aggrid function, grid does not update if i change the df externally ( other than using grid).
When I do not set key grid disappears for a short time after edit.
“When I do not set key grid disappears for a short time after edit.”
I am facing the same problem. @PablocFonseca, is there any possible way to solve it?
Thank you very much!!
I’m working on a more intuitive way for this behaviour. In the past I used reload_data parameter to reload grid’s data without redrawing it. But I agree it is confusing.
I required a re-render of the AgGrid table only after a button was clicked. To do this, I converted a datetime object into a string and used it as my unique key to regenerate a new version of the table.
If I have interpreted your question correctly, could you possibly set reload_data to False, capture any new changes and then call the grid_builder function (see below) to create another instance of AgGrid (similar to an auto reload).
I have added snippets of my code below - hopefully this helps:
# - - - - Function - - - -
def grid_builder(grid_key: datetime, items: dict, cols_editable: list[str] = None) -> AgGrid:
# without grid_key changing, the items from the db will not persist after initial render.
grid_key = str(grid_key)
df = pd.DataFrame(items)
gd = GridOptionsBuilder.from_dataframe(df)
gd.configure_pagination(enabled=True)
gd.configure_default_column(groupable=True)
if cols_editable != None:
for col in cols_editable:
gd.configure_column(field=col, editable=True)
gd.configure_selection(selection_mode='multiple', use_checkbox=True)
gridoptions = gd.build()
grid_table = AgGrid(df, gridOptions=gridoptions,
update_on=['cellValueChanged'],
height=400,
theme='alpine',
key=grid_key)
return grid_table
# - - - - Constants - - - -
COLUMNS = ['a', 'b', 'c', 'd'] # made up column names
# - - - - Assign Session State Keys - - - -
if 'grid_key' not in st.session_state:
st.session_state['grid_key'] = datetime.now()
if 'project' not in st.session_state:
st.session_state['project'] = None
# - - - - Logic - - - -
project_selection = st.selectbox(
label='Select Project Title', options=project_title_list) # project_title_list is a list of titles from my db
if st.button(label='Load'):
st.session_state['project'] = pd.DataFrame(db.fetch_all_items(
project_selection), columns=COLUMNS) # db is from a separate python file that deals with firebase, where fetch_all_items takes a collection title
st.session_state['grid_key'] = datetime.now()
grid = grid_builder(grid_key=st.session_state['grid_key'],
items=st.session_state['project'], cols_editable=COLUMNS[2:])```
@PablocFonseca or anyone
Below grid is not reloading if I use key. Without key it is reloading if there is change in df. Only adding key,stoped grid reloading
Could you please help me?
Hello guys, I have a AgGrid table showing data from a real time metrics.
I want to reload data automatically every 15s. For this, I used st_autorefresh but the problem is the AgGrid (frontend) lost the selected rows after page update even using pre_selected_rows.
Do you know how to fix it?
A small piece of the code:
Thanks in advance!