Use st-addgrid dataframes with explosion of data when the cell is clicked

[xyffar]

METODO ALTERNATIVO COL DOPPIO CLIC. Gestisci il popup che si apre con @st.dialog("Exploded data", width="large")

https://docs.streamlit.io/develop/api-reference/execution-flow/st.dialog#stexperimental_dialog
La tabella è creata col comando AgGrid()

Details

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

# --- 2. Configurazione di Ag-Grid per il Doppio Click ---

# Utilizziamo GridOptionsBuilder per configurare la tabella Ag-Grid
gb = GridOptionsBuilder.from_dataframe(df_parent)

# Configura la selezione della riga (non usiamo checkbox per questo caso)
gb.configure_selection('single', use_checkbox=False)

# Definiamo una funzione JavaScript per gestire l'evento di doppio click sulla riga.
# Questa funzione invierà i dati della riga cliccata a Streamlit tramite Streamlit.setComponentValue.
# Salviamo l'ID del prodotto e i dettagli degli ordini nello session_state di Streamlit.
on_double_click_js = JsCode("""
function(e) {
    if (e.event.detail === 2) { // Controlla se è un doppio click (detail === 2)
        // Invia i dati della riga doppio-cliccata a Streamlit
        // Usiamo e.data per accedere ai dati della riga
        Streamlit.setComponentValue({
            double_clicked_id: e.data['ID Prodotto'], // Puoi mettere anche e.rowIndex per prendere l'indice della riga""
            double_clicked_details: e.data['Dettagli Ordini']
        });
    }
};
""")

# Aggiungiamo il listener per l'evento 'rowDoubleClicked'
# La funzione on_double_click_js verrà eseguita quando una riga viene doppio-cliccata.
gb.on_row_double_clicked(on_double_click_js)

# Costruiamo le opzioni finali della griglia
gridOptions = gb.build()

# --- 3. Visualizzazione del DataFrame Padre ---
st.subheader("Tabella Principale Prodotti")

# Inizializziamo o aggiorniamo lo stato della sessione per i dettagli del doppio click
if 'double_clicked_id' not in st.session_state:
    st.session_state.double_clicked_id = None
    st.session_state.double_clicked_details = None

# Visualizza il DataFrame padre usando AgGrid
# L'output di AgGrid non è direttamente usato qui per la selezione,
# ma l'evento di doppio click viene gestito dal JsCode sopra.
AgGrid(
    df_parent,
    gridOptions=gridOptions,
    data_return_mode='AS_INPUT', # Restituisce i dati come sono stati forniti
    update_mode='MODEL_CHANGED', # Aggiorna la griglia quando il modello interno cambia (es. selezione)
    fit_columns_on_grid_load=True,
    allow_unsafe_jscode=True,    # Permette l'esecuzione del codice JavaScript personalizzato
    enable_enterprise_modules=False, # Imposta su True se hai la licenza Ag-Grid Enterprise
    height=300,
    width='100%',
    key='parent_dataframe' # Chiave unica per il widget AgGrid
)

# --- 4. Visualizzazione del DataFrame Figlio al Doppio Click ---
if st.session_state.double_clicked_id is not None:
    st.divider()
    st.subheader(f"Dettagli Ordini per Prodotto ID: {st.session_state.double_clicked_id}")

    # Converti la stringa JSON del DataFrame figlio in un DataFrame Pandas
    try:
        child_df_json = st.session_state.double_clicked_details
        child_df = pd.read_json(child_df_json)

        with st.expander(f"Mostra Dettagli Ordini per Prodotto {st.session_state.double_clicked_id}", expanded=True):
            st.dataframe(child_df, use_container_width=True, hide_index=True)
            st.markdown(f"Questi sono gli ordini associati al **Prodotto ID {st.session_state.double_clicked_id}**.")
    except Exception as e:
        st.error(f"Errore nel caricamento dei dettagli: {e}")
        st.write("Assicurati che i dati dei dettagli siano in un formato JSON valido.")

