Primeng은 스크롤 가능한 데이터 테이블의 높이를 높입니다.

PrimeNG DataTable은 가로 및/또는 세로 스크롤을 정의하는 [scrollable] 속성을 제공합니다. 이 값은 scrollHeight 및/또는 scrollWidth의 조합으로 사용해야합니다.Primeng은 스크롤 가능한 데이터 테이블의 높이를 높입니다.

스크롤 가능한 기능을 유지함과 동시에 창의 높이/너비에 상관없이 테이블을 조정할 수 있습니까? 여기

내가 해봤 코드입니다 :

<div class="ui-g-12"> 
 

 
    <p-dataTable class="ui-g-12" [value]="rows" [hidden]="this.apiService.spinnerIsVisible" 
 
    [style]="{ height: 'fit-content', 'margin-top': '10px' }" 
 
    [resizableColumns]="false" columnResizeMode="fit" emptyMessage="No records found" 
 
    [responsive]="false" 
 
    [globalFilter]="tableSearch" 
 
    [editable]="true" 
 
    [scrollable]="true" scrollHeight="100%" scrollWidth="100%"> 
 

 
     <p-header> 
 
     <button pButton type="button" icon="fa-refresh" (click)="refresh()" style="float:left"></button> 
 
     <label for="tableSearch">Global search: </label> 
 
     <input id="tableSearch" #tableSearch type="text" placeholder="type here"> 
 
     </p-header> 
 

 
     <p-column 
 
     *ngFor="let col of cols" [header]="col" [field]="col" 
 
     [style]="{'width': '250px', 'min-width': '50px', 'word-wrap': 'break-word'}" 
 
     [sortable]="true" 
 
     [filter]="true" filterPlaceholder="" filterMatchMode="contains" 
 
     [editable]="true"> 
 
     </p-column> 
 

 
    </p-dataTable> 
 
</div>

그러나 그것은 단지 반응 폭의 문제를 해결한다. 당신이 할 수있는 스크린 샷에 수평으로 스크롤 할 테이블을 SE는 : p-dataTable의 height 속성 백분율 값의 경우 부모를 기준으로하기 때문에, 나는 추가하여 콘텐츠에 맞게 부모 div를 만들기 위해 노력했습니다

부모에 style="height: 100%"div.

<div class="ui-g-12" style="height: 100%"> 
 

 
    <p-dataTable class="ui-g-12" [value]="rows" [hidden]="this.apiService.spinnerIsVisible" 
 
    [style]="{ height: 'fit-content', 'margin-top': '10px' }" 
 
    [resizableColumns]="false" columnResizeMode="fit" emptyMessage="No records found" 
 
    [responsive]="false" 
 
    [globalFilter]="tableSearch" 
 
    [editable]="true" 
 
    [scrollable]="true" scrollHeight="100%" scrollWidth="100%"> 
 

 
     <p-header> 
 
     <button pButton type="button" icon="fa-refresh" (click)="refresh()" style="float:left"></button> 
 
     <label for="tableSearch">Global search: </label> 
 
     <input id="tableSearch" #tableSearch type="text" placeholder="type here"> 
 
     </p-header> 
 

 
     <p-column 
 
     *ngFor="let col of cols" [header]="col" [field]="col" 
 
     [style]="{'width': '250px', 'min-width': '50px', 'word-wrap': 'break-word'}" 
 
     [sortable]="true" 
 
     [filter]="true" filterPlaceholder="" filterMatchMode="contains" 
 
     [editable]="true"> 
 
     </p-column> 
 

 
    </p-dataTable> 
 
</div>

나는 또한 작동하도록 내 styles.scss 파일을 변경 한 다음 적용 (유래에 대한 다른 질문이 발견) : 여기에 업데이트 된 코드는

html, body { 
 
    height: 100%; 
 
}

하지만 나를 위해 작동하지 않았다 : 스크린 샷에서 높이가 맞는 것처럼 보이지만 그렇지 않습니다. 아래로 스크롤하면 먼저 스크롤해야하지만 테이블 끝에 가까울 때 스크롤 막대가 화면 밖으로 나옵니다. 그래도 스크롤 할 수있는 동안 스크롤 막대가 보이지 않습니다. 그래서 데이터 테이블이 약간 더 높을 것 같습니다.