How to Apply Custom Styles to Grouping Bar in Blazor Pivot Table?

Introduction

In certain scenarios, you may want to personalize the appearance of your grouping bar buttons to enhance readability and improve data presentation. This article explains how to apply custom styles to the grouping bar buttons of the Blazor Pivot Table component.

Customizing the grouping bar buttons

The Grouping Bar option in the pivot table enables you to manage fields by dragging them across different axes, including rows, columns, values, and filters. Each axis is represented by buttons on the grouping bar. To customize these buttons, target the built-in CSS classes associated with them.

Customizing value axis buttons

To customize the value axis buttons, apply styles to the .e-axis-value .e-pivot-button CSS class. The following example demonstrates how to change the button’s background color to green and the font family to Tahoma:

[Index.razor]

<style>
.e-grouping-bar .e-axis-value .e-pivot-button{
    background-color: #80cbc4 !important;
    font-family: Tahoma !important;
}
</style>

Customizing column axis buttons

You can customize the Column axis buttons by targeting the .e-pivot-button .e-pvt-btn-content classes within the .e-axis-column class. The following example shows how to change the button’s font family to monospace and the text color to red:

[Index.razor]

<style>
.e-grouping-bar .e-axis-column .e-pivot-button .e-pvt-btn-content {
    font-family: monospace !important;
    color: red !important;
}
</style>

Customizing row axis buttons

To update the appearance of the row axis buttons, use the CSS class .e-group-row .e-group-rows .e-pivot-button. In the following example, you can change the size of the buttons by setting the width to 210px and the height property to 35px:

[Index.razor]

<style>
.e-group-row .e-group-rows .e-pivot-button {
    width: 210px !important;
    height: 35px !important;
}
</style>

Customizing filter axis buttons

For filter axis buttons, use the CSS class .e-axis-filter .e-pivot-button .e-pvt-btn-content. In the example below, you can change the font size to 18px and set the font weight to 600px:

[Index.razor]

<style>
.e-grouping-bar .e-axis-filter .e-pivot-button .e-pvt-btn-content {
    font-size: 18px !important;
    font-weight: 600px !important;
}
</style>

Customizing grouping bar fields panel

You can style the fields panel buttons in the grouping bar using the CSS class .e-all-fields-axis .e-pivot-button. In the following example, set the background color to thistle and the font family to cursive.

[Index.razor]

<style>
.e-grouping-bar .e-all-fields-axis .e-pivot-button {
    background-color: thistle !important;
    font-family: cursive !important;
}
</style>

Changing the icons on the grouping bar buttons

You can additionally customize the icons on the grouping bar buttons. The following is an example of how to replace the default sort icon with a custom icon on the grouping bar buttons:

[Index.razor]

<style>
.e-grouping-bar .e-axis-column .e-pivot-button .e-sort::before, 
.e-group-row .e-pivot-button .e-sort::before {
    content: "\e824" !important;
}
</style>

In the above code snippet, target the CSS classes .e-grouping-bar .e-axis-column .e-pivot-button .e-sort::before and .e-group-row .e-pivot-button .e-sort::before. These classes represent the sort icon of the column and row buttons, respectively. Within the curly braces, you can define the styles to apply. In this example, set the content property to include Unicode characters for assigning a new sort icon. The Unicode character “\e824” is used to change the default sort icon to a custom icon. You can substitute these characters with other Unicode characters from our Syncfusion Icons library to suit your specific needs.

Note: The !important rule in the CSS code ensures that your styles override the default styles present in the grouping bar buttons.

The following screenshot illustrates the differences before and after customizing the grouping bar buttons.

Screenshots

Before customizing the grouping bar buttons,

After customizing the grouping bar buttons,

For a practical demonstration, refer to the Blazor Playground sample.

Conclusion

We hope you enjoyed learning how to apply custom styles to grouping bar buttons in the 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 are 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!