METODO ALTERNATIVO COL DOPPIO CLIC. Gestisci il popup che si apre con @st.dialog("Exploded data", width="large")

https://docs.streamlit.io/develop/api-reference/execution-flow/st.dialog#stexperimental_dialog
La tabella è creata con una nuova classe che eredita da AgGrid

Details

# --- Nuova Classe: ClickableDataFrame ---
class ClickableDataFrame:
    def __init__(self, df: pd.DataFrame, key: str, fields_to_extract: list = None, extract_index: bool = True, **kwargs):
        """
        Inizializza una tabella Ag-Grid cliccabile che gestisce gli eventi di doppio click.

        Args:
            df (pd.DataFrame): Il DataFrame da visualizzare.
            key (str): Una chiave unica per il widget Streamlit.
                       Questa chiave verrà usata anche come prefisso per le chiavi in st.session_state.
            fields_to_extract (list, optional): Una lista di nomi di colonne (stringhe) da estrarre
                                                dalla riga doppio-cliccata e salvare in session_state.
                                                Se None o vuota, salva l'intera riga (e.data). Defaults to None.
            extract_index (bool): Se True, l'indice posizionale della riga (e.rowIndex)
                                  verrà salvato in session_state. Defaults to True.
            **kwargs: Argomenti aggiuntivi da passare direttamente a AgGrid (es. height, width, etc.).
        """
        self.df = df
        self.key = key
        self.fields_to_extract = fields_to_extract
        self.extract_index = extract_index
        self.aggrid_kwargs = kwargs

        # Inizializza lo stato della sessione per questa istanza se non esiste già
        if f'{self.key}_double_clicked_index' not in st.session_state:
            st.session_state[f'{self.key}_double_clicked_index'] = None
            st.session_state[f'{self.key}_double_clicked_data'] = None

        self._configure_grid()

    def _configure_grid(self):
        """
        Configura le opzioni di Ag-Grid, inclusa la logica JavaScript per il doppio click.
        """
        gb = GridOptionsBuilder.from_dataframe(self.df)
        gb.configure_selection('single', use_checkbox=False) # Nessuna checkbox di selezione

        # JavaScript per gestire l'evento di doppio click sulla riga.
        # Questa funzione invierà l'indice e l'intera riga di dati a Streamlit.
        # La logica di estrazione dei campi specifici avverrà in Python.
        on_double_click_js = JsCode("""
        function(e) {{
            if (e.event.detail === 2) {{ // Controlla se è un doppio click (detail === 2)
                Streamlit.setComponentValue({{
                    index: e.rowIndex, // Indice posizionale della riga
                    data: e.data      // Tutti i dati della riga
                }});
            }}
        }};
        """)
        gb.on_row_double_clicked(on_double_click_js)

        self.grid_options = gb.build()

    def display(self):
        """
        Visualizza la tabella Ag-Grid e gestisce la risposta dal componente JavaScript.
        """
        grid_response = AgGrid(
            self.df,
            gridOptions=self.grid_options,
            data_return_mode='AS_INPUT', # Restituisce i dati così come sono stati forniti
            update_mode='MODEL_CHANGED', # Aggiorna la griglia quando il modello interno cambia (es. selezione)
            fit_columns_on_grid_load=True,
            allow_unsafe_jscode=True,    # Permette l'esecuzione del codice JavaScript personalizzato
            enable_enterprise_modules=False, # Imposta su True se hai la licenza Ag-Grid Enterprise
            key=self.key, # Chiave unica per il widget AgGrid
            **self.aggrid_kwargs
        )

        # Processa la risposta inviata dal codice JavaScript
        # La risposta personalizzata di JsCode è disponibile in grid_response.custom_response
        if grid_response.custom_response:
            clicked_index = grid_response.custom_response.get('index')
            clicked_data = grid_response.custom_response.get('data')

            if clicked_index is not None and clicked_data is not None:
                # Salva l'indice se richiesto
                if self.extract_index:
                    st.session_state[f'{self.key}_double_clicked_index'] = clicked_index
                else:
                    st.session_state[f'{self.key}_double_clicked_index'] = None # Reset se non richiesto

                # Estrai solo i campi specificati, altrimenti salva l'intera riga
                if self.fields_to_extract:
                    extracted_data = {
                        field: clicked_data.get(field)
                        for field in self.fields_to_extract
                        if field in clicked_data # Assicurati che il campo esista nei dati della riga
                    }
                    st.session_state[f'{self.key}_double_clicked_data'] = extracted_data
                else:
                    st.session_state[f'{self.key}_double_clicked_data'] = clicked_data
            else:
                # Resetta lo stato se la risposta è incompleta (non dovrebbe accadere con il JS attuale)
                st.session_state[f'{self.key}_double_clicked_index'] = None
                st.session_state[f'{self.key}_double_clicked_data'] = None

    def get_double_clicked_data(self):
        """
        Restituisce l'indice e i dati (o i campi estratti) della riga doppio-cliccata.
        Restituisce (None, None) se nessuna riga è stata doppio-cliccata o se lo stato è stato resettato.
        """
        return (
            st.session_state.get(f'{self.key}_double_clicked_index'),
            st.session_state.get(f'{self.key}_double_clicked_data')
        )

