如何在Python NiceGUI AG-Grid中优化对象类型字段的单元格显示？

问题根源 #

AG Grid 默认无法识别 Python 的 dataclass 对象，会将其作为普通 JavaScript 对象处理，因此直接渲染时显示 [object Object]，控制台也会提示需要为对象类型提供自定义格式化器。

优化方案 #

在列定义（columnDefs）中为 id 字段添加自定义格式化器，将 RowId 对象转换为可读的字符串格式。

修正后的完整代码 #

from dataclasses import dataclass

@dataclass(frozen=True)
class RowId:
    key_part1: str
    key_part2: str

@dataclass
class Row:
    id: RowId
    data: str

spec = {
    'columnDefs': [
        {
            'headerName': 'id', 
            'field': 'id',
            # 添加自定义格式化器，将RowId对象转为可读字符串
            'valueFormatter': """function(params) {
                return params.value.key_part1 + '-' + params.value.key_part2;
            }"""
        },
        {'headerName': 'data', 'field': 'data'}
    ],
    'rowData': [
        Row(RowId('a', 'b'), 'c')
    ]
}

ui.aggrid(spec)

关键说明 #

• valueFormatter 接收一个 JavaScript 函数，params.value 对应 Python 端传入的 RowId 对象，直接访问其属性（key_part1、key_part2）即可拼接成需要的格式。
• 你可以根据需求调整格式化逻辑，比如改成 {key_part1}:{key_part2} 或者其他更符合业务的显示格式。

另一种Python端预处理方案 #

如果不想在前端写JS逻辑，也可以在Python端提前将RowId对象转换为字符串：

from dataclasses import dataclass

@dataclass(frozen=True)
class RowId:
    key_part1: str
    key_part2: str

@dataclass
class Row:
    id: RowId
    data: str

    def __post_init__(self):
        # 初始化后自动将id转为拼接字符串
        self.id = f"{self.id.key_part1}-{self.id.key_part2}"

spec = {
    'columnDefs': [
        {'headerName': 'id', 'field': 'id' },
        {'headerName': 'data', 'field': 'data'}
    ],
    'rowData': [
        Row(RowId('a', 'b'), 'c')
    ]
}

ui.aggrid(spec)

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