How to apply custom styles to the drill-through grid column headers in JavaScript Pivot Table?

Introduction:

In certain scenarios, you might want to personalize the appearance of your drill-through grid column headers to enhance readability and improve the presentation of data. This article explains how to apply custom styles to the drill-through grid column headers in the JavaScript Pivot Table.

Customizing drill through grid column headers style:

To customize the styles of the drill through grid column headers, you can target the built-in CSS classes associated with these header cells. Here’s an example of how you can change the font color and font family of the drill through grid column headers.

[index.css]

.e-drillthrough-grid.e-grid .e-gridheader {
    color: red !important;
    font-family: cursive;
}

In the code snippet above, we are targeting the CSS class .e-gridheader within the .e-drillthrough-grid container. Inside the curly braces, we are setting the color property to red and modifying the font-family to cursive. By applying these styles, you can easily personalize the appearance of drill-through grid column headers.

Note: By adding “!important” to the style rule, you’re ensuring that this custom style takes precedence over any existing styles.

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

Screenshot:

For a practical example of this code in action, you can refer to the following Sample in Stackblitz

Conclusion:

I hope you enjoyed learning how to apply custom styles to the drill-through grid column headers in Pivot Table.

You can also refer to our 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!