最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How display particular column summation in footer in ag-grid - Stack Overflow

programmeradmin4浏览0评论

How to Display total sum of particular column at in footer of ag-grid table. for example if i have column name salary in ag-grid table then i want to show total salary sum at the bottom of grid as display in following screen.

How to Display total sum of particular column at in footer of ag-grid table. for example if i have column name salary in ag-grid table then i want to show total salary sum at the bottom of grid as display in following screen.

Share Improve this question asked Oct 3, 2019 at 4:00 Prashant SonarPrashant Sonar 1131 gold badge2 silver badges10 bronze badges 3
  • Have you checked this? stackoverflow./questions/55009358/… – Ishraq Ahmad Commented Oct 3, 2019 at 4:05
  • yes i have seen this but its angular js solution and i need this solution in normal js api – Prashant Sonar Commented Oct 3, 2019 at 4:34
  • Yes, it really sucks that agGrid doesn't have a friendly FooterRow option for grids, just the ugly pinnedBottomRowData implementation. – Mike Gledhill Commented Jun 18, 2020 at 12:09
Add a ment  | 

1 Answer 1

Reset to default 5

You could use the pinnedBottomRowData grid property that is talked about in the Row Pinning section of AgGrid's documentation.

Using the columns from the question you could do something like the following:

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];
}

The downside of this approach is that you have to run the column summations manually and build the rowData object yourself but I think this is a much more trivial solution than column aggregations which get plex pretty quick if you are doing more than displaying data (making cell edits, recalculating specific cells after edits, etc.)

Also this is pinned to the bottom of the grid, so if you don't have enough rows you will have space between the last row of data and the Total row (see screenshot). Row/Column headers don't matter so I blacked them out.

发布评论

评论列表(0)

  1. 暂无评论