How to insert a logo to a specific column in Angular Pivot Table?

Introduction:

Integrating visual elements like logos or images into a pivot table can enhance the readability and presentation of your data. In this article, we’ll guide you on how you can enhance your Angular Pivot Table by embedding logos or images into specified columns.

Adding a logo to Pivot Table column:

To add a logo to a pivot table, you’ll need to use the queryCellInfo event. This event is triggered for each cell in the pivot table, allowing you to modify the content of the cells based on your requirements.

Here’s an example of how you can use this event to insert a logo into a specified column:

[app.component.html]

<ejs-pivotview #pivotview id='PivotView' (enginePopulated)='enginePopulated()'>
</ejs-pivotview>

[app.component.ts]

// Define the method that will be called when the engine is populated
enginePopulated(): void {
    // Here we have called the triggered the queryCellInfo event
    this.pivotObj.grid.queryCellInfo = this.queryCell.bind(this);
}

// Define the queryCell method that will add a logo to specified cells
queryCell(args: QueryCellInfoEventArgs): void {
    // Ensure the default row cell binding event is called
    (this.pivotObj.renderModule as any).rowCellBoundEvent(args);
    // Retrieve the specific cell information.
    let cellInfo: IAxisSet = args.data[Number(args.cell.getAttribute('data-colindex'))] as IAxisSet;
    // Check if the cell corresponds to the column where a logo is needed
    if (cellInfo && cellInfo.axis === 'row' && cellInfo.valueSort.axis === 'university') {
        // Create an image element representing the logo
        let imgElement: Element = createElement('img', {
            className: 'university-logo',
            attrs: {
                'src': this.pivotData[cellInfo.index[0]].logo as string,  // The logo stored in the data source is added here
                'alt': cellInfo.formattedText as string,
                'width': '30',
                'height': '30'
            },
        });
        // Find the element representing the cell value
        let cellValue: Element = select('.e-cellvalue', args.cell);
        // Insert the logo before the cell value
        args.cell.insertBefore(imgElement, cellValue);
    }
}

In the code above, we used the queryCellInfo event to check if the cell belongs to the specified column header(i.e., “university”) by checking the axis and valueSort.axis properties of the cell. Then, we create an image element using the createElement function and set its attributes such as the source, alternate text, width, and height. We then insert the image element before the actual cell value using the args.cell.insertBefore method. You can adapt the code to fit your specific requirements, such as adding logos to different columns.

The following screenshot portrays the results of the code snippet mentioned above:

Screenshot:

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

Conclusion:

I hope you enjoyed learning how to insert a logo into a specific column in Angular Pivot Table.

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!