How to adjust the height of p-table to be the same as the window height

Question

Question: 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).

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).

Tools: Angular 14.2.0 and PrimeNG 14.1.1 in a new 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>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>

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';
  }
}

The behavior I want to achieve: 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.

To clarify what I'm trying to achieve, here's a screenshot showing its current state: Current status

Here's a screenshot of how I want it to look: How it should look

Question: Is there any way to achieve this in a clean way?

As suggested in the comments, I've added a stackblitz: https://angular-ivy-sfk7pw.stackblitz.io

Editor: I found that if I set the table's scrollHeight to a div inside the table (generated by primeng) with a class name of p-datatable-wrapper, it will Get the style "max-height: XXXpx", where XXX is the value of tableScrollHeight . 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.

Answer 1

Maybe you could try adding this style to your css/scss, but that's not a best practice.

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

Note: 100vh is your screen height, 90px is an example paging height.

That's it. hope it is of help to you.