Streamlit-Ag Grid - link two grids

I just uncovered streamlit and ag grid.
I managed to implement a sample ap using ag-grid.

Now I have a question.
I have been struggling for 3 days, with no success.

Question:
My data has two columns (I am interested in): User and Position:
Screenshot from 2022-06-08 15-21-21

Example data: (User) jodi319, (Position) Project Leader
I have two grids; display these two columns successfully.

How do i link these two columns ?
For example; If I select user JW from User-grid, I want the corresponding Position highlighted in Position grid.

Here is the code In have thus far:

@st.cache(allow_output_mutation = True)
def load_data(file_name):
  df_1 = pd.read_csv(file_name)
  return df_1

df_0 = load_data("DATA_10_small.csv")

with st.expander("See df_0"):
  st.write("df_0 = ",df_0)

# Rename columns
df_0.rename(columns = {' USER':'USER'}, inplace = True)


st.write("df_00 as datafrane:")
# df_000 = pd.DataFrame(df_0)
df_00 = pd.DataFrame(df_0)
st.dataframe(df_00)

# 
# 
st.sidebar.subheader("St-AgGrid example options")
# 
sample_size = st.sidebar.number_input("rows", min_value=10, value=int(len(df_0.index))+1)
# 
grid_height = st.sidebar.number_input("Grid height", min_value=1, max_value=800, value=100)
# 
return_mode = st.sidebar.selectbox("Return Mode", list(DataReturnMode.__members__), index=1)
return_mode_value = DataReturnMode.__members__[return_mode]
# 
update_mode = st.sidebar.selectbox("Update Mode", list(GridUpdateMode.__members__), index=6)
update_mode_value = GridUpdateMode.__members__[update_mode]
# 
# 
fit_columns_on_grid_load = st.sidebar.checkbox("Fit Grid Columns on Load", value=False)
# 
enable_selection=st.sidebar.checkbox("Enable row selection", value=True)
if enable_selection:
    selection_mode = st.sidebar.radio("Selection Mode", ['single','multiple'], index=1)
    use_checkbox = st.sidebar.checkbox("Use check box for selection", value=True)
    if use_checkbox:
        groupSelectsChildren = st.sidebar.checkbox("Group checkbox select children", value=True)
        groupSelectsFiltered = st.sidebar.checkbox("Group checkbox includes filtered", value=True)
    if ((selection_mode == 'multiple') & (not use_checkbox)):
        rowMultiSelectWithClick = st.sidebar.checkbox("Multiselect with click (instead of holding CTRL)", value=False)
        if not rowMultiSelectWithClick:
            suppressRowDeselection = st.sidebar.checkbox("Suppress deselection (while holding CTRL)", value=False)
        else:
            suppressRowDeselection=False
    st.sidebar.text("___")
# 
# 
# 
def createList(r1, r2):
    return [item for item in range(r1, r2+1)]
  
# 
# 
gb_5 = GridOptionsBuilder.from_dataframe(pd.DataFrame({"USER":df_0['USER'].unique()}))
gb_6 = GridOptionsBuilder.from_dataframe(pd.DataFrame({"POSITION":df_0['POSITION'].unique()}))

# 
if enable_selection:
    gb_5.configure_selection(selection_mode)
    gb_6.configure_selection(selection_mode)
    if use_checkbox:
        gb_5.configure_column('USER', headerTooltip="User",checkboxSelection=True, headerCheckboxSelection = True)
        gb_5.configure_selection(selection_mode, pre_selected_rows=createList(0,len(pd.DataFrame({"USER":df_0['USER'].unique()}).index)), use_checkbox=False, groupSelectsChildren=groupSelectsChildren, groupSelectsFiltered=groupSelectsFiltered)
        gb_6.configure_column('POSITION', headerTooltip="Position",checkboxSelection=True, headerCheckboxSelection = True)
        gb_6.configure_selection(selection_mode, pre_selected_rows=createList(0,len(pd.DataFrame({"POSITION":df_0['POSITION'].unique()}).index)), use_checkbox=False, groupSelectsChildren=groupSelectsChildren, groupSelectsFiltered=groupSelectsFiltered)
    if ((selection_mode == 'multiple') & (not use_checkbox)):
        gb_5.configure_selection(selection_mode, use_checkbox=False, rowMultiSelectWithClick=rowMultiSelectWithClick, suppressRowDeselection=suppressRowDeselection)
        gb_6.configure_selection(selection_mode, use_checkbox=False, rowMultiSelectWithClick=rowMultiSelectWithClick, suppressRowDeselection=suppressRowDeselection)
# 
gridOptions_5 = gb_5.build()
gridOptions_6 = gb_6.build()
#
c1, c2 = st.columns([1,1])
with c1:
    grid_return4 = AgGrid(
      pd.DataFrame({"USER":df_0['USER'].unique()}),     # USER                            
      gridOptions=gridOptions_5,   
      height=150,                                 
      width='70%',                                       
      data_return_mode=return_mode_value,                 
      update_mode=update_mode_value,                      
      fit_columns_on_grid_load=fit_columns_on_grid_load,  
      allow_unsafe_jscode=True,  
      key = 'c1'
      #reload_data = True,
    )
 
  
with c2:
    grid_return5 = AgGrid(
      pd.DataFrame({"POSITION":df_0['POSITION'].unique()}),     # POSITION                        
      gridOptions=gridOptions_6,      
      height=200,                                 
      width='100%',                                       
      data_return_mode=return_mode_value,                 
      update_mode=update_mode_value,                      
      fit_columns_on_grid_load=fit_columns_on_grid_load,  
      allow_unsafe_jscode=True,  
      key = 'c2'
      #reload_data = True
    )  


# Creating user selection for USER
user = []
position = []
if len(grid_return4['selected_rows']) > 0:
  for l in range(len(grid_return4['selected_rows'])):
    user.append(list(grid_return4['selected_rows'])[l]['USER'])
    
#
st.write("user = ", user)

grid_return5['selected_rows'] = user

st.write("grid_return5 = ", grid_return5)


Clarification:

When I select a user from grid USER (let’s say JW); I want the corresponding position selected in POSITION grid (while displaying the other - unselected)

Hi

Anyone able to assist please?
@PablocFonseca @andfanilo ?

Hello @jodi319,

I have been really busy over the past 3 months, and haven’t check aggrid for a while. But, this week things started to cool down, so I’ll be more active here and on github.
Anyways, once I get home I’ll try to put up an example for you.

Pablo

Thank you. Looking forward to your response