How to set Height of p-table to window height

Question

Problem: I'm trying to set the height of a prime p-table in angular. I already searched the net and found so many results but none worked so far (probably due to this problem beeing around for many years and changes to the framework disabled certain solutions).

I already tried two approaches the first is in the code below. The second is setting the height of the parent div of the p-table to innerWindowHeight and setting scrollheight of p-table to flex (doesn't work either).

Tools: Angular 14.2.0 and PrimeNG 14.1.1 in a fresh project

I have the following html code in app.component.html :

<div>
 <p-table #table
       (window:resize)="onResize()"
       [value]="data"
       [paginator]="true"
       [showCurrentPageReport]="true"
       [scrollable]="true"
       [scrollHeight]="tableScrollHeight"
       [rows]="10"
       [rowsPerPageOptions]="rowsPerPage"
       styleClass="p-datatable-gridlines p-datatable-striped p-datatable-sm"
       currentPageReportTemplate="{first} to {last} of {totalRecords} records">
  <ng-template pTemplate="header">
   <tr>
     <th>Date</th>
     <th>ID</th>
     <th>Description</th>
     <th>Value</th>
     <th>Tax</th>
   </tr>
  </ng-template>
  <ng-template pTemplate="body" let-entry>
   <tr>
     <td>{{entry.date}}</td>
     <td>{{entry.id}}</td>
     <td>{{entry.description}}</td>
     <td>{{entry.value}}</td>
     <td>{{entry.tax}}</td>
   </tr>
  </ng-template>
 </p-table>
</div>

And the following app.component.ts :

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Testapp';
  data: any[];
  tableScrollHeight: string = "700px";
  rowsPerPage: number[] = [5, 10, 20, 50];

  constructor() {
    this.data = [];
    let entry: any = {};
    entry.description = "First entry";
    this.data.push(entry);
  }

  onResize() {
    this.tableScrollHeight = window.innerHeight + 'px';
  }
}

Behaviour I want to implement: What I want is, that the Paginator stays at the bottom of the window even if the table is empty or dosen't have enough entries to fill the window and that the table is scrollable (header staying at top) as soon as the table rows are bigger than the screen size.

To clarify what I want to acomplish here a screenshot how it looks: How it looks right now

And here a screenshot how I want it to look: What it should look like

Question: Is it possible to acomplish this in a clean way?

Like suggested in the comment I added a stackblitz : https://angular-ivy-sfk7pw.stackblitz.io

Edit: I found that if you set scrollHeight of table a div inside the table (generated from primeng) with class p-datatable-wrapper gets the style " max-height : XXX px" where as XXX is the value from tableScrollHeight . I could probably write a CSS selector to change the style to min-width but that's probably not a good Idea since I would have to access the dom from the typscript file and search for the auto generated div.

Answer 1

Maybe you can try to add this style to your css/scss , but this is not a best practice.

.p-datatable-wrapper {
  min-height: calc(100vh - 90px);
}

Note: 100vh is your screen height and 90px it's an example your pagination height.

That's it. I hope it can help.