ag grid 不支持直接按行设置格式，但可通过自定义 valueformatter 函数，基于当前行的标识字段（如首列值）动态选择百分比或数字格式，实现同一列内不同行呈现不同样式。
ag grid 不支持直接按行设置格式，但可通过自定义 valueformatter 函数，基于当前行的标识字段（如首列值）动态选择百分比或数字格式，实现同一列内不同行呈现不同样式。
在 AG Grid 中，格式化能力默认以列为单位（通过 columnDefs.valueFormatter），但实际业务中常需“同一列、不同行显示不同格式”——例如表头为 col1、col2、col3，首行为数值型（带千分位，如 2,345.6），次行为百分比（如 13.8%）。由于数据结构不可转置（即不能将行转为列），必须在渲染时动态判断。
核心思路是：编写一个通用 valueFormatter，利用参数中的 params.node 和 params.data 获取当前行上下文，根据某列（如第一列的值）决定格式逻辑。
✅ 示例实现（React + AG Grid v30+）：
const columnDefs = [
{ field: 'category', headerName: 'Category', width: 120 },
{
field: 'col2',
headerName: 'Col 2',
valueFormatter: (params) => {
const rowType = params.data?.category; // 假设首列为类型标识字段
const value = params.value;
if (rowType === 'value') {
// 数值格式：保留1位小数 + 千分位
return new Intl.NumberFormat('en-US', {
minimumFractionDigits: 1,
maximumFractionDigits: 1,
}).format(value);
} else if (rowType === 'percentage') {
// 百分比格式：转为百分比并保留1位小数
return new Intl.NumberFormat('en-US', {
style: 'percent',
minimumFractionDigits: 1,
maximumFractionDigits: 1,
}).format(value / 100); // 注意：若原始值为13.8（非0.138），则此处用 value / 100；若已是小数，则直接 format(value)
}
return value;
},
},
{
field: 'col3',
headerName: 'Col 3',
valueFormatter: (params) => {
const rowType = params.data?.category;
const value = params.value;
if (rowType === 'value') {
return new Intl.NumberFormat('en-US', {
minimumFractionDigits: 1,
maximumFractionDigits: 1,
}).format(value);
} else if (rowType === 'percentage') {
return new Intl.NumberFormat('en-US', {
style: 'percent',
minimumFractionDigits: 1,
maximumFractionDigits: 1,
}).format(value / 100);
}
return value;
},
},
];? 数据结构建议（确保可识别行类型）：
const rowData = [
{ category: 'value', col2: 2345.6, col3: 3677.7 },
{ category: 'percentage', col2: 13.8, col3: 9.6 },
];⚠️ 注意事项：
- params.data 是当前行完整数据对象，务必确保其存在且含可区分行类型的字段（如 category、type 或 label）；
- 若原始百分比数据存储为 13.8（而非 0.138），调用 Intl.NumberFormat 的 style: 'percent' 时需先除以 100；反之则直接传入；
- 避免在 valueFormatter 中执行重计算或异步操作，它应在毫秒级完成；
- 如需支持国际化（如德语千分位为 .、小数点为 ,），可传入对应 locale（如 'de-DE'）；
- 此方案兼容服务端渲染（SSR）和所有 AG Grid 渲染模式（客户端/服务端/无穷滚动）。
? 进阶提示：若行类型标识不固定（如无 category 字段），也可通过 params.node.rowIndex 判断奇偶行，但强烈不推荐——耦合渲染顺序，违背数据驱动原则。始终优先使用语义化字段做条件判断。
综上，AG Grid 的灵活性在于将格式逻辑下沉至函数式接口，通过 params 暴露的行级上下文，轻松实现“列定义统一、行渲染各异”的专业表格效果。
