如何在 ag-grid 的页脚中显示特定列的总和

Question

如何在 ag-grid table 的页脚显示特定列的总和。例如，如果我在 ag-grid table 中有列名工资，那么我想在网格底部显示工资总额，如以下屏幕所示。

Answer 1

您可以使用 AgGrid 文档的 pinnedBottomRowData grid property that is talked about in the Row Pinning 部分。

使用问题中的列，您可以执行以下操作：

getTotalRow(rowData) {
  const initial = {
    fname: undefined,
    lname: undefined,
    position: undefined,
    office: 'Total', // if you want to display in the 'Total' in the Office column
    salary: 0,
  };

  // iterate overRow data summing each property for total
  // assuming lodash reduce is available and skipping actual summing logic of salary
  const rowTotal = reduce((totals, rowData) => {...}, initial) 


  // rowTotal has a structure like:
  //  {
  //    fname: undefined, // undefined should render blank cell in row at column
  //    lname: undefined,
  //    position: undefined,
  //    office: 
  //    salary: 1234567.89,
  //  }

  // have to format in an array as pinnedBottomRowData expects the same format as rowData
  return [rowTotal];
}

这种方法的缺点是您必须手动运行列汇总并自己构建 rowData object 但我认为这是一个比列更简单的解决方案如果您做的不仅仅是显示数据（进行单元格编辑、编辑后重新计算特定单元格等），聚合会很快变得复杂。

此外，它固定在网格的底部，因此如果您没有足够的行，最后一行数据和总计行之间将有 space（见屏幕截图）。 Row/Column headers 没关系所以我把它们涂黑了。

如何在 ag-grid 的页脚中显示特定列的总和

How display particular column summation in footer in ag-grid

javascript

ag-grid