How to display row and column field names in the first empty column header cell of the Syncfusion Vue Pivot Table

Introduction

In certain reporting scenarios using Syncfusion’s Vue Pivot Table, users may wish to display both the row and column field names in the first empty column header cell of the pivot table for better context and readability. This article explains how to achieve this using the headerCellInfo event.

Customization using the headerCellInfo event

The headerCellInfo event allows you to customize the appearance and content of each header cell at the time of rendering. By checking if the current cell is the first empty column header (colIndex == 0), you can append both row and column field names into it.

Below is an implementation that demonstrates this approach:

[App.Vue]

<template>
        <ejs-pivotview
           :gridSettings="gridSettings"
        ></ejs-pivotview>
</template>
     
<script>
 gridSettings: {
        columnWidth: 140,
        // Header Cell Customization
        headerCellInfo: function (args) {
          let pivotGridObj =
            document.getElementById('pivotview').ej2_instances[0];
            
          // Getting Row Field Names
          let rowFieldNames = pivotGridObj.dataSourceSettings.rows
            .map((row) => row.name)
            .join(' - ');
            
          // Customize the first cell of the pivot table here.
          if (args.cell && args.cell.column && args.cell.colIndex == 0) {
            let containerDiv = document.createElement('div');
            containerDiv.style.textAlign = 'right';
            
            // Iterate over the columns array and create span elements for each name
            // Adding Column Names
            pivotGridObj.dataSourceSettings.columns.forEach((column) => {
              let span = document.createElement('span');
              span.innerText = column.name;
              span.classList.add('column-span');
              containerDiv.appendChild(span);
            });

            // Create a span element for the concatenated row field names
            // Adding Row Field Names
            let rowFieldSpan = document.createElement('span');
            rowFieldSpan.innerText = rowFieldNames;
            rowFieldSpan.classList.add('row-field-span');
            containerDiv.appendChild(rowFieldSpan);
            
            // Append the container div to the first empty cell
            args.node.appendChild(containerDiv);

          }
        },
      },
</script>

<style scoped>
.column-span {
  display: block; 
  height: 30px; 
}

.row-field-span {
  display: block; 
  float: inline-start; 
}
</style>

Explanation

• Header Cell Customization: The code includes a function (headerCellInfo) that customizes the first header cell of the Pivot Table. This function is triggered when rendering the header cells.
• Getting Row Field Names: Inside the function, it retrieves the row field names from the Pivot Table’s dataSourceSettings. These row field names are then concatenated and joined with a hyphen.
• Customizing the First Cell: If the header cell being processed is the first column (identified by checking colIndex == 0), the code creates a container <div>element to hold the custom content.
• Adding Column Names: The function then iterates over the column field names from the Pivot Table’s dataSourceSettings and creates a <span>element for each column. These <span>elements are added to the container <div>.
• Adding Row Field Names: A <span> element is also created for the concatenated row field names (e.g., “Country - Products”) and added to the container <div>.
• Appending to the Cell: Finally, the container <div>, containing both the column names and row field names, is appended to the first header cell of the table.

In summary, this code customizes the first header cell of the Pivot Table to display both the column names and a concatenated list of row field names in a specific style (aligned to the right) using dynamically created <span>elements.

Screenshot

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

Conclusion:

I hope you found this article helpful in learning how to display row and column field names in the first empty column header cell of the Syncfusion Vue Pivot Table.

You can also refer to our Vue 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 Vue Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components from 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!