如何在 ag-grid 的頁腳中顯示特定的列總和

Question

如何在 ag-grid 表的頁腳中顯示特定列的總和。 例如，如果我在 ag-grid 表中有列名工資，那么我想在網格底部顯示總工資總和，如下面的屏幕所示。

Answer 1

您可以使用在 AgGrid 文檔的行固定部分中討論的pinnedBottomRowData網格屬性。

使用問題中的列，您可以執行以下操作：

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 但我認為這是一個比列聚合更簡單的解決方案，如果您要做的不僅僅是顯示數據（使單元格編輯，編輯后重新計算特定單元格等）

這也固定在網格的底部，因此如果您沒有足夠的行，您將在最后一行數據和 Total 行之間留出空間（參見屏幕截圖）。 行/列標題無關緊要，所以我將它們塗黑了。