How to Highlight a Specific Row in a Blazor Pivot Table?

Introduction

In certain scenarios, you might want to highlight specific rows in the Blazor Pivot Table to enhance readability and improve the presentation of data. You can achieve this by adding a custom style to your stylesheet 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 achieve this, along with a code example.

Adding custom style to your stylesheet

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

[Index.razor]

<style>
 .custom {
     background-color: #80cbc4 !important;
 }
</style>

The !important rule ensures that this style overrides any other background color styles that may be applied to the cells in the row.

Apply the style using the CellTemplate property

Next, use the CellTemplate property to apply the custom style to the specific row. This property is triggered during the rendering of each cell in the pivot table, and allowing 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 property to apply the custom style to a specific row:

[Index.razor]

<SfPivotView @ref="Pivot" TValue="ProductDetails" Height="500">
    <PivotViewTemplates>
        <CellTemplate>
            @{
                var data = (context as AxisSet);
                if (data != null)
                {
		    // Here we have applied background color for "Road Bikes" row in "France"
		    if ((data.ValueSort != null && data.ValueSort["levelName"].Equals("France.Road Bikes")) ||
		        (data.RowHeaders != null && data.RowHeaders.Equals("France.Road Bikes"))) {
			 Pivot.PivotValues[data.RowIndex][data.ColIndex].CssClass = "custom";
			 @data.FormattedText
		    }
                    else
                    {
                        // Here, we displayed the original text if no condition is met.
                        @data.FormattedText
                    }
                }
            }
        </CellTemplate>
    </PivotViewTemplates>
</SfPivotView>

In the above code example, we access the data for the current cell via the context parameter within the CellTemplate property. Following this, the properties data.ValueSort["levelName"] and data.RowHeaders are used to identify the current row header name. If it matches the condition (in this case, France.Road Bikes), the custom style is applied to the cell using the Pivot.PivotValues[data.RowIndex][data.ColIndex].CssClass property. This will change the background color of the specific row (specifically, the “Road Bikes” row under “France”). You can modify the code to fit your specific requirements, such as checking for different row headers or applying various styles.

The following screenshot illustrates the results of the above code snippet.

Screenshot

You can refer to this GitHub sample for a practical demonstration of the code.

Conclusion

We hope you enjoyed learning how to highlight a specific row in a Blazor Pivot Table.

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

For current customers, our Blazor components available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor Pivot Table and other Blazor components.

If you have any questions 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!