How to customize column headers and value cells in the Syncfusion JavaScript Pivot Table using cell template?

Introduction

When working with JavaScript Pivot Table, there might be scenarios where users want to customize how data is shown. A common request is to display images in column headers (e.g., university logos) and icons in value cells (e.g., checkmarks or hyphens), rather than traditional text. This article explains how to achieve this using the cellTemplate option in Syncfusion’s JavaScript Pivot Table component.

Displaying only images and icons in Pivot Table using cellTemplate

To customize the UI and show only images in column headers and icons in value cells, we can use the cellTemplate option. This option gives you detailed control over what content is shown in each cell while the table is being displayed, allowing you to dynamically modify the output based on your needs.

Implementation

Below is a code snippet that demonstrates how to use the cellTemplate option to:

• Display an image (university logo) in column header cells.
• Display a tick mark or hyphen icon in value cells based on the boolean value.

[index.js]

window.getCellContent = function (args) {
    // Check if the cell belongs to the column header and matches the 'university' axis
    if (args.cellInfo && args.cellInfo.axis === 'column' && args.cellInfo.valueSort.axis === 'university') {
      // Create an image element for the university logo
      var imgElement = ej.base.createElement('img', {
        className: 'university-logo',
        attrs: {
          src: data[args.cellInfo.colIndex].logo, // Assign image source from data
          alt: args.cellInfo.formattedText + ' Image',
          width: '30',
          height: '30',
        },
      });
  
      // Remove existing text content in the cell
      var cellValue = ej.base.select('.e-cellvalue', args.targetCell);
      if (cellValue) {
        cellValue.classList.remove('e-headertext', 'e-cellvalue'); // Remove unnecessary classes
        cellValue.textContent = ''; // Clear the existing text content
      }
  
      // Append the image to the column header cell
      args.targetCell
        .querySelector('.e-pivotcell-container')
        .appendChild(imgElement);
    }
    
    // Check if the cell belongs to the value axis and is not a grand total cell
    if (args.cellInfo && args.cellInfo.axis === 'value' && !args.cellInfo.isGrandSum) {
      var iconElement = void 0;
        const pivotCell = pivotObj.engineModule.data[Object.keys(args.cellInfo.indexObject)];
      // Create an icon element based on the isCertified boolean value
      if (pivotCell && pivotCell.isCertified === false) {
        iconElement = ej.base.createElement('span', {
          className: 'sb-icon-hyphen', // Hyphen icon for false
          innerHTML: '-',
          styles:
            'color: red; font-weight: bold; font-size: 40px; display: inline-block; width: 20px; text-align: center;',
        });
      } else if (pivotCell && pivotCell.isCertified === true) {
        iconElement = ej.base.createElement('span', {
          className: 'sb-icon-tick', // Tick icon for true
          innerHTML: '✔', // Unicode checkmark for tick icon
          styles: 'color: green; font-weight: bold; font-size: 20px;',
        });
      }
  
      if (iconElement) {
        // Remove existing text content in the value cell
        var cellValue = ej.base.select('.e-cellvalue', args.targetCell);
        if (cellValue) {
          cellValue.textContent = ''; // Clear the text content
          cellValue.appendChild(iconElement); // Append the icon inside the existing cell
        } else {
          args.targetCell.appendChild(iconElement); // Append the icon if no existing cell content
        }
      }
    }
    return '';
  };

Explanation

In this code, we use the cellTemplate option to customize how data is displayed in the Pivot Table. We first check if the cell is a column header related to the ‘university’ field. If so, we create an image element using the logo URL from the dataSource and remove any default text and styles before appending the image.

For value cells, the code checks whether the cell belongs to the value axis and is not a grand total cell. It then evaluates a boolean field named isCertified from the underlying data:

• If isCertified is false, a red hyphen icon (-) is displayed, indicating that the specified university is not certified.
• If isCertified is true, a green tick icon (✔) is shown, representing that the specified university is certified.
  Before appending the icon, any existing text content in the cell is cleared to maintain a clean and focused appearance. This approach helps us present the data more visually, making the Pivot Table easier to understand at a glance.
  The following screenshot portrays the result of the code snippet mentioned above.

Screenshot

Conclusion

By following the approach explained in this article and using the provided code example, you can easily customize column headers and value cells in the Syncfusion JavaScript Pivot Table to display images and icons, making your data presentation more visual and user-friendly.

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!