PrimeNG Header Template

Question

I'm trying to add a span with a tooltip to a column header using PrimeNG version 4.30.

According to this issue, it should be done using pTemplate decorator in a template element (later deprecated in favor of ng-template). The type="body" templates works just fine, but when I try to use it with type="header" the header is just empty, despite the rows being filled just fine.

<p-column sortable="true">
  <ptemplate pTemplate type="header">
      <label>my field</label>
      <span class="fa fa-question-circle" pTooltip="my tooltip" tooltipPosition="right" tooltipEvent="hover" showDelay="50" hideDelay="200"></span>
  </ptemplate>
  <ng-template let-linha="rowData" pTemplate type="body">
    {{linha.myField}}
  </ng-template>
</p-column>

Changing the order of the templates makes the table fill the rows with the label and span I intended to put on the header, making me suspect it's ignoring not only the type but the first template altogether.

manoftheyear manoftheyear · Accepted Answer · 2018-07-25T17:16:29

Apparently the type attribute is not the right way to do it, instead you should set the pTemplate directly with the type you want to use. Like this:

<p-column sortable="true">
  <ptemplate pTemplate="header">
      <label>my field</label>
      <span class="fa fa-question-circle" pTooltip="my tooltip" tooltipPosition="right" tooltipEvent="hover" showDelay="50" hideDelay="200"></span>
  </ptemplate>
  <ng-template let-linha="rowData" pTemplate="body">
    {{linha.myField}}
  </ng-template>
</p-column>

This solved the problem.

PrimeNG Header Template

1 Answers