How to customize Row Headers based on another field in Angular Pivot Table

Introduction:

When using Syncfusion’s Angular Pivot Table, there might be situations where developers want to bind a specific field (e.g., an email address) to the row headers of a Pivot Table but display a more user-friendly value (e.g., the customer name) in the UI. By default, the Pivot Table displays the bound field, but this article demonstrates how to achieve this using the queryCellInfo event, which allows you to customize the content of each cell dynamically during rendering without modifying the underlying data configuration.

Dynamically customizing the Row Header text in an Angular Pivot Table

To achieve this customization, we can use the queryCellInfo event, which is triggered for each individual row header and value cell. This event provides direct access to the cell’s content, making it easy to modify the value being displayed. By utilizing this event, we can extract the required data from the pivotValues and customize the cell content efficiently without iterating over the entire dataset.

Implementation

The following code demonstrates how to customize the row header values to display customer names instead of emails using the queryCellInfo event:

[app.component.ts]

@Component({
  template: `<ejs-pivotview #pivotview id='PivotView' [gridSettings]='gridSettings'></ejs-pivotview>`,
})

export class AppComponent implements OnInit {
    gridSettings = {
    queryCellInfo: this.observable.subscribe((args: any) => {

      // Get the column index of the current cell from the DOM attribute
      let colIndex = Number((args.cell).getAttribute('aria-colindex'));
  
      // Retrieve cell data using the column index - 1, from the provided args data
      let cells = args.data[colIndex - 1];
  
      // Access the data source bound to the PivotView
      let datasource: any = (this.pivotObj as PivotView).dataSourceSettings.dataSource;
      if (cells.rowIndex || cells.colIndex) {
          // Get the corresponding cell from the PivotView's pivotValues using row and column index
          let cell: any = (this.pivotObj as PivotView).pivotValues[cells.rowIndex][cells.colIndex];
      
          // Proceed only if the cell is from the row axis and its valueSort is based on 'email'
          if (cell.axis === 'row' && cell.valueSort.axis === 'email') {
            // Get the list of index keys from the indexObject associated with this cell
            let indexes = Object.keys(cell.indexObject);
      
            // Update the inner text of the cell to show the 'name' property from the first data record
            // This replaces the default cell value with a specific field from the original dataSource
            ((args.cell as HTMLElement).querySelector('.e-cellvalue') as HTMLElement).innerText =
              datasource[indexes[0] as any].name;
          }
     }
    }) as any
  } as GridSettings; 
 }

Explanation of the code snippet:

The queryCellInfo event is invoked for each cell as the Pivot Table is rendered. Within this event, you can access the pivotValues array to determine whether the cell belongs to the row axis and whether its value is associated with a specific field, such as email. If these conditions are satisfied, you can customize the cell content, such as replacing the email with the corresponding customer name by retrieving the value from the original dataSource and updating the cell’s displayed text accordingly.

Screenshot

For a practical demonstration, please refer to the sample on StackBlitz.

Please note that the changes made using the queryCellInfo event only reflect in the Pivot Table UI. If you want the same customizations in the exported Excel or PDF files, you’ll need to apply similar logic during the export process.

To learn how to do this, refer to the following Knowledge Base article: https://support.syncfusion.com/agent/kb/14881

Conclusion

I hope this guide has helped you understand how to customize the row headers in the Syncfusion Angular Pivot Table, allowing you to display customer names instead of email addresses using the queryCellInfo event.

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!