Streamlit中使用st_aggrid添加固定左侧索引列的需求

核心逻辑 #

不用绑定原数据的固定索引，而是利用st_aggrid的表格渲染行索引，动态生成当前排序后的位次，同时将该列固定在左侧。排序时表格的渲染行顺序变化，位次会自动同步更新。

数字位次实现代码 #

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

# 模拟你的经销商数据（替换成实际数据）
df = pd.DataFrame({
    "经销商": ["BNP", "ABC", "XYZ", "DEF", "GHI"],
    "covered": [80, 95, 70, 85, 90],
    "其他指标": [120, 150, 90, 110, 160]
})

# 构建表格配置
gb = GridOptionsBuilder.from_dataframe(df)

# 添加动态位次列，固定在左侧
gb.add_column(
    headerName="位次",
    field="dynamic_rank",
    pinned="left",
    width=80,
    # 直接取表格渲染时的行索引+1，排序后自动更新
    cellRenderer=lambda params: params.node.rowIndex + 1
)

# 开启列的排序、筛选功能
gb.configure_default_column(sortable=True, filter=True)
grid_options = gb.build()

# 渲染表格，开启JS渲染支持
AgGrid(
    df,
    gridOptions=grid_options,
    update_mode=GridUpdateMode.VALUE_CHANGED,
    allow_unsafe_jscode=True
)

图片形式位次实现 #

如果需要用图片代替数字，先准备好命名为1.png到5.png的位次图片，放在项目根目录的static文件夹下，然后修改位次列的渲染器：

# 替换位次列的add_column配置
gb.add_column(
    headerName="位次",
    field="dynamic_rank",
    pinned="left",
    width=80,
    # 自定义JS渲染器，加载对应位次的图片
    cellRenderer="""
        function(params) {
            const rank = params.node.rowIndex + 1;
            return `<img src="/static/${rank}.png" alt="位次${rank}" style="width:40px; margin:auto; display:block;">`;
        }
    """,
)

关键说明 #

• params.node.rowIndex是表格渲染时的当前行位置，排序后行顺序变化，该值会自动更新，因此位次始终对应当前排序后的位置
• pinned="left"确保位次列固定在左侧，不会随表格滚动偏移
• allow_unsafe_jscode=True必须开启，才能使用自定义的JS或lambda渲染器
• 部署时如果用图片，需确保图片路径可访问（比如将图片打包进部署包，或使用CDN链接）

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