Clickable dataframe rows to trigger a detailed display streamlit

Question

My code is as follows:

import pandas as pd
import streamlit as st

main_data = {
    'name': ['Xavier', 'Ann', 'Jana', 'Yi', 'Robin', 'Amal', 'Nori'],
}
row_labels = [101, 102, 103, 104, 105, 106, 107]
df_main = pd.DataFrame(data=main_data, index=row_labels)

data = {
    'name': ['Xavier', 'Ann', 'Jana', 'Yi', 'Robin', 'Amal', 'Nori'],
    'city': ['Mexico City', 'Toronto', 'Prague', 'Shanghai',
             'Manchester', 'Cairo', 'Osaka'],
    'age': [41, 28, 33, 34, 38, 31, 37],
    'py-score': [88.0, 79.0, 81.0, 80.0, 68.0, 61.0, 84.0]
}


df = pd.DataFrame(data=data, index=row_labels)
st.dataframe(df_main)

The result is as follows:

I have two questions: the first one is : I want when I click on any rows to show the details information in df dataframe and the second one is I want to show the dataframe completely without scrolling.

Answer 1

You can use st_aggrid to do this and here is one way you can do it. You don't need two dataframes, and you can just use one df but only display to users relevant fields.

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


data = {
    'row_labels': [101, 102, 103, 104, 105, 106, 107],
    'name': ['Xavier', 'Ann', 'Jana', 'Yi', 'Robin', 'Amal', 'Nori'],
    'city': ['Mexico City', 'Toronto', 'Prague', 'Shanghai',
             'Manchester', 'Cairo', 'Osaka'],
    'age': [41, 28, 33, 34, 38, 31, 37],
    'py-score': [88.0, 79.0, 81.0, 80.0, 68.0, 61.0, 84.0]
}
df = pd.DataFrame(data)

# select the columns you want the users to see
gb = GridOptionsBuilder.from_dataframe(df[["row_labels", "name"]])
# configure selection
gb.configure_selection(selection_mode="single", use_checkbox=True)
gb.configure_side_bar()
gridOptions = gb.build()

data = AgGrid(df,
              gridOptions=gridOptions,
              enable_enterprise_modules=True,
              allow_unsafe_jscode=True,
              update_mode=GridUpdateMode.SELECTION_CHANGED,
              columns_auto_size_mode=ColumnsAutoSizeMode.FIT_CONTENTS)

selected_rows = data["selected_rows"]

if selected_rows is not None:
    if len(selected_rows) != 0:
        col1, col2, col3, col4 = st.columns(4)

        with col1:
            st.markdown("##### Name")
            st.markdown(f":orange[{selected_rows['name']}]")
        with col2:
            st.markdown("##### City")
            st.markdown(f":orange[{selected_rows['city']}]")
        with col3:
            st.markdown("##### Age")
            st.markdown(f":orange[{selected_rows['age']}]")
        with col4:
            st.markdown("##### Py Score")
            st.markdown(f":orange[{selected_rows['py-score']}]")