How to apply custom styles to grouping bar buttons in a Pivot Table in React?

Introduction

In some scenarios, you might 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 React Pivot Table.

Customizing the grouping bar buttons

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

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 to Tahoma:

[index.css]

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

Customizing column axis buttons

Column axis buttons can be customized by targeting the .e-pivot-button .e-pvt-btn-content within the .e-axis-column class. Below is an example of how to change the button’s font family to monospace and the text color to red:

[index.css]

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

Customizing row axis buttons

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

[index.css]

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

Customizing filter axis buttons

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

[index.css]

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

Customizing grouping bar fields panel

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

[index.css]

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

Changing the icons on the grouping bar buttons:

You can also customize the icons on the grouping bar buttons. Here’s an example of how you can replace the default sort icon with a custom one on the grouping bar buttons:

[index.css]

    .e-grouping-bar .e-axis-column .e-pivot-button .e-sort::before, 
    .e-group-row .e-pivot-button .e-sort::before {
        content: "\e666" !important;
    }

In the above code snippet, we targeted 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. Inside the curly braces, you can define the styles you want to apply. In this example, we have set the content property to include Unicode characters for assigning a new sort icon. The Unicode character “\e666” is used to change the default sort icon to a custom one. You can replace these characters with other Unicode characters from our Syncfusion Icons library to meet your specific needs.

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

The following screenshot, which portrays the difference between 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 sample of stackblitz.

Conclusion

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