p-table의 높이를 창 높이와 동일하게 조정하는 방법

Question

질문: 각도로 프라임 p 테이블의 높이를 설정하려고합니다. 나는 온라인에서 많은 것을 검색했지만 지금까지 아무 것도 작동하지 않았습니다(아마도 이 문제가 수년 동안 지속되어 왔으며 프레임워크에 대한 일부 변경으로 인해 일부 솔루션이 비활성화되었기 때문일 것입니다).

두 가지 방법을 시도했는데 첫 번째 방법은 아래 코드에 있습니다. 두 번째 방법은 p-테이블의 상위 div 높이를 innerWindowHeight로 설정하고 p-테이블의 스크롤 높이를 flex로 설정하는 것입니다(역시 작동하지 않음).

도구: 새 프로젝트의 Angular 14.2.0 및 PrimeNG 14.1.1

app.comComponent.html에 다음 HTML 코드가 있습니다.

<div>
 <p-테이블 #테이블
       (창:크기 조정)="onResize()"
       [값]="데이터"
       [페이지네이터]='true'
       [showCurrentPageReport]="참"
       [스크롤 가능]="true"
       [scrollHeight]="tableScrollHeight"
       [행]="10"
       [rowsPerPageOptions]="rowsPerPage"
       styleClass="p-datatable-gridlines p-datatable-줄무늬 p-datatable-sm"
       currentPageReportTemplate="{totalRecords}개 레코드 중 {처음}부터 {마지막}까지">
  <ng-template pTemplate="헤더">
   <tr>
     <일>날짜</일>
     <번째>ID
     <번째>설명
     <번째> 값
     <번째> 세금
   </tr>
  </ng-템플릿>
  <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-템플릿>
 </p-테이블>
</div>

그리고 다음 app.comComponent.ts:

'@angular/core'에서 {Component} 가져오기;

@요소({
  선택기: 'app-root',
  templateUrl: './app.comComponent.html',
  styleUrls: ['./app.comComponent.css']
})
내보내기 클래스 AppComponent {
  제목 = '테스트앱';
  데이터: 모두[];
  tableScrollHeight: 문자열 = "700px";;
  RowPerPage: 숫자[] = [5, 10, 20, 50];

  생성자() {
    this.data = [];
    항목 허용: any = {};
    Entry.description = "첫 번째 항목";;
    this.data.push(항목);
  }

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

달성하고 싶은 행동: 테이블이 비어 있는지 또는 창을 채울 만큼 충분한 항목이 있는지 여부에 관계없이 페이지네이터가 창 아래쪽에 머물기를 원하며, 테이블 행이 테이블 행보다 클 때 테이블이 스크롤 가능하도록(헤더가 맨 위에 유지되도록) 원합니다. 화면 크기.

제가 달성하려는 목표를 명확히 하기 위해 현재 상태를 보여주는 스크린샷은 다음과 같습니다. 현재 상황

다음은 제가 원하는 모습에 대한 스크린샷입니다. 어떻게 보여야 할까요

질문: 이것을 깨끗한 방법으로 달성할 수 있는 방법이 있습니까?

댓글에서 제안한 대로 stackblitz를 추가했습니다: https://angular-ivy-sfk7pw.stackblitz.io

편집자: 테이블의 scrollHeight를 클래스 이름이 p-datatable-wrapper인 테이블 내부의 div로 설정하면 스타일 "max-height: XXXpx", 여기서 XXX는 tableScrollHeight . 스타일을 최소 너비로 변경하기 위해 CSS 선택기를 작성할 수 있지만 typscript 파일에서 dom에 액세스하고 자동 생성된 div를 검색해야 하기 때문에 이는 아마도 좋은 생각이 아닐 것입니다.

Answer 1

이 스타일을 css/scss에 추가해 볼 수도 있지만 이는 최선의 방법이 아닙니다.

으아아아

참고: 100vh 是你的屏幕高度，90px은 페이지 매기기 높이의 예입니다.

그렇습니다. 그것이 당신에게 도움이 되기를 바랍니다.