How to show average instead of sum in subtotals for a specific value field in Syncfusion Vue Pivot Table

Introduction

In certain reporting scenarios using Syncfusion’s Vue Pivot Table, users may wish to display average values instead of sum for a specific value field (like “Amount”) at subtotal levels, such as the country level, within the Syncfusion Vue Pivot Table component.

While the Pivot Table currently does not offer a built-in feature to assign different aggregation types to the same value field based on hierarchy levels—for example, using sum for child-level members, and applying average only at the subtotal and grand total levels, this requirement can be fulfilled using the aggregateCellInfo event.

This article explains two approaches to customizing subtotal values for a value field using the aggregateCellInfo event.

Solution 1: Using args.cellSets.length to Compute Average

In this approach, we calculate the average of the “Amount” field for subtotal rows (“e.g., country level”) by dividing the sum by the number of underlying raw data entries, which are accessible via args.cellSets.

Implementation

[App.js]

<ejs-pivotview
   :aggregateCellInfo="aggregateCellInfo">
</ejs-pivotview>

<script lang="ts">
export default {
  methods: {
    aggregateCellInfo(args) {
      if (
        args.fieldName === 'Amount' &&
        args.row.hasChild &&
        args.row.level == 0
      ) {
        args.value = args.value / args.cellSets.length;
        console.log(args.value);
      }
    },
  },
};
</script>

Explanation

The provided implementation customizes the behavior of the Syncfusion’s Vue Pivot Table by modifying the aggregation for the “Amount” field at the country-level subtotal using aggregateCellInfo event. It checks if the current row is a subtotal for the “Amount” field, and if so, it calculates the average value by dividing the total value by the number of raw records. This average is then displayed in place of the default sum, providing a more meaningful representation of the data at the subtotal level.

Screenshot

Before:

After:

For a practical demonstration, refer to the sample of stackblitz.

Solution 2: Using args.row.members.length to Compute Average by Child Count

In this method, you calculate the average by dividing the subtotal value by the number of its direct child members instead of raw records.

Implementation

[App.js]

<ejs-pivotview
   :aggregateCellInfo="aggregateCellInfo">
</ejs-pivotview>

<script lang="ts">
export default {
  methods: {
    aggregateCellInfo(args) {
      if (args.fieldName === 'Amount' && args.row.hasChild && args.row.level == 0) {
         args.value = args.value / args.row.members.length;
         console.log(args.value);
       }
    },
  },
};
</script>

Explanation

In this implementation, the aggregateCellInfo event is used to override the default aggregation behavior for the “Amount” field in the Syncfusion Vue Pivot Table. When the current row represents a subtotal at the country level (identified by “hasChild” and level == 0), the code calculates the average by dividing the subtotal value by the number of its direct child members (args.row.members.length). This displays the average value instead of the sum for the “Amount” field at that subtotal level.

Screenshot

Before:

After:

For a practical demonstration, refer to the sample of stackblitz.

Conclusion:

I hope you found this article helpful in understanding how to display average values instead of sum for the “Amount” field at the subtotal (country) level using the aggregateCellInfo event in the Syncfusion Vue Pivot Table.

You can also refer to our Vue Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Vue Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!