How to display values in Pivot Table with custom formatting depending on their headers?

This article explains how to display values in React Pivot Table with custom formatting depending on their headers.

Display values in Pivot Table with custom formatting depending on their headers

In some scenarios, you may want to apply custom formatting to pivot table values based on their headers to enhance readability and improve the presentation of data. This can be achieved by using the aggregateCellInfo event, which is triggered during the rendering of each cell in the pivot table and allows you to change the value of each cell.

Here is a code snippet that guides how to display values in pivot table with custom formatting depending on their headers.

[index.js]

import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import { Internationalization } from '@syncfusion/ej2-base';

function Default() {

    function aggregateCellInfo(args){
        // Applies custom formatting for the "France" row header and its child header using the below condition.
        if(args.row.valueSort.levelName.includes('France')){
            var intl = new Internationalization();
            var formattedString = intl.formatNumber(args.value, {
                format: "##,### %",
            });
            args.value = formattedString; 
        } 
        // Applies custom formatting for the "FY2015" column header and its child header using the below condition.
        else if(args.column.valueSort.levelName.includes('FY 2015')){
            var intl = new Internationalization();
            var formattedString = intl.formatNumber(args.value, {
                format: "##,### %",
            });
            args.value = formattedString; 
        }
    }
    return ( 
           <pivotviewcomponent id="PivotView" aggregatecellinfo="{aggregateCellInfo}">
           </pivotviewcomponent>
    );
}
export default Default;

In the example above, we used the Internationalization class within the aggregateCellInfo event to format the values in a specific format (for example, “##,###%”). The properties args.row.valueSort.levelName and args.column.valueSort.levelName are used to identify the row and column headers of the specific value that require formatting (in this case, France for rows and FY 2015 for columns). When the condition is met, the args.value property is updated with the formatted string.

The following screenshot portrays the results of the code snippet mentioned above.

Screenshot

For a practical demonstration, refer to the sample of stackblitz

Conclusion
I hope you enjoyed learning how to display values in Pivot Table with custom formatting depending on their headers.

You can refer to our React 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 React Pivot Table example 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!