Streamlit AgGrid中rowSpan属性失效，报错this.colDef.rowSpan is not a function

你遇到的this.colDef.rowSpan is not a function错误，是因为AgGrid的rowSpan配置项不能直接设为布尔值，它要求传入一个函数，用来动态计算每个单元格的跨行行数。下面是修正后的实现方案：

核心思路 #

1. 先预处理数据，计算每个Category分组的总行数，只保留每组第一行的跨行数值，其余重复行设为0（表示不显示，让上方单元格跨覆盖）
2. 给Category列配置rowSpan函数，返回预先计算好的跨行数
3. 配合CSS调整跨行单元格的样式

完整修正代码 #

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

# Sample DataFrame
data = {
    'Category': ['A', 'A', 'B', 'B', 'B', 'C'],
    'Value': [10, 20, 30, 40, 50, 60]
}
df = pd.DataFrame(data)

# 预处理：计算每个Category的跨行数
df['row_span'] = df.groupby('Category')['Category'].transform('count')
# 重复的Category行设为0，只保留每组第一行的跨行数
mask = df.duplicated('Category')
df.loc[mask, 'row_span'] = 0

# Configure AgGrid options
gb = GridOptionsBuilder.from_dataframe(df)
# 关键：rowSpan传入函数，从数据中取预计算的跨行数
gb.configure_column("Category", 
                    rowSpan=lambda params: params.data['row_span'],
                    cellClassRules={
                        'cell-span': 'params.data.row_span > 0'
                    })
gb.configure_column("Value")
# 隐藏辅助用的row_span列
gb.configure_column("row_span", hide=True)

grid_options = gb.build()

# 优化跨行单元格的CSS样式
st.markdown("""
    <style>
    .ag-cell.cell-span {
        background-color: #f0f0f0;
        border-bottom: 1px solid #d0d0d0;
        vertical-align: middle;
    }
    /* 隐藏被跨行覆盖的单元格的内容和边框 */
    .ag-cell[style*="row-span: 0"] {
        border: none;
        color: transparent;
    }
    </style>
    """, unsafe_allow_html=True)

# 显示表格，必须开启allow_unsafe_jscode以支持自定义函数
AgGrid(df, gridOptions=grid_options, allow_unsafe_jscode=True)

关键说明 #

• rowSpan参数必须是一个接收params对象的函数，params.data可以获取当前行的所有数据，我们从中取出预计算的row_span值返回
• 预处理数据时，用groupby.transform('count')得到每个分组的总行数，再用duplicated标记重复行，将重复行的跨行数设为0，这样AgGrid会自动让上方单元格覆盖这些行
• 开启allow_unsafe_jscode=True是必须的，因为我们使用了自定义的JavaScript函数（通过lambda转换）

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