<p><strong>Question: </strong> I'm trying to set the height of a prime p-table in angular. I've searched a lot online but nothing has worked so far (probably due to the fact that this problem has been around for years and some changes to the framework have disabled some solutions). </p> <p>I have tried two methods, the first one is in the code below. The second way is to set the p-table's parent div's height to innerWindowHeight and the p-table's scrollheight to flex (also doesn't work). </p> <p><strong>Tools: </strong>Angular 14.2.0 and PrimeNG 14.1.1 in a new project</p> <p>I have the following html code in <strong>app.component.html</strong>: </p> <pre class="brush:php;toolbar:false;"><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>Taxes</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></pre> <p>and the following <strong>app.component.ts</strong>: </p> <pre class="brush:php;toolbar:false;">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'; } }</pre> <p><strong>The behavior I want to achieve: </strong> I want the paginator to stay at the bottom of the window regardless of whether the table is empty or there are not enough entries to fill the window, and the table to be scrollable (header to stay on top) when the table rows are larger than the screen size. </p> <p>To clarify what I'm trying to achieve, here's a screenshot showing its current state: Current status</p> <p>Here's a screenshot of how I want it to look: How it should look</p> <p><strong>Question: </strong> Is there any way to achieve this in a clean way? </p> <p>As suggested in the comments, I've added a <strong>stackblitz</strong>: https://angular-ivy-sfk7pw.stackblitz.io</p> <p><strong>Editor: </strong> I found that if I set the table's scrollHeight to a <strong>div</strong> inside the table (generated by primeng) with a class name of <strong>p-datatable-wrapper</strong>, it will Get the style "<strong>max-height</strong>: <strong>XXX</strong>px", where <strong>XXX</strong> is the value of <strong>tableScrollHeight</strong> . I could 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 autogenerated div. </p>

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