Code Editor for app.py

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


@st.cache_data
def get_data():
  r = pd.read_json("https://www.ag-grid.com/example-assets/olympic-winners.json")
  return r

df = get_data()


cell_click_handler = JsCode("""
function(params) {
    // Extract relevant information from the event
    const clickedColumn = params.column.colId;
    const clickedRowIndex = params.rowIndex;
    const clickedValue = params.node.data[clickedColumn];
    
    // Display information about the click
    const message = `You clicked on row ${clickedRowIndex}, column ${clickedColumn}, value is ${clickedValue}`;
    alert(message);
    
    // Update the 'clicked' column with the current timestamp
    params.node.setDataValue('clicked', Date.now());
}
""")

# Initialize the grid builder with your dataframe
grid_builder = GridOptionsBuilder.from_dataframe(df)

# Add a virtual column to store click timestamps
grid_builder.configure_column("clicked", "Clicked Timestamp")

# Configure the grid with the click handler
grid_builder.configure_grid_options(onCellClicked=cell_click_handler)

# Build the final grid options
grid_options = grid_builder.build()

# Create tabs to show the grid and response data
tabs = st.tabs(["Grid", "Response"])

with tabs[0]:
    # Render the grid, enabling unsafe JavaScript execution
    response = AgGrid(
        df,
        grid_options,
        allow_unsafe_jscode=True
    )

with tabs[1]:
    # Display the grid's data including any updates
    st.write(response.data)
    
    # If timestamps exist, show the last click time
    if 'clicked' in response.data.columns:
        last_click = pd.to_datetime(response.data["clicked"], unit='ms').max()
        st.write(f"Last click was at {last_click} UTC")