Python Streamlit Ag grid Dynamic Edit

🎈 Using Streamlit
, , ,
1

Hi everyone
I am trying to combine streamlit , pandas and ag grid to display and adjust data in a dynamic way.When I edit the dataframe in the GUI (streamlit / aggrid) the C value doesn’t change in the GUI but if I just add an additional dataframe which is just a copy of it …the value is updated (test below) … I just want one dataframe with the possible to edit the column B in the grid and get instant result in col C.

import streamlit as st
import numpy as np
import pandas as pd
from st_aggrid import AgGrid, GridOptionsBuilder  #add import for GridOptionsBuilder

@st.cache_data()
def load_data():
    data = pd.DataFrame(np.array([[1, 2, 3], [4, 5, 6], [0, 0, 0]]),columns=['a', 'b', 'c'])
    return data
@st.cache_data()
def result(a,b):
    return a + b


data = load_data()

gb = GridOptionsBuilder.from_dataframe(data)
gb.configure_column('b',editable=True)
gridoptions = gb.build()
r = AgGrid(data, height=400,editable=True,gridOptions=gridoptions)
resp = r['data']
resp['c'] = resp.apply(lambda x: result(x['a'],x['b']),axis=1)
test= r['data'].copy()
test['c'] = test.apply(lambda x: result(x['a'],x['b']),axis=1)
test
2

Hi

You may be able to create a button to trigger the update of your dataframe in AgGrid

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

@st.cache_data()
def load_data():
    data = pd.DataFrame(np.array([[1, 2, 3], [4, 5, 6], [0, 0, 0]]), columns=['a', 'b', 'c'])
    return data

@st.cache_data()
def result(a, b):
    return a + b

# Carga los datos iniciales
data = load_data()

# Crea GridOptionsBuilder
gb = GridOptionsBuilder.from_dataframe(data)
gb.configure_column('b', editable=True)
gridoptions = gb.build()

# Mostar AgGrid
r = AgGrid(data, height=400, editable=True, gridOptions=gridoptions)

# Obtener el DataFrame editado de AgGrid
resp = r['data']

# Función para actualizar la columna 'c' en el Dataframe.
def update_c_column(df):
    df['c'] = df.apply(lambda x: result(x['a'], x['b']), axis=1)

# Activar la actualización
if st.button("Update 'c' column"):
    update_c_column(resp)
    # Crea un nuevo AgGrid!!!
    r = AgGrid(resp, height=400, editable=True, gridOptions=gridoptions)

# Mostrar copia
test = resp.copy()
update_c_column(test)
test
3

It doesn’t work , I still have 2 dataframes displayed … I wanted to edit the dataframe in ag grid + press enter to generate the result (col C). I just want 1 dynamic grid.