AG Grid透视聚合列转置求助：如何实现目标表格布局

当前你已完成model字段的透视，但需要将行与列的维度互换（目标为聚合指标作为行、model值作为列），AG Grid没有原生的转置开关，但可以通过调整行分组与透视配置实现需求，具体修改如下：

修改后的代码配置 #

TypeScript 数据与列定义 #

public rowData = [
  { order: 1, amount: 100, model: "A"},
  { order: 2, amount: 200, model: "A"},
  { order: 3, amount: 100, model: "A"},
  { order: 4, amount: 200, model: "A"},
  { order: 5, amount: 100, model: "B"},
  { order: 6, amount: 200, model: "B"},
  { order: 7, amount: 100, model: "B"},
  { order: 8, amount: 100, model: "C"},
  { order: 9, amount: 100, model: "C"},
  { order: 10, amount: 200, model: "D"},
];

public columnDefs: ColDef[] = [
  // 将聚合字段设为行分组维度，显示为行标题
  { field: 'order', rowGroup: true, headerName: '订单数', aggFunc: 'count', hide: false },
  { field: 'amount', rowGroup: true, headerName: '总金额', aggFunc: 'sum', hide: false },
  // model作为透视列维度，每个model值生成一列
  { field: 'model', pivot: true },
  // 为每个透视列指定对应的聚合逻辑（隐藏列，仅用于计算）
  { field: 'order', pivot: true, aggFunc: 'count', hide: true },
  { field: 'amount', pivot: true, aggFunc: 'sum', hide: true }
];

HTML 组件模板 #

<div style="display: flex; flex-direction: column; height: 100%;">
<ag-grid-angular
  style="width: 100%; height: 100%;"
  class="ag-theme-alpine"
  [columnDefs]="columnDefs"
  [pivotMode]="true"
  [rowData]="rowData"
  [groupDefaultExpanded]="-1" <!-- 默认展开所有行分组，直接显示聚合结果 -->
  [suppressAggFuncInHeader]="true" <!-- 隐藏表头中的聚合函数标识，优化显示 -->
  [suppressRowGroupHiding]="true" <!-- 禁止行分组列被隐藏 -->
></ag-grid-angular>
</div>

配置说明 #

• 把order和amount设为rowGroup: true，让聚合指标成为行的维度，分组后直接显示聚合结果。
• model设为pivot: true，将不同model值拆分为独立列。
• 额外添加的隐藏透视列，用于为每个model列绑定对应的聚合计算逻辑（count订单数、sum金额）。
• 附加的配置项用于优化显示效果，确保表格直接呈现目标结构，无需手动展开分组。

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