How to highlight a specific row in a Pivot Table?

This article explains how to highlight a specific row in React Pivot Table.

Highlight a specific row in a Pivot Table

In certain scenarios, you may want to highlight certain rows in the pivot table to enhance readability and improve the presentation of data. This can be achieved by adding a custom style to your style sheet and then using the cellTemplate property to apply this style to the rows you want to highlight. Below is a step-by-step guide on how to do this, along with a code example.

Step 1: Adding custom style to your style sheet

First, you need to define the custom style that you want to apply to the rows in your CSS file. Here’s an example of how to define a custom style with a specific background color:

[index.css]

 .custom {
     background-color: #80cbc4 !important;
 }

The !important rule is used to ensure that this style overrides any other background color styles that might be applied to the cells in the row.

Step 2: Apply the style using the cellTemplate property.

Next, you need to use the cellTemplate property within your JavaScript code to apply the custom style to the specific row. The cellTemplate function is triggered during the rendering of each cell in the pivot table and allows you to add the custom CSS style to the cells of the row you want to highlight.

Here’s a code example that demonstrates how to use the cellTemplate function to apply the custom style to a specific row:

[index.js]

function Default() {

    function cellTemplate(args) {
        // Here we have applied background color for "Road Bikes" row in "France"
            if (args != null && args.cellInfo && (args.cellInfo.valueSort &&
                args.cellInfo.valueSort.levelName === "France.Road Bikes" ||
                args.cellInfo.rowHeaders === "France.Road Bikes")) {
                    args.targetCell.classList.add('custom');
            }
    }
    return ( 
            <PivotViewComponent id='PivotView'cellTemplate={cellTemplate}>
            </PivotViewComponent>
    );
}
export default Default;

In the above code example, the properties args.cellInfo.valueSort.levelName and args.cellInfo.rowHeaders are used to identify the current row header name. If it matches the condition (in this case, France.Road Bikes), the custom class is added to the targetCell. This will change the background color of the specific row (in this case, the “Road Bikes” row under “France”). You can adapt the code to fit your specific requirements, such as checking for different row headers or applying different styles.

The following screenshot, which 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 highlight a specific row in React Pivot Table.

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 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!