How to customize headers in the JavaScript pivot table UI and during the exporting process?

Introduction

When working with a JavaScript Pivot Table, you might want to personalize the row and column headers to enhance readability and improve the presentation of the data. In this article, we will guide you through the process of customizing these headers in a pivot table UI representation. Furthermore, we will show you how to retain this customization when exporting the pivot table to PDF, Excel, or CSV documents.

Customizing column headers in Pivot Table

To customize the column header in a pivot table, you need to use the headerCellInfo event in your code. This event is triggered during the rendering of each column header cell in pivot table and enables you to manipulate the content of these cells according to your specific needs.

Here is a code snippet demonstrating how to use the headerCellInfo event to customize the column header:

[index.js]

var pivotObj = new ej.pivotview.PivotView({
  allowExcelExport: true,
  allowPdfExport: true,
  gridSettings: {
      headerCellInfo(args) {
      // Here, we access the column header cell information
      if (args.cell.column.customAttributes && args.cell.column.customAttributes.cell.valueSort.levelName === 'FY 2015.Units Sold') {
        // Customize the column header text by modifying the inner text of the header element
        args.node.querySelector('.e-headertext').innerText  = 'Customized Column Header';
      } 
    }, 
  }
});

In the code above, we access the current column header cell information using the args.cell.column.customAttributes property. Then we check if the column header matches a unique level name (i.e., “FY 2015. Units Sold”) by using args.cell.column.customAttributes.cell.valueSort.levelName. The Dot(.) character in the level name is used as the default separator to identify the header levels in our pivot table.

If the condition is met, we use the args.node.querySelector method to access the DOM element representing the header cell. We then update the innerText property of the DOM element to set the customized header text. In this example, we assign the value “Customized Column Header” to the header, but you can change it to any desired value.

The following screenshot, which portrays the difference between before and after customizing column headers,

Screenshots

Before Customizing column header

After Customizing column header

Customizing row headers in Pivot Table

To customize the row header in a pivot table, you must utilize the queryCellInfo event in your code. This event is triggered while rendering each row and value cell in the pivot table and enables you to manipulate the content of row headers according to your specific needs.

Here is a code snippet demonstrating how to use the queryCellInfo event to customize the row headers:

[index.js]

var pivotObj = new ej.pivotview.PivotView({
  allowExcelExport: true,
  allowPdfExport: true,
  gridSettings: {
    columnWidth: 140,
    queryCellInfo: function (args) { 
      var colIndex = Number(args.cell.getAttribute('data-colindex')); 
      var pivotValue = args.data[colIndex];
      // Here, we access the row header cell information
      if ( pivotValue.axis === 'row' && pivotValue.valueSort.levelName === 'France') {
      // Customize the row header text by modifying the inner text of the header element
          args.cell.querySelector('.e-cellvalue').innerText = 'Customized Row Header';
      }
    },
  }
});

In the code above, we used the data-colindex attribute to obtain the column index of the cell. Then, we retrieve cell information using this column index. Following this, we apply our condition to the retrieved cell information. In this example, we check if the row header belongs to “France” by using the pivotValue.valueSort.levelName property. If the condition is satisfied, we access the DOM element representing the row header cell through the args.cell.querySelector method. In this example, the header is designated as “Customized Row Header”.

The following screenshot, which portrays the difference between before and after customizing row headers,

Screenshots

Before Customizing row header

After Customizing row header

Customizing Pivot Table headers during exporting

The customization of the row and column header cell through the headerCellInfo and queryCellInfo event events only appear in the pivot table UI and does not consider other user scenarios, such as exporting. To preserve these customizations when exporting the pivot table to PDF, Excel, or CSV documents, please refer to the following steps:

Customizing column headers during exporting

To maintain customized column headers, you must use the excelHeaderQueryCellInfo and pdfHeaderQueryCellInfo events for their respective export file formats. The excelHeaderQueryCellInfo event allows you to manipulate the content of the column header during the Excel and CSV exporting processes, whereas the pdfHeaderQueryCellInfo event is specifically intended for customizations when exporting to PDF.

Here is a code snippet demonstrating how to use these events:

[index.js]

var pivotObj = new ej.pivotview.PivotView({
  allowExcelExport: true,
  allowPdfExport: true,
  gridSettings: {
    excelHeaderQueryCellInfo: function(args) {
      // Here, we access the column header cell information
      if(args.cell.valueSort && args.cell.valueSort.levelName === 'FY 2015.Units Sold') {
          // Here, we are customizing the column header for Excel export
          args.cell.formattedText = 'Customized Column Header';
      }
    },
    pdfHeaderQueryCellInfo: function (args) {
        // Here, we access the column header cell information
        if (args.gridCell.valueSort && args.gridCell.valueSort.levelName === 'FY 2015.Units Sold') {
         // Here, we are customizing the column header for PDF export
          args.gridCell.formattedText = 'Customized Column Header';
        }
    }
  }
  }
});

In the above example, we used the excelHeaderQueryCellInfo and pdfHeaderQueryCellInfo events to check a condition similar to the one implemented in the headerCellInfo event. If it matches, we replace the text with “Customized Column Header” using the args.cell.formattedText property. These changes will be reflected when the pivot table is exported as PDF, Excel, or CSV documents.

The following screenshot, which portrays the results of the code snippet mentioned above,

Screenshot

Customizing column headers during Excel exporting

Customizing column headers during CSV exporting

Customizing column headers during PDF exporting

Customizing row headers during exporting

To sustain the row header customization when exporting the pivot table to PDF, Excel, or CSV documents, you must utilize the excelQueryCellInfo and pdfQueryCellInfo events for their respective export file formats. These event trigger framing each header cell during exporting and enable you to customize the row header text.

Here is a code snippet demonstrating how to use these events:

[index.js]

var pivotObj = new ej.pivotview.PivotView({
  allowExcelExport: true,
  allowPdfExport: true,
  gridSettings: {
    excelQueryCellInfo: function (args) {
      // Here, we access the row header cell information
      if(args.cell.axis == 'row' && args.cell.valueSort && args.cell.valueSort.levelName === 'France') {
          // Here, we are customizing the row header during Excel export
          args.value = 'Customized Row Header';
      }
    },
    pdfQueryCellInfo: function (args) {
        // Here, we access the row header cell information
        if (args.data.axis == 'row' && args.data.valueSort && args.data.valueSort.levelName === 'France') {
          // Here, we are customizing the row header during PDF export
          args.value = 'Customized Row Header';
        } 
    }
  }
  }
});

In the above example, we used the excelQueryCellInfo and pdfQueryCellInfo events to check a condition similar to the one implemented in the queryCellInfo event. If it matches, we replace the text with “Customized Row Header” using the args.value property. These changes will be reflected when the pivot table is exported as PDF, Excel, or CSV documents.

The following screenshot, which portrays the results of the code snippet mentioned above,

Screenshot

Customizing row headers during Excel exporting

Customizing row headers during CSV exporting

Customizing row headers during PDF exporting

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 customize column headers in a JavaScript Pivot Table.

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