I am using ag-grid for my table. I need to show the sum of each column at the end of the table

Question

This is my React-component.

<AgGridReact
                        rowData={details}
                        columnDefs={columnDefs}
                        defaultColDef={defaultColDef}
                        autoGroupColumnDef={autoGroupColumnDef}
                        aggFuncs={aggFuncs}
                        groupIncludeFooter={groupIncludeFooter}
                        groupIncludeTotalFooter={groupIncludeTotalFooter}
                    ></AgGridReact>

And this is my functionality.

const [columnDefs, setColumnDefs] = useState([
        {
            headerName: 'Details',
            children: [
                {
                    field: 'uniqId',
                    width: 90,
                    filter: 'agTextColumnFilter',
                },
                {
                    field: 'name',
                    width: 180,
                    filter: 'agNumberColumnFilter',
                },
            ],
        },
        {
            headerName: 'Other Details',
            children: [
                { field: 'gender', width: 100 },
                {
                    field: 'salary',
                    aggFunc: "sum",
                    width:100,
                },
                {
                    field: 'country',
                    width: 100,
                    filter: 'agNumberColumnFilter',
                },
                {
                    field: 'birthdate',
                    width: 100,
                    filter: 'agNumberColumnFilter',
                },
                {
                    field: 'vegetarian',
                    width: 100,
                    filter: 'agNumberColumnFilter',
                },
                {
                    field: "Edit",
                    colId: "view",
                    width: 100,
                    cellRendererFramework: function (params) {
                        return <button className="btn btn-secondary gridButton" onClick={() => getUserDetails(params.data._id)}> Edit </button>
                    }
                },
                {
                    field: "Delete",
                    colId: "view",
                    width: 100,
                    cellRendererFramework: function (params) {
                        return <button className="btn btn-danger gridButtonDelete" onClick={() => handleDelete(params.data._id)}> Delete </button>
                    }
                },
            ],
        },
    ]);

I need to show the sum of price column at the end of the table. I need to show in the bottom of the table. The sum need to reflect if someone add a new data the cells.

I am using ag-grid for my table. I need to show the sum of each column at the end of the table. After editing the cell, the sum value should be updated

Please help me on this.

Answer 1

One approach is to use a "totals" row. You would perform the summation calculations for each required column, then return that data into pinnedBottomRowData within gridOptions.

The totals row data is formatted similarly to your rowData, where there is a key/value pair containing data to display on the grid. Just as colDefs access specific data within rowData, the colDefs would also be accessing the summation values within the totals row data. The pinnedBottomRowData prop is what pins the totals row data to the bottom of the grid.

If you're editing cell data within the grid's UI, the grid should automatically update to reflect that change. Check out the Updating Data section of the grid docs if that doesn't work automatically for you. If it doesn't, you may need to use other helper functions such as setRowData or onRowDataUpdated.

For example:

const sumData = (data) => {
  // perform summation on your salary data:
  const totalSalary = data.reduce((accumulator, currentData) => accumulator + currentData.salary, 0);

  // perform calculations on other columns requiring this aggregation
  const otherData = // perform other calculations as needed

  return { totalSalary, otherData }; 
};

const { totalSalary, otherData} = sumData(data);

const totalsRowData = [{
  id: 'totalsRow',
  salary: totalSalary,
  otherData: otherData, 
}];

const gridOptions = {
  pinnedBottomRowData={totalsRowData}
};

<AgGridReact
  rowData={details}
  columnDefs={columnDefs}
  defaultColDef={defaultColDef}
  autoGroupColumnDef={autoGroupColumnDef}
  aggFuncs={aggFuncs}
  groupIncludeFooter={groupIncludeFooter}
  groupIncludeTotalFooter={groupIncludeTotalFooter}
  gridOptions={gridOptions} // add grid options to your grid's props
/>

Edit: Here's another related thread about a totals row in case it has additional helpful info for you: How to enable or show total row in footer of ag-grid table