htmlangulartypescriptprimengprimeng-datatable

How to add tooltip to specific header column in primeNG table


Html

<p-table #dt1 [columns]="cols" [value]="cars1">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns"> {{col.header}} </th>
        </tr>
    </ng-template>
</p-table>

TS

export class Table implements OnInit {

    cols: any[];

 ngOnInit() {
        this.cols = [
            { field: 'year', header: 'Year' },
            { field: 'brand', header: 'Brand' },
            { field: 'color', header: 'Color' }
        ];}}

I want to display tooltip only for brand column

Using versions PrimeNG 9.2.1 on Angular 9.1.3


Solution

  • you can update cols to include some pTooltip value.

    component

     this.cols = [
        { field: 'year', header: 'Year' , tooltip: 'Year 📅'},
        { field: 'brand', header: 'Brand' },
        { field: 'color', header: 'Color' , tooltip: 'Color of 🧙‍♂️'}
      ];
    

    template

    <p-table #dt1 [columns]="cols" [value]="cars1">
        <ng-template pTemplate="header" let-columns>
            <tr>
              <th *ngFor="let col of columns" [pTooltip]="col.tooltip"> {{col.header}} </th>
            </tr>
    </ng-template>
    

    stackblitz demo