How to apply custom styles to the grand total cells in a JavaScript Pivot Table?

Introduction

When working with JavaScript Pivot Table, there may be scenarios where you need to apply custom styles to grand total cells. This customization can significantly enhance the readability and aesthetic appeal of the pivot table. It can be achieved by adding custom styles to your stylesheet and subsequently using the headerCellInfo and queryCellInfo events to effectively apply these styles to both row and column grand total cells. Below is a step-by-step guide on how to do this, along with a code example.

Step 1: Define custom styles

First, you need to define the custom style within your stylesheet that you want to apply to the row and column grand total cells. In the following code example, we initialize a couple of CSS classes named row_grandtotal and column_grandtotal to specify the styles for row and column grand total cells, respectively.

[index.css]

.row_grandtotal {
    background-color: thistle !important;
    font-family: cursive !important;
}

.column_grandtotal {
    background-color: skyblue !important;
    font-family: 'Franklin Gothic Medium' !important;
}

You can adapt the code to meet your specific requirements, such as applying a different background color or specifying a different font family for the row and column grand totals cells.

Step 2: Apply custom styles using events

Next, you need to use the headerCellInfo and queryCellInfo events to apply custom styles to the grand total cells. The headerCellInfo event is triggered while rendering each column header cell in a pivot table, allowing you to apply custom styles to the column grand total headers. On the other hand, the queryCellInfo event is triggered during the rendering of each row and value cell in the pivot table, providing the opportunity to customize the current cell, such as adding or removing styles. Below is a code snippet that demonstrates how to utilize these events:

[index.js]

var pivotObj = new ej.pivotview.PivotView({
  gridSettings: {
    headerCellInfo: (args) => {
        // Apply custom styles for column grand total headers.
        if(args.node.classList.contains("e-gtot")) {
            args.node.classList.add("column_grandtotal");
        } 
    },
    queryCellInfo: function(args){
        // Retrieve the current cell information.
        var colIndex = Number(args.cell.getAttribute('data-colindex'));
        // Check if the cell belongs to the row grand total.
        if ((args.data[colIndex].rowHeaders == "" && args.data[colIndex].columnHeaders !== "") ||
            (args.data[colIndex].axis == 'row' && args.data[colIndex].actualText == 'Grand Total')) {
            args.cell.classList.add("row_grandtotal");
        } 
        // Check if the cell belongs to the column grand total.
        else if (args.data[colIndex].columnHeaders == "") {
            args.cell.classList.add("column_grandtotal");
        } 
    }
  },
});

Here’s a breakdown of how the code works:

1. Within the headerCellInfo event, we check whether the current cell belongs to the column grand total header by using the e-gtot class. If it does, we add the column_grandtotal class to apply custom styles to this cell.

2. Similarly, within the queryCellInfo event, we determine whether the current cell represents the row grand total, column grand total, or neither.

3. For row grand total cells, we check if the rowHeaders property is an empty string while the columnHeaders property is not empty, or if the cell’s axis is designated as “row” and the actualtext property is “Grand Total”. When this condition is met, we include the row_grandtotal class in the cell. This action effectively applies custom styles to the row grand total cells.

4. For column grand total cells, we check if the columnHeaders property is an empty string. If this condition is met, we add the “column_grandtotal” class to the cell, thereby applying custom styles to it.

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

Screenshots

For a practical example of this code in action, you can refer to the following sample of stackblitz.

Conclusion

By following the steps outlined in this article and using the provided code example, you can easily apply custom styles to the grand total cells in a JavaScript Pivot Table.

You can also refer to our JavaScript 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 Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components on 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!