如何在AG GRID中将Total合计行展示在表格顶部

方案1：使用内置顶部固定行（推荐） #

AG Grid原生支持顶部固定行能力，无需修改原始数据源顺序，直接将计算好的Total行数据传入对应配置即可：

const gridOptions = {
  // 其余常规表格配置
  columnDefs: [
    { field: 'category' },
    { field: 'sales', aggFunc: 'sum' }
  ],
  // 直接配置顶部固定行数据
  pinnedTopRowData: [
    { category: 'Total', sales: 13800 }
  ]
}

如果需要动态计算Total值，可在数据加载完成后调用API更新：

// 数据加载完成后执行更新
function refreshTotalRow() {
  const allRows = []
  gridApi.forEachNode(node => allRows.push(node.data))
  const totalSales = allRows.reduce((sum, item) => sum + item.sales, 0)
  gridApi.setPinnedTopRowData([{ category: 'Total', sales: totalSales }])
}

方案2：分组聚合场景下的Total行置顶 #

如果你开启了分组聚合功能，需要将分组总汇总行放在顶部，直接修改聚合配置即可：

const gridOptions = {
  columnDefs: [
    { field: 'region', rowGroup: true },
    { field: 'sales', aggFunc: 'sum' }
  ],
  groupIncludeTotalRow: true,
  // 配置总汇总行位置为顶部
  groupTotalRowPosition: 'top',
  // 若需要子分组的汇总行也放在子分组顶部，新增以下配置
  groupIncludeFooter: true,
  groupFooterPosition: 'top'
}

特殊场景方案：Total行参与排序筛选 #

如果你需要Total行和普通行一样支持排序、筛选联动，不想使用固定行样式，可以通过自定义排序字段实现：

• 给所有数据新增sortPriority字段，Total行赋值为0，其余普通行赋值为1
• 给Grid配置默认排序规则为sortPriority升序，其余字段排序优先级低于该字段即可

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