如何將p-table的高度調整為與視窗高度相同

Question

問題： 我正在嘗試在angular中設定一個prime p-table的高度。我已經在網上搜索了很多結果，但到目前為止都沒有起作用（可能是由於這個問題存在多年，並且對框架進行了一些更改，禁用了某些解決方案）。

我已經嘗試了兩種方法，第一種方法在下面的程式碼中。第二種方法是將p-table的父div的高度設定為innerWindowHeight，並將p-table的scrollheight設定為flex（也不行）。

工具：Angular 14.2.0與PrimeNG 14.1.1在一個新專案

我在app.component.html有以下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>日期</th>
     <th>ID</th>
     <th>描述</th>
     <th>值</th>
     <th>稅</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>

以及以下的app.component.ts：

import {Component} 從 '@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';
  }
}

我想要實現的行為： 我希望無論表格是否為空或沒有足夠的條目來填充窗口，分頁器都保持在窗口底部，並且當表格行大於螢幕大小時，表格可以滾動（頭部保持在頂部）。

為了澄清我想要實現的目標，這裡有一個截圖展示它的當前狀態： 目前狀態

這裡有一個截圖展示我希望它看起來的樣子： 應該的樣子

問題： 有沒有辦法以乾淨的方式達成這個目標？

如評論中建議的那樣，我添加了一個stackblitz：https://angular-ivy-sfk7pw.stackblitz.io

編： 我發現如果將table的scrollHeight設定為表格內部的一個div（由primeng產生），該div的類別名稱為p-datatable-wrapper，它會取得樣式"max-height: XXXpx"，其中XXX是tableScrollHeight的值 。我可以寫一個CSS選擇器將樣式更改為min-width，但這可能不是一個好主意，因為我將不得不從typscript文件中訪問dom並蒐索自動生成的div。

Answer 1

也許你可以嘗試將這個樣式加入你的 css/scss 中，但這不是最佳實踐。

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

注意： 100vh 是你的螢幕高度，90px 是一個範例的分頁高度。

就是這樣。希望能對你有幫助。