Primeng macht rollbare Datatable-Höhe responsive

PrimeNG DataTable bietet eine [scrollable] Eigenschaft, um vertikales und/oder horizontales Scrollen zu definieren. Dies muss mit einer Kombination aus einem Set scrollHeight und/oder scrollWidth verwendet werden.Primeng macht rollbare Datatable-Höhe responsive

Wie kann ich eine Tabelle erstellen, die sich an die Höhe/Breite des Fensters anpasst, während die scrollbare Funktion beibehalten wird? Hier

ist der Code, den ich versucht habe:

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

Aber es löst nur das ansprechende Breite Problem. Auf dem Screenshot kann man se die Tabelle, die sich horizontal scrollbaren ist:

Da das height Attribut des p-dataTable Mutter bei Prozentwert relativ ist, habe ich versucht, die Eltern div passen Inhalt zu machen, indem das Hinzufügen style="height: 100%" zu dem Elternteil div. Hier ist der aktualisierte Code:

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

Ich bewarb mich auch Änderungen an meiner styles.scss Datei folgendes es (fanden diese in einer anderen Frage auf Stackoverflow) funktioniert:

html, body { 
 
    height: 100%; 
 
}

Aber es hat auch nicht für mich funktioniert: Auf dem Screenshot scheint die Höhe richtig zu sein, ist es aber nicht. Wenn ich nach unten scrolle, geht es zunächst so, wie es sollte, aber dann, wenn es nahe am Ende der Tabelle ist, kommt die Bildlaufleiste aus der Ansicht heraus, so dass ich sie nicht sehen kann, während ich noch scrollen kann. So scheint die Datentabelle etwas höher zu sein, als sie sein sollte.