How to rotate the column header vertically in the Angular Pivot Table

Introduction

When working with the Angular Pivot Table, the component does not natively support vertical column headers. However, you can achieve this by Invoking the headerCellInfo event to apply a custom class to the column headers and using custom CSS to rotate the header text. This article provides a step-by-step guide on how to implement vertical column headers in the Angular Pivot Table.

Step 1: Define custom styles

First, you need to define the custom style within your stylesheet that you want to apply to the column header cells. In the following code example, we initialize a CSS class named e-orientation-css to specify the style for column header cells.

[app.component.css]

.e-orientation-css {
    transform: rotate(90deg);
    height: 75px !important;
    padding: 10px 0px !important;
    width: unset !important;
}

Step 2: Invoke the “headerCellInfo” event

Define an headerCellInfo event handler that will be called for each column header cells. This event can be used to apply a custom class to the column headers. Here is an example of how to use this event:

[app.component.html]

<ejs-pivotview #pivotview id='PivotView' [gridSettings]='gridSettings' 
	(enginePopulated)="enginePopulated($event)">
</ejs-pivotview>

[app.component.ts]

import { Component, ViewChild } from '@angular/core';
import { PivotView, PivotViewModule } from '@syncfusion/ej2-angular-pivotview';

@Component({
    selector: 'app-root',
    styleUrls: ['app.component.css'],
    templateUrl: 'app.component.html',
    standalone: true,
    imports: [PivotViewModule]
})

export class AppComponent {

    @ViewChild('pivotview', { static: false })
    public pivotGridObj?: PivotView;

    headerCell(args: any): void {
        ((this.pivotGridObj as PivotView).renderModule as any).columnCellBoundEvent(args);
        // Add the custom class to the value headers here.
        if(args.node.querySelector('.e-headertext')) {
            args.node.querySelector('.e-headertext').classList.add('orientationcss');
        } // Add the custom class to the column headers here. 
        else if(args.node.querySelector('.e-stackedheadertext')) {
            args.node.querySelector('.e-stackedheadertext').classList.add('orientationcss');
        }
    }

    enginePopulated(args: any): void {
       ((this.pivotGridObj as PivotView).grid as any).headerCellInfo = this.headerCell.bind(this);
    }
}

Step 3: Customize “gridSettings”

Configure the gridSettings to adjust the columnWidth and rowHeight based on the customization. This ensures that the vertically rotated headers fit well within the grid layout. Here is an example:

[app.component.html]

<ejs-pivotview #pivotview id='PivotView' [gridSettings]='gridSettings'>
</ejs-pivotview>

[app.component.ts]

import { Component, ViewChild } from '@angular/core';
import { PivotView, PivotViewModule } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';

@Component({
    selector: 'app-root',
    styleUrls: ['app.component.css'],
    templateUrl: 'app.component.html',
    standalone: true,
    imports: [PivotViewModule]
})

export class AppComponent {

    @ViewChild('pivotview', { static: false })
    public pivotGridObj?: PivotView;

    ngOnInit(): void {
        this.gridSettings = {
            // Adjust the column width and row height based on the customization.
            columnWidth: 90,
            rowHeight: 100,
        } as GridSettings;
    }
}

Explanation of the code snippet:

1. Within the headerCellInfo event, we can get the column headers and value headers using couple of CSS classes named e-headertext and e-stackedheadertext. If it does, we add the e-orientation-css class to apply custom styles to this cell.

2. Following this, we need to customize the columnWidth and rowHeight based on the customization using the gridSettings in Angular Pivot Table configuration.

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

Screenshots

For a practical demonstration, please refer to the sample of stackblitz.

Conclusion

By following the steps outlined in this article and using the provided code examples, you can rotate the column header vertically in the pivot table.

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