Change selected row in streamlit_aggrid using next and previous button

🧩 Custom Components streamlit-aggrid
1

I was trying to use keyboard to detect currently selected row (based on focused cell), but realized this can not be done using streamlit_aggrid. If it is doable, please advise how.

I need to produce a chart based on the input from selected row of the table/grid.

So I reverted to using Previous and next buttons to move row selection one by one. But failed again. I have produced the following code but is not working for me and after many hours still can’t see why it would not be working. Any hints to fix this highly appreciated. Thanks.

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

# Define sample data
data = {
    'System Name': ['System A', 'System B', 'System C', 'System D'],
    'Value 1': [10, 20, 30, 40],
    'Value 2': [1, 2, 3, 4],
    'selected_row': [-1, -1,-1, -1]
}
df = pd.DataFrame(data)

if "selected_row_index" not in st.session_state:
    st.session_state.selected_row_index = None

if "df" not in st.session_state:
    st.session_state.df = df

def interactive_table(df):
    # Set up the GridOptionsBuilder
    gb = GridOptionsBuilder.from_dataframe(df)
    gb.configure_pagination(paginationAutoPageSize=False, paginationPageSize=100000)
    gb.configure_selection(selection_mode="multiple", pre_selected_rows=[st.session_state.selected_row_index], use_checkbox=False, groupSelectsChildren=True, groupSelectsFiltered=True)
    gb.configure_grid_options(suppressRowHoverHighlight=True, columnHoverHighlight=False, pre_selected_rows=[st.session_state.selected_row_index])
    gb.configure_side_bar()

    grid_options = gb.build()

    # Display the AgGrid component
    grid_response = AgGrid(df, 
                        gridOptions=grid_options,
                        allow_unsafe_jscode=True,
                        update_mode=GridUpdateMode.SELECTION_CHANGED,
                        columns_auto_size_mode=ColumnsAutoSizeMode.FIT_CONTENTS,
                        key='mykey')
    
    return grid_response

# Define the button callbacks
def select_next_row():
    if st.session_state.selected_row_index < len(df) - 1:
        st.session_state.selected_row_index += 1

def select_previous_row():
    if st.session_state.selected_row_index > 0:
        st.session_state.selected_row_index -= 1


# Add the buttons to the Streamlit app
if st.button("Previous row"):#, on_click=select_previous_row):
    st.write(f"Previous row clicked - Selected row index: {st.session_state.selected_row_index}")
    if st.session_state.selected_row_index > 0:
        st.session_state.selected_row_index -= 1
        st.session_state.df["selected_row"] = st.session_state.selected_row_index


if st.button("Next row"):#, on_click=select_next_row):
    st.write(f"Next row clicked - Selected row index: {st.session_state.selected_row_index}, len(df)={len(df)}")
    if st.session_state.selected_row_index < len(df) - 1:
        st.session_state.selected_row_index += 1
        st.session_state.df["selected_row"] = st.session_state.selected_row_index

st.write(f"Selected row index: {st.session_state.selected_row_index}")

selected_rows = interactive_table(st.session_state.df.loc[:, st.session_state.df.columns != "selected_row"])["selected_rows"]
if selected_rows:
    #st.session_state.selected_row_index = selected_rows[0]["_selectedRowNodeInfo"]["nodeRowIndex"]
    st.write(selected_rows)