如何为streamlit-aggrid设置列最大长度截断过长单元格内容

问题描述 #

使用streamlit-aggrid渲染表格时，如果某列存在内容极长的单元格，默认配置下该列会占据表格绝大部分宽度，挤压其他列的展示空间。
默认渲染代码如下：

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

df = pd.DataFrame({'some short column': ['a', 'b', 'c'],
                   'some long column': ['all column and no spacing makes coder a dull boy '
                                        'all column and no spacing makes coder a dull boy '
                                        'all column and no spacing makes coder a dull boy '
                                        'all column and no spacing makes coder a dull boy '
                                        'all column and no spacing makes coder a dull boy '
                                        'all column and no spacing makes coder a dull boy '
                                        'all column and no spacing makes coder a dull boy '
                                        'all column and no spacing makes coder a dull boy ', 'two', 'three'],
                   'some other column': ['one', 'two', 'three'],
                   'some other column 2': ['one', 'two', 'three']})

AgGrid(df)

默认渲染效果：

有副作用的常见方案 #

直接传入fit_columns_on_grid_load=True参数：

AgGrid(df, fit_columns_on_grid_load=True) 

该写法在列数较少的示例中可实现列宽适配，但当DataFrame列数超过20列时，会强制所有列压缩到表格可视区域宽度内，导致列被过度挤压，内容无法正常阅读。
多列场景下的异常效果：

最优解决方案 #

通过GridOptionsBuilder配置列默认规则，给列设置最大宽度阈值，同时开启长文本自动截断显示省略号，既避免单列过宽，也不会在多列场景下压缩列宽。
完整实现代码：

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

df = pd.DataFrame({'some short column': ['a', 'b', 'c'],
                   'some long column': ['all column and no spacing makes coder a dull boy '
                                        'all column and no spacing makes coder a dull boy '
                                        'all column and no spacing makes coder a dull boy '
                                        'all column and no spacing makes coder a dull boy '
                                        'all column and no spacing makes coder a dull boy '
                                        'all column and no spacing makes coder a dull boy '
                                        'all column and no spacing makes coder a dull boy '
                                        'all column and no spacing makes coder a dull boy ', 'two', 'three'],
                   'some other column': ['one', 'two', 'three'],
                   'some other column 2': ['one', 'two', 'three']})

# 从DataFrame初始化表格配置构建器
gb = GridOptionsBuilder.from_dataframe(df)

# 配置所有列的默认展示规则
gb.configure_default_column(
    # 开启列宽根据内容自动适配
    auto_size=True,
    # 设置单列最大宽度，可根据自身页面布局调整，推荐200-400区间
    max_width=300,
    # 关闭文本自动换行
    wrap_text=False,
    # 配置单元格样式：超出内容截断，显示省略号
    cellStyle={'textOverflow': 'ellipsis', 'whiteSpace': 'nowrap'}
)

grid_options = gb.build()
# 渲染表格，允许js样式生效
AgGrid(df, gridOptions=grid_options, allow_unsafe_jscode=True)

配置说明 #

• 无需开启全局fit_columns_on_grid_load参数，列宽会根据内容自动适配到不超过设置的最大宽度值
• 被截断的单元格，鼠标悬浮时会自动弹出完整内容提示，不影响长文本查看
• 多列场景下，超出表格可视宽度的部分会自动生成横向滚动条，不会挤压已有列的展示宽度
• 如果需要给特定列单独设置不同的宽度规则，可使用gb.configure_column(column_name, 对应配置参数)单独覆盖默认规则

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