Primeng: Templating in Column Header/Footer

[jkumawat]

Hi Prime Team,

I would reuqest you to for a new feature, allow templating in column header or footer.

It will allow doing some custom functionalities to utilize grid functions more easily.

Thank you.

[cagataycivici]

We'll do it, thank you.

[cagataycivici]

Blocked by;

https://github.com/angular/angular/issues/8292

[cagataycivici]

Figured out a way to do it finally.

[cagataycivici]

Field data of a corresponding row is displayed as the cell content by default, this can be customized using templating where the implicit variable passed to the template is the column definition and data of current row is the rowData property. In addition index of the current can be accessed using the optional rowIndex variable. Similarly, custom content can be placed at the header and footer of a column with templating.

A template inside a column must be decorated with pTemplate directive along with the type property to indicate where the template belongs to. Possible values are "header", "body" and "footer".

<p-column field="color" header="Color">
    <template let-col #car="rowData" #ri="rowIndex" pTemplate type="body">
        <span">{{car[col.field]}}</span>
    </template>
</p-column>
<p-column>
    <template pTemplate type="header">
        <button type="button" pButton (click)="selectAllCars()" icon="fa-check"></button>
    </template>
    <template let-car="rowData" pTemplate type="body">
        <button type="button" pButton (click)="selectCar(car)" icon="fa-search"></button>
    </template>
</p-column>

[mcfin1]

I am having a difficult time getting the type="header" to show anything. The type="body" seems to work. Am importing:
ButtonModule,
CheckboxModule,
DataTableModule,
DialogModule,
SharedModule,
TooltipModule

Is there something else that needs to be included for it to work?

[mcfin1]

Hello PrimeNG Team,

I have isolated the problem with type="header".

It does not work when setting scrollable="true". Without the "scrollable" attribute, it works fine.
This attribute also seems to prevent the selectionMode="multiple" from working correctly.

Thanks

[chromey]

Hi PrimeNG Team,

is this still being worked on? The issue is closed, but we can still reproduce it with beta 17. As @mcfin1 said, it works without the scrollable attribute.

[mcfin1]

I submitted pull request #938. It fixes cause of the issue. So far, no action on the pull request.

The template used in the source needs to repeat code for "scrollable".

[johnhwright]

p-footerColumnGroup also doesn't show up if you have scrollable="true". Does anyone have a work around for this? (On primeng 1.1.1 with angular 2.4.0)

[claudiulazar]

@johnhwright I found a solution. I added one more p-dataTable under the table and which contains only the footer. I have set class="footer" so I can separate the tables. And I set the display of the footer's dataTable's body to none. Here is the html code:
<p-dataTable class="footer"> <p-footerColumnGroup appendTo="body" > <p-row> <p-column footer="Totals:" colspan="3"></p-column> <p-column footer="$506,202"></p-column> <p-column footer="$531,020"></p-column> <p-column footer="$531,020"></p-column> </p-row> </p-footerColumnGroup> </p-dataTable>

And to override the css put this in the .css component
:host /deep/ .footer>.ui-datatable tbody { display: none; }

Sorry for the bad code example

[soyiatgit]

How can I use rowData in header template. Assigning let-row="rowData" just doesn't work.

[deniskrafczyk]

@soyiatgit Yea, "rowIndex" doesnt work also.

@cagataycivici Is there any possibility to access the rowIndex or the whole object inside the rowgroupfooter template?