Resizing and Aligning Value Header cells

[Zietse Boonen | Castars]

Hi,

I have another question about the pivot table. So my head column cells just consist of the totals of my rows like you can see in following image:

how do I customize the names of these total columns is there a way to do this? and also how do I right align the text in these head cells. Here is my typescript code:

as you can see I don't have any columns defined so these columns are just the totals of my values which is fine but I wanna customize the text and the alignment of these.

Greetings

Zietse Boonen

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Zietse,

Please find the response below.

Query	Comments
how do I customize the names of these total columns is there a way to do this?	You can modify the value headers by using the "headerCellInfo" event. Please refer the following code example.   Code Example:   enginePopulated(): void {         // Bind the headerCellInfo event here.         this.pivotObj.grid.headerCellInfo = this.headerCell.bind(this);     }       headerCell(args: any): void {         if (this.pivotObj && this.pivotObj.dataSourceSettings.columns.length === 0 &&             this.pivotObj.dataSourceSettings.valueAxis === 'column') {             // Customize the column header text here.             args.node.querySelector('.e-headercelldiv .e-headertext').innerText = args.cell.column.headerText;         }     }   Output screenshot:   Also, please refer the below UG document to know more about the “headerCellInfo” event.   Document: https://ej2.syncfusion.com/angular/documentation/pivotview/row-and-column#headercellinfo
and also how do I right align the text in these head cells	You can align the content of the column header by using the “headerTextAlign” property in columnRender event. Please refer the following code example.   Code Example:   this.gridSettings = {             columnWidth: 140,             columnRender: this.observable.subscribe((args: any) => {                 // Here you can align the specific columns here.                 for (var i = 0; i < args.stackedColumns.length; i++) {                     args.stackedColumns[i].headerTextAlign="Right";                 }             }) as any         } as GridSettings;   Output screenshot:   Also, please refer the below UG document to know more about the “columnRender” event.   Document: https://ej2.syncfusion.com/angular/documentation/pivotview/row-and-column#text-align

Meanwhile, we have prepared a sample for your reference.

Sample: https://stackblitz.com/edit/angular-edep6u-qnrkre?file=src%2Fapp.component.ts,src%2Fapp.component.html,src%2Findex.html

Please let us know if you have any concerns.

Regards,

Angelin Faith Sheeba.

[Zietse Boonen | Castars]

Hi Support,

Thank you for your quick reply. This worked perfectly as intended!

marked as answer.

Greetings

Zietse Boonen

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Zietse,

Thanks for the update. Please contact us if you have any other queries. We are always happy to assist you.

Regards,

Angelin Faith Sheeba.