2

How can I show total in header?

For example, I want to show sum of age as Age(x)

enter image description here

vam
  • 492
  • 7
  • 17

2 Answers2

2

In ag-grid add onRowDataChanged event and create function.

<AgGridReact onRowDataChanged={onRowDataChanged}></AgGridReact>

Using ag-grid column api to get column object and change its header name. After that, refresh the header component

const onRowDataChanged = (params) => {       
     var ageColumn = gridRef.current.columnApi.getColumn("age")
     var rowCount = gridRef.current.api.getDisplayedRowCount()
     ageColumn.colDef.headerName = `Age ${rowCount}`;
     gridRef.current.api.refreshHeader();
}
Usama
  • 1,038
  • 9
  • 22
  • 1
    This worked for row count but as I was mentioning in the problem statement, I need to show sum of cells in a column as well. Is that achievable? – vam Jun 17 '22 at 09:06
  • There must be a way to show total sum as well, I will look and post in answer. But as you mentioned in question you wanted to show total count not sum. Can you edit the question? **EDIT** Can I know by sum of cells you mean adding all the age values? – Usama Jun 17 '22 at 09:27
  • Sure, I will edit it Usama! Yeah, adding cells in that column – vam Jun 17 '22 at 12:06
  • 1
    I found [this](https://stackoverflow.com/questions/70399639/calculated-row-how-to-calculate-cell-value-of-the-particular-column-based-on-th) and [this](http://54.222.217.254/javascript-grid-accessing-data/#:~:text=The%20easiest%20way%20to%20get,should%20always%20be%20strings%20gridOptions.) results. You need to get cell values and loop through them to sum the data. Currently, I dont have access to my system else I would have tried – Usama Jun 17 '22 at 12:46
  • Yep, tried and it worked Usama, thank you so much! – vam Jun 18 '22 at 05:35
-1

If you are using AdapTable with AG grid then you dont need any code.

Just set showGroupingTotalsAsHeader to true in General Options and AdapTable will do it for you:

https://docs.adaptabletools.com/guide/reference-options-general#showgroupingtotalsasheader

coder2020
  • 1
  • 4