Issue with p-table pTemplate="frozenfooter" not displaying at all and frozenrow show bottom

[JonathanSoper]

We are trying to achieve a frozen footer row within p-table. We’re working from the examples shown here - https://www.primefaces.org/primeng/#/table - under the “Scrolling” section, specifically in reference to “frozenfooter” as a pTemplate.

We did get a version of the pTemplate="frozenrow" working, by passing the data to the [frozenValue] property of the p-table. That worked, but visually it was stuck to the top of the table. What we’re trying to achieve is the same thing with the footer, stuck to the bottom.

However, pTemplate=“frozenfooter” doesn’t seem to work in the same way. In your examples, there is no data specifically being passed to the footer itself?

Here is the code from the component we recreated using your "Cars" data model from primefaces' examples.

tablescrolldemo.component.ts:

import { Component, OnInit } from '@angular/core';
import {Car} from '../domain/car';
import {CarService} from '../car.service';

@component({
selector: 'app-tablescrolldemo',
templateUrl: './tablescrolldemo.component.html',
styleUrls: ['./tablescrolldemo.component.css']
})
export class TablescrolldemoComponent implements OnInit {

cars1: Car[];

cars2: Car[];

cars3: Car[];

cars4: Car[];

cars5: Car[];

virtualCars: Car[];

totalRecords: number;

cols: any[];

frozenCars: Car[];

frozenCols: any[];

scrollableCols: any[];

sales: any[];

loading: boolean;

constructor(private carService: CarService) { }

ngOnInit() {
this.carService.getCarsMedium().then(cars => this.cars1 = cars);
this.carService.getCarsSmall().then(cars => this.cars2 = cars);
this.carService.getCarsMedium().then(cars => this.cars3 = cars);
this.carService.getCarsMedium().then(cars => this.cars4 = cars);
this.carService.getCarsMedium().then(cars => this.cars5 = cars);

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

this.scrollableCols = [
  { field: 'year', header: 'Year' },
  { field: 'brand', header: 'Brand' },
  { field: 'color', header: 'Color' },
  { field: 'year', header: 'Year' },
  { field: 'brand', header: 'Brand' },
  { field: 'color', header: 'Color' }
];

this.frozenCols = [
  { field: 'vin', header: 'Vin' }
];

this.frozenCars = [
  { "brand": "BMW", "year": 2013, "color": "Grey", "vin": "fh2uf23" },
  { "brand": "Chevrolet", "year": 2011, "color": "Black", "vin": "4525g23" }
];

this.sales = [
  { brand: 'Apple', lastYearSale: '51%', thisYearSale: '40%', lastYearProfit: '$54,406.00', thisYearProfit: '$43,342' },
  { brand: 'Samsung', lastYearSale: '83%', thisYearSale: '96%', lastYearProfit: '$423,132', thisYearProfit: '$312,122' },
  { brand: 'Microsoft', lastYearSale: '38%', thisYearSale: '5%', lastYearProfit: '$12,321', thisYearProfit: '$8,500' },
  { brand: 'Philips', lastYearSale: '49%', thisYearSale: '22%', lastYearProfit: '$745,232', thisYearProfit: '$650,323,' },
  { brand: 'Song', lastYearSale: '17%', thisYearSale: '79%', lastYearProfit: '$643,242', thisYearProfit: '500,332' },
  { brand: 'LG', lastYearSale: '52%', thisYearSale: ' 65%', lastYearProfit: '$421,132', thisYearProfit: '$150,005' },
  { brand: 'Sharp', lastYearSale: '82%', thisYearSale: '12%', lastYearProfit: '$131,211', thisYearProfit: '$100,214' },
  { brand: 'Panasonic', lastYearSale: '44%', thisYearSale: '45%', lastYearProfit: '$66,442', thisYearProfit: '$53,322' },
  { brand: 'HTC', lastYearSale: '90%', thisYearSale: '56%', lastYearProfit: '$765,442', thisYearProfit: '$296,232' },
  { brand: 'Toshiba', lastYearSale: '75%', thisYearSale: '54%', lastYearProfit: '$21,212', thisYearProfit: '$12,533' }
];

this.totalRecords = 250000;
this.loading = true;

}
}

tablescrolldemo.component.html:

Frozen Rows

{{col.header}}

<ng-template pTemplate="body" let-rowData let-columns="columns">
  <tr>
    <td *ngFor="let col of columns">
      {{rowData[col.field]}}
    </td>
  </tr>
</ng-template>
<ng-template pTemplate="frozenrows" let-rowData let-columns="columns">
  <tr>
    <td *ngFor="let col of columns">
      <b>{{rowData[col.field]}}</b>
    </td>
  </tr>
</ng-template>

Brand {{sale.brand}} Sale Rate Sales Profits Last Year This Year Last Year This Year {{sale.lastYearSale}} {{sale.thisYearSale}} {{sale.lastYearProfit}} {{sale.thisYearProfit}} HI

EDIT: For some reason I can't get this code to format properly. I tried quoting it, but it's throwing it off.

[cagataycivici]

Seems there is a misunderstanding, frozenfooter is the counterpart of frozenheader, both get columns no data as data belongs to the body section. What you require from my understanding is a new feature such as frozenFooterRows, please create a new ticket for that which is possible for us to do.

[cagataycivici]

I've also asked my colleague to revert the commit as it is better to handle it with frozenFooterRows instead of a new position property.

[lifront]

I've also asked my colleague to revert the commit as it is better to handle it with frozenFooterRows instead of a new position property.

is frozenFooterRows supported now？

[markuskaiser96]

Hi, was this closed on purpose?

I cannot find any docs about how to implement frozenRows on the bottom of a p-table to date. Of course I could implementing some css workaround, but it's seems a little "hacky". I don't know if this feature is needed by a lot of other people but in my opinion it would definitely be a valuable addition.