Code Editor for app.py

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

st.title("Master-Detail Grid Example")

# Load sample data
# NOTE: Using corsproxy.io because we're in a WASM environment. If running locally,
# you can remove the corsproxy.io prefix.
url = "https://corsproxy.io/?https://www.ag-grid.com/example-assets/master-detail-data.json"
r = requests.get(url)
data = r.json()

df = pd.read_json(url)
df["callRecords"] = df["callRecords"].apply(lambda x: pd.json_normalize(x))

gridOptions = {
    # enable Master / Detail
    "masterDetail": True,
    "rowSelection": "single",
    # the first Column is configured to use agGroupCellRenderer
    "columnDefs": [
        {
            "field": "name",
            "cellRenderer": "agGroupCellRenderer",
            "checkboxSelection": True,
        },
        {"field": "account"},
        {"field": "calls"},
        {"field": "minutes", "valueFormatter": "x.toLocaleString() + 'm'"},
    ],
    "defaultColDef": {
        "flex": 1,
    },
    # provide Detail Cell Renderer Params
    "detailCellRendererParams": {
        # provide the Grid Options to use on the Detail Grid
        "detailGridOptions": {
            "rowSelection": "multiple",
            "suppressRowClickSelection": True,
            "enableRangeSelection": True,
            "pagination": True,
            "paginationAutoPageSize": True,
            "columnDefs": [
                {"field": "callId", "checkboxSelection": True},
                {"field": "direction"},
                {"field": "number", "minWidth": 150},
                {"field": "duration", "valueFormatter": "x.toLocaleString() + 's'"},
                {"field": "switchCode", "minWidth": 150},
            ],
            "defaultColDef": {
                "sortable": True,
                "flex": 1,
            },
        },
        # get the rows for each Detail Grid
        "getDetailRowData": JsCode(
            """function (params) {
                params.successCallback(params.data.callRecords);
    }"""
        ),
    },
    "rowData": data
}

# Create tabs for better organization
tabs = st.tabs(["Grid", "Raw Data"])

with tabs[0]:
    st.write("Click on the + icon to expand the details for each row")
    grid_response = AgGrid(
        None,
        gridOptions=gridOptions,
        allow_unsafe_jscode=True,
        enable_enterprise_modules=True,
        key="master_detail_grid",
    )

with tabs[1]:
    st.write("Raw JSON data:")
    st.json(data)

# Show selected rows if any
if grid_response.selected_rows:
    st.write("Selected rows:", grid_response.selected_rows)