# --- 2. Creazione e Visualizzazione della Tabella Cliccabile ---
st.subheader("Tabella Principale Prodotti")

# Istanzia la nostra nuova classe ClickableDataFrame
# Specifichiamo i campi che vogliamo estrarre dalla riga doppio-cliccata.
# Se non specifichi 'fields_to_extract', verrà salvata l'intera riga.
# Se 'extract_index' è False, l'indice non verrà salvato.
clickable_table = ClickableDataFrame(
    df=df_parent,
    key='parent_table', # Chiave unica per questa istanza della tabella
    fields_to_extract=['ID Prodotto', 'Nome Prodotto', 'Dettagli Ordini'], # Campi da estrarre
    extract_index=True, # Salva l'indice posizionale
    height=300,
    width='100%'
)

# Visualizza la tabella
clickable_table.display()

if st.session_state.get(f'{clickable_table.key}_double_clicked_index') is not None:
    show_details_dialog()


@st.dialog("Exploded data", width="large")
def show_details_dialog():
    st.subheader(f"Dettagli Ordini per Riga (Indice Posizionale): {double_clicked_index}")

    try:
        child_df_json = double_clicked_data.get('Dettagli Ordini')
        if child_df_json:
            child_df = pd.read_json(child_df_json)

            st.dataframe(child_df, use_container_width=True, hide_index=True)
            st.markdown(f"Questi sono gli ordini associati alla **riga con indice posizionale {double_clicked_index}** (Prodotto ID: {product_id_from_clicked_data}).")
        else:
            st.warning("I dettagli degli ordini non sono disponibili per la riga selezionata. Assicurati che 'Dettagli Ordini' sia incluso in 'fields_to_extract' o che 'fields_to_extract' sia None.")
    except Exception as e:
        st.error(f"Errore nel caricamento dei dettagli: {e}")
        st.write("Assicurati che i dati dei dettagli siano in un formato JSON valido.")

[xyffar]

Details

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

class DoubleClickTable:
    """
    Una classe per creare e gestire una tabella Streamlit AgGrid
    con funzionalità di doppio click per catturare l'indice della riga.
    """
    def __init__(self, df: pd.DataFrame, key: str = "default_table", height: int = 300, allow_unsafe_jscode: bool = True):
        """
        Inizializza la tabella AgGrid.

        Args:
            df (pd.DataFrame): Il DataFrame da visualizzare.
            key (str): Una chiave univoca per questa istanza della tabella Streamlit AgGrid.
                       Sarà anche usata per identificare l'evento di doppio click.
            height (int): L'altezza della griglia in pixel.
            allow_unsafe_jscode (bool): Se True, permette l'esecuzione di codice JavaScript.
                                        Necessario per il gestore di doppio click.
        """
        if not isinstance(df, pd.DataFrame):
            raise ValueError("Input 'df' must be a pandas DataFrame.")

        self._df = df
        self._key = key
        self._height = height
        self._allow_unsafe_jscode = allow_unsafe_jscode
        self._grid_response = None # Per memorizzare la risposta di AgGrid
        self._double_clicked_info = None # Per memorizzare i dati del doppio click

        # Definisci il gestore JavaScript una sola volta all'inizializzazione
        self._js_double_click_handler = JsCode(f"""
        function(params) {{
            const clickedRowIndex = params.rowIndex;
            const tableKey = '{self._key}'; // La chiave della tabella, iniettata qui

            // Costruisci un oggetto Python da inviare a Streamlit
            const event_data = {{
                'table_key': tableKey,
                'row_index': clickedRowIndex
            }};

            // Invia l'oggetto event_data a Streamlit utilizzando la chiave del componente AgGrid
            if (window.Streamlit) {{
                window.Streamlit.setComponentValue('{self._key}', event_data);
            }}
        }}
        """)

    def _build_grid_options(self) -> dict:
        """Costruisce le opzioni della griglia."""
        gb = GridOptionsBuilder.from_dataframe(self._df)

        # Configura l'evento onCellDoubleClicked
        gb.configure_grid_options(onCellDoubleClicked=self._js_double_click_handler)

        # Configurazioni comuni
        gb.configure_selection("single", use_checkbox=True)
        gb.configure_pagination(enabled=True)
        gb.configure_default_column(editable=False, filter=True, sortable=True)

        return gb.build()

    def display(self):
        """
        Visualizza la tabella AgGrid e cattura la risposta.
        """
        grid_options = self._build_grid_options()

        self._grid_response = AgGrid(
            self._df,
            gridOptions=grid_options,
            allow_unsafe_jscode=self._allow_unsafe_jscode,
            update_mode=GridUpdateMode.MODEL_CHANGED,
            height=self._height,
            width='100%',
            key=self._key
        )
        
        # Recupera le informazioni sul doppio click se presenti
        self._double_clicked_info = self._grid_response.get(self._key)

    @property
    def data(self) -> pd.DataFrame:
        """Restituisce il DataFrame aggiornato dalla griglia (incluse eventuali modifiche)."""
        return self._grid_response['data'] if self._grid_response else self._df

    @property
    def selected_rows(self) -> list:
        """Restituisce la lista delle righe selezionate."""
        return self._grid_response['selected_rows'] if self._grid_response else []

    @property
    def double_clicked_row_info(self) -> dict | None:
        """
        Restituisce un dizionario contenente 'table_key' e 'row_index'
        della riga doppiocliccata, o None se nessuna riga è stata doppiocliccata.
        """
        # Verifica che l'oggetto ricevuto sia un dizionario valido
        if isinstance(self._double_clicked_info, dict) and \
           'table_key' in self._double_clicked_info and \
           'row_index' in self._double_clicked_info:
            return self._double_clicked_info
        return None

    def get_double_clicked_original_row(self) -> pd.Series | None:
        """
        Tenta di recuperare la riga originale del DataFrame basandosi
        sull'indice della riga doppiocliccata.
        Attenzione: l'indice potrebbe non corrispondere se la griglia è stata filtrata/ordinata.
        """
        info = self.double_clicked_row_info
        if info and info.get('row_index') is not None:
            try:
                # Assumiamo che l'indice restituito sia l'rowIndex della vista corrente di AG Grid
                # e cerchiamo di mappare al DataFrame originale.
                # In scenari complessi (filtri, sort), potresti voler inviare params.data completo
                # dal JS e usare quello.
                return self._df.iloc[info['row_index']]
            except IndexError:
                st.warning(f"L'indice {info['row_index']} non è valido nel DataFrame originale.")
                return None
        return None

# --- Esempio di Utilizzo della Classe ---

st.title("Demo della Classe DoubleClickTable")

# Dati di esempio
data1 = {
    'ID': [10, 20, 30],
    'Prodotto': ['Mela', 'Pera', 'Banana'],
    'Quantità': [100, 150, 200]
}
df1 = pd.DataFrame(data1)

data2 = {
    'Codice': ['A1', 'B2', 'C3', 'D4'],
    'Descrizione': ['Articolo X', 'Articolo Y', 'Articolo Z', 'Articolo W'],
    'Prezzo': [10.5, 22.0, 5.75, 18.2]
}
df2 = pd.DataFrame(data2)


st.subheader("Tabella Prodotti (my_products_table)")
products_table = DoubleClickTable(df=df1, key="my_products_table", height=200)
products_table.display()

# Mostra le informazioni di doppio click per la Tabella Prodotti
double_click_info_products = products_table.double_clicked_row_info
if double_click_info_products:
    st.success(f"DOPPIO CLICK sulla Tabella Prodotti! Chiave: **{double_click_info_products['table_key']}**, Indice: **{double_click_info_products['row_index']}**")
    original_row = products_table.get_double_clicked_original_row()
    if original_row is not None:
        st.write("Dati riga originale:")
        st.dataframe(pd.DataFrame([original_row]))


st.markdown("---")


st.subheader("Tabella Articoli (my_items_table)")
items_table = DoubleClickTable(df=df2, key="my_items_table", height=250)
items_table.display()

# Mostra le informazioni di doppio click per la Tabella Articoli
double_click_info_items = items_table.double_clicked_row_info
if double_click_info_items:
    st.info(f"DOPPIO CLICK sulla Tabella Articoli! Chiave: **{double_click_info_items['table_key']}**, Indice: **{double_click_info_items['row_index']}**")
    original_row = items_table.get_double_clicked_original_row()
    if original_row is not None:
        st.write("Dati riga originale:")
        st.dataframe(pd.DataFrame([original_row]))

st.markdown("---")

st.subheader("DataFrame post-interazione (solo per debug)")
st.write("DataFrame della prima tabella (con modifiche, se abilitate):")
st.dataframe(products_table.data)

st.write("Righe selezionate della prima tabella:")
st.write(products_table.selected_rows)

[xyffar]

Details

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


@st.dialog(title="In depth information", width="large")
def show_popup(table):
    st.write(
        f"Double clicked row: {table.idx_last_double_clicked}\n"
        f"Table: {table.double_clicked_table}"
    )
    cols = st.columns(2)
    with cols[0]:
        st.dataframe(
            table.data["Colonna4_NestedDF"].iloc[table.idx_last_double_clicked]
        )
    with cols[1]:
        st.dataframe(
            table.data["Colonna5_NestedDF"].iloc[table.idx_last_double_clicked]
        )


class DoubleClickTable:
    def __init__(
        self,
        df: pd.DataFrame,
        key: str = "default_table",
        height: int = 300,
        allow_unsafe_jscode: bool = True,
    ):
        if not isinstance(df, pd.DataFrame):
            raise ValueError("Input 'df' must be a pandas DataFrame.")

        self._df = df
        self._key = key
        self._height = height
        self._allow_unsafe_jscode = allow_unsafe_jscode
        self._grid_response = None  # Per memorizzare la risposta di AgGrid
        self._double_clicked_info = None  # Per memorizzare i dati del doppio click

        # Definisci il gestore JavaScript una sola volta all'inizializzazione
        self._js_double_click_handler = JsCode(f"""
        function(params) {{
            let clickedRowIndex = params.rowIndex;
            let clickedTable = '{self._key}';
            params.node.setDataValue('Idx', clickedRowIndex);
            params.node.setDataValue('Table', clickedTable);
            params.node.setDataValue('DoubleClickTimestamp', Date.now());
            }}
        """)
        self._grid_options = self._build_grid_options()

    def _build_grid_options(self) -> dict:
        """Costruisce le opzioni della griglia."""
        gb = GridOptionsBuilder.from_dataframe(self._df)
        # creates a virtual column to handle click data
        gb.configure_column("Idx", hide=True)
        gb.configure_column("Table", hide=True)
        gb.configure_column("DoubleClickTimestamp", hide=True)

        # Configura l'evento onCellDoubleClicked
        gb.configure_grid_options(onCellDoubleClicked=self._js_double_click_handler)

        # Configurazioni comuni
        gb.configure_selection("single", use_checkbox=True)
        gb.configure_pagination(enabled=False)
        gb.configure_default_column(editable=False, filter=True, sortable=True)

        return gb.build()

    def display(self):
        """
        Visualizza la tabella AgGrid e cattura la risposta.
        """

        self._grid_response = AgGrid(
            self._df,
            gridOptions=self._grid_options,
            allow_unsafe_jscode=self._allow_unsafe_jscode,
            update_mode=GridUpdateMode.MODEL_CHANGED,
            height=self._height,
            width="100%",
            key=self._key,
        )

        (
            self.double_clicked_table,
            self.idx_last_double_clicked,
            self.recently_double_clicked,
        ) = self.get_double_clicked_data()

    @property
    def data(self) -> pd.DataFrame:
        """Restituisce il DataFrame aggiornato dalla griglia (incluse eventuali modifiche)."""
        return self._grid_response["data"] if self._grid_response else self._df

    def get_double_clicked_data(self):
        if (
            "Idx" in self.data.columns
            and "Table" in self.data.columns
            and "DoubleClickTimestamp" in self.data.columns
        ):
            last_double_click = self.data["DoubleClickTimestamp"].max()
            idx_last_double_clicked = int(self.data["DoubleClickTimestamp"].idxmax())
            double_clicked_table = self.data["Table"].iloc[idx_last_double_clicked]
            now = int(datetime.now().timestamp() * 1000)
            recently_double_clicked: bool = (now - last_double_click) < 1000
        return double_clicked_table, idx_last_double_clicked, recently_double_clicked


# --- Esempio di Utilizzo della Classe ---

st.title("Demo della Classe DoubleClickTable")


# ----------------------------------------------------------------------------
def create_nested_df(prefix, num_rows):
    data = {
        f"{prefix}_ID": np.arange(1, num_rows + 1),
        f"{prefix}_Valore": np.random.rand(num_rows) * 100,
        f"{prefix}_Categoria": np.random.choice(["A", "B", "C"], num_rows),
    }
    return pd.DataFrame(data)


data_main = {
    "Colonna1": ["Riga1", "Riga2", "Riga3", "Riga4"],
    "Colonna2": [10, 20, 30, 40],
    "Colonna3": ["X", "Y", "Z", "W"],
}
df_main = pd.DataFrame(data_main)

nested_df_col4 = [create_nested_df("Dettaglio1", 2) for _ in range(len(df_main))]
nested_df_col5 = [create_nested_df("Dettaglio2", 3) for _ in range(len(df_main))]
nested_df_col6 = [create_nested_df("Dettaglio3", 1) for _ in range(len(df_main))]

df_main["Colonna4_NestedDF"] = nested_df_col4
df_main["Colonna5_NestedDF"] = nested_df_col5
df_main["Colonna6_NestedDF"] = nested_df_col6
# ----------------------------------------------------------------------------
st.subheader("Tabella Prodotti (my_products_table)")
products_table = DoubleClickTable(df=df_main, key="my_products_table", height=200)
products_table.display()


if products_table.recently_double_clicked:
    show_popup(products_table)