如何获取streamlit-aggrid中行组选择的详细信息？

当使用streamlit-aggrid创建带行组的表格时，默认选中分组行不会返回分组信息——因为分组行是ag-grid生成的虚拟行，不属于原始数据集。要获取分组名称及组内行信息，需要通过ag-grid的JavaScript API监听选择事件，自定义处理分组行数据并传递给Streamlit。

实现步骤 #

1. 配置表格分组与选择项
   先构建基础表格配置，启用行分组，允许单独选择分组行（不自动选中子行），并为分组行设置唯一ID便于识别。

2. 注入自定义JavaScript监听选择事件
   通过自定义JS代码监听表格的选择变化事件，判断选中的是否为分组行，提取分组名称和组内所有行数据，再传递给Streamlit的session_state。

3. 在Streamlit中获取并展示分组信息
   从session_state中读取传递过来的分组数据，进行展示。

完整代码示例 #

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

# 准备测试数据
df = pd.DataFrame({
    'Category': ['Fruit', 'Fruit', 'Vegetable', 'Vegetable'],
    'Item': ['Apple', 'Banana', 'Carrot', 'Spinach'],
    'Price': [1.2, 0.8, 0.5, 0.3]
})

# 构建表格配置
gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_column('Category', rowGroup=True, hide=True)  # 设置Category列为分组列并隐藏
gb.configure_selection(
    selection_mode='single',  # 可改为'multiple'支持多选
    use_checkbox=True,
    groupSelectsChildren=False  # 选中分组行时不自动选中子行
)
# 为行设置唯一ID，分组行用"group-分组名"标识
gb.configure_grid_options(
    getRowNodeId=lambda data: data['Item'] if 'Item' in data else f"group-{data['key']}"
)
grid_options = gb.build()

# 自定义JS：监听选择事件，提取分组信息并传递给Streamlit
custom_js = """
document.addEventListener('DOMContentLoaded', function() {
    const gridDiv = document.querySelector('.ag-grid');
    if (!gridDiv) return;

    const gridApi = gridDiv.querySelector('.ag-root-wrapper').gridOptions.api;
    gridApi.addEventListener('selectionChanged', function() {
        const selectedNodes = gridApi.getSelectedNodes();
        const selectedGroups = [];
        const selectedRows = [];

        selectedNodes.forEach(node => {
            if (node.group) {
                // 处理分组行：提取分组名和所有子行数据
                selectedGroups.push({
                    groupName: node.key,
                    childRows: node.allChildren.map(child => child.data)
                });
            } else {
                // 处理普通数据行
                selectedRows.push(node.data);
            }
        });

        // 将数据发送到Streamlit的session_state
        window.parent.postMessage({
            type: 'streamlit:setComponentValue',
            value: {selectedGroups: selectedGroups, selectedRows: selectedRows}
        }, '*');
    });
});
"""

# 渲染AgGrid表格，启用自定义JS
response = AgGrid(
    df,
    gridOptions=grid_options,
    update_mode=GridUpdateMode.MODEL_CHANGED,
    data_return_mode=DataReturnMode.FILTERED_AND_SORTED,
    allow_unsafe_jscode=True,  # 必须开启以运行自定义JS
    custom_javascript=custom_js
)

# 展示选中的分组信息
if 'selectedGroups' in st.session_state and st.session_state['selectedGroups']:
    st.subheader("选中的分组详情")
    for group in st.session_state['selectedGroups']:
        st.markdown(f"**分组名称**: {group['groupName']}")
        st.markdown("**组内行数据**:")
        st.dataframe(pd.DataFrame(group['childRows']))

# 展示选中的普通行
if response['selected_rows']:
    st.subheader("选中的普通行")
    st.dataframe(pd.DataFrame(response['selected_rows']))

关键注意事项 #

• 必须设置allow_unsafe_jscode=True，否则自定义JavaScript代码无法执行。
• groupSelectsChildren参数：设为True时选中分组行会自动选中所有子行，设为False则仅选中分组行本身，可根据需求调整。
• 分组行的判断通过node.group属性，分组名称存在于node.key中，组内所有行节点可通过node.allChildren获取。

内容的提问来源于stack exchange，提问作者pietroppeter