Streamlit aggrid table does not change on selection of a new row

🧩 Custom Components streamlit-aggrid
1

I have two streamlit aggrid tables in one page. On selection of a row in the first table, the second table does not change automatically. Below is my code having the same issue.

import streamlit as st
from st_aggrid import AgGrid, GridUpdateMode, DataReturnMode
from st_aggrid.grid_options_builder import GridOptionsBuilder
import pandas as pd


projectlist = ["project1", "project2"]
filelist = [["p1", "f1"], ["p2", "f2"]]

projects_df = pd.DataFrame(projectlist, columns=["Projects"])

gb = GridOptionsBuilder.from_dataframe(projects_df)
gb.configure_selection(selection_mode='single')
gridOptions = gb.build()

grid_response = AgGrid(
        projects_df, 
        gridOptions=gridOptions,
        height=350, 
        update_mode = GridUpdateMode.SELECTION_CHANGED,
        data_return_mode=DataReturnMode.FILTERED_AND_SORTED,
        allow_unsafe_jscode=True,
        fit_columns_on_grid_load=True,
        key="a"
        )

sel_row = grid_response['selected_rows']
if sel_row:
    nodeidx = sel_row[0]["_selectedRowNodeInfo"]["nodeRowIndex"]
    files_df = pd.DataFrame(filelist[nodeidx], columns=["File"])
    col1, col2 = st.columns(2)
    with col1:
        st.table(files_df)
    with col2:
        grid_response = AgGrid(
            files_df, 
            height=350, 
            update_mode = GridUpdateMode.SELECTION_CHANGED,
            data_return_mode=DataReturnMode.FILTERED_AND_SORTED,
            allow_unsafe_jscode=True,
            fit_columns_on_grid_load=True,
            key="b"
            )

Expected behaviour.
On selecting any row of the first table, the second table show should change automatically.

My environment:

  • Streamlit version: 1.14.1

  • Streamlit AG Grid version: 0.3.3

  • Browser: Chrome (Version 107.0.5304.107 (Official Build) (64-bit))

  • Language: Python (Streamlit framework)

2

Hi @Kasturi_Nandi, here is a re-write of your code:

import streamlit as st
from st_aggrid import AgGrid, GridUpdateMode
from st_aggrid.grid_options_builder import GridOptionsBuilder
import pandas as pd

projectlist = ["project1", "project2"]
filelist = [["p1", "f1"], ["p2", "f2"]]

projects_df = pd.DataFrame(projectlist, columns=["Projects"])

gb = GridOptionsBuilder.from_dataframe(projects_df)
gb.configure_selection(selection_mode='single')
gridOptions = gb.build()

sc1, sc2 = st.columns(2)
with sc1:
    dta1 = AgGrid(projects_df, gridOptions=gridOptions, height=100, update_mode = GridUpdateMode.SELECTION_CHANGED, theme='blue')

with sc2:
    try:
        nodeidx = projects_df[projects_df['Projects'] == dta1["selected_rows"][0]['Projects']].index[0]
        files_df = pd.DataFrame(filelist[nodeidx], columns=["File"])
        AgGrid(files_df, height=100, reload_data=True, theme='blue')

    except:
        st.error("No project chosen...")

Ideally, you should refer to Pablo’s Nested Grid example, available at Streamlit

Cheers

3

@Shawn_Pereira Thank you for this solution!