Streamlit中AG Grid在st.tabs下固定列宽异常变为0的问题求助

首先，你的代码里有个致命变量错误：

• 你在AgGrid组件中传入的是selected_vessel_df，但前面过滤主题数据得到的是selected_subject_df，这会导致表格渲染错误的数据集，甚至因为结构不匹配直接引发列宽被压缩到0的问题。先把这个变量名修正为selected_subject_df。

针对多Tab下AG Grid列宽异常的问题，再补充几个关键优化点：

1. 给列定义强制设置最小宽度 #

检查get_grid_options函数返回的列配置，确保每个需要固定宽度的列同时设置width和minWidth，避免列宽被压缩至0：

# 示例列定义（在get_grid_options中）
column_defs = [
    {
        "headerName": "分类名称",
        "field": "category_name",
        "width": 180,
        "minWidth": 120,  # 强制最小宽度，防止被压缩
        "resizable": True
    },
    # 其他列同理配置
]

2. 每个Tab的表格用独立的gridOptions实例 #

Streamlit的Tabs组件在渲染时会复用DOM元素，共享同一个gridOptions会导致列宽计算冲突。确保循环内每个Tab都生成独立的gridOptions：

# 循环内每次调用get_grid_options生成新实例
subject_overview_grid_options = get_grid_options(
    'subject_overview_categories', 
    selected_subject_df, 
    recent_period=recent_period_month
)
# 可选：添加唯一标识强制独立渲染
subject_overview_grid_options["domLayout"] = "normal"

3. 禁用自动列宽调整 #

确保gridOptions里没有开启自动调整列宽的配置，同时显式关闭自动尺寸计算：

subject_overview_grid_options.update({
    "suppressAutoSize": True,
    "suppressColumnVirtualisation": False  # 根据数据量调整，大数据量建议开启
})

4. 开启Tab切换时的布局重计算 #

在AgGrid组件中添加update_mode参数，确保切换Tab时表格重新计算布局：

AgGrid(
    selected_subject_df,  # 已修正的变量名
    custom_css=custom_css,
    gridOptions=subject_overview_grid_options,
    allow_unsafe_jscode=True,
    alwaysShowHorizontalScroll=True,
    height=850,
    theme='balham',
    update_mode='MODEL_CHANGED'  # 强制切换Tab时更新布局
)

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