Comment ajuster la hauteur de la table P pour qu'elle soit la même que la hauteur de la fenêtre
<p><strong>Question : </strong>
J'essaie de définir la hauteur d'une table p principale en angulaire. J'ai beaucoup cherché en ligne mais rien n'a fonctionné jusqu'à présent (probablement dû au fait que ce problème existe depuis des années et que certaines modifications apportées au framework ont désactivé certaines solutions). </p>
<p>J'ai essayé deux méthodes, la première se trouve dans le code ci-dessous. La deuxième façon consiste à définir la hauteur du div parent de la p-table sur innerWindowHeight et la hauteur de défilement de la p-table sur flex (ne fonctionne pas non plus). </p>
<p><strong>Outils : </strong>Angular 14.2.0 et PrimeNG 14.1.1 dans un nouveau projet</p>
<p>J'ai le code html suivant dans <strong>app.component.html</strong> : </p>
<pre class="brush:php;toolbar:false;"><div>
<p-table #table
(window:resize)="onResize()"
[valeur] = "données"
[paginateur]="true"
[showCurrentPageReport]="true"
[défilement] = "vrai"
[scrollHeight]="tableScrollHeight"
[lignes]="10"
[rowsPerPageOptions]="rowsPerPage"
styleClass = "p-datatable-gridlines p-datatable-striped p-datatable-sm"
currentPageReportTemplate="{premier} à {dernier} des enregistrements {totalRecords}">
<ng-template pTemplate="en-tête">
<tr>
<th>Date</th>
<th>ID</th>
<th>Description</th>
<th>valeur</th>
<th>Taxes</th>
≪/tr>
</ng-template>
<ng-template pTemplate="corps" 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></pré>
<p>et les éléments <strong>app.component.ts</strong> suivants : </p>
<pre class="brush:php;toolbar:false;">importer {Component} depuis '@angular/core';
@Composant({
sélecteur : 'app-root',
URL du modèle : './app.component.html',
styleUrls : ['./app.component.css']
})
classe d'exportation AppComponent {
titre = 'Testapp' ;
données : tout[] ;
tableScrollHeight : string = "700px" ;
lignesParPage : nombre[] = [5, 10, 20, 50] ;
constructeur() {
this.data = [];
let entrée : any = {} ;
Entry.description = "Première entrée";
this.data.push(entrée);
}
onResize() {
this.tableScrollHeight = window.innerHeight + 'px';
}
}</pré>
<p><strong>Le comportement que je souhaite atteindre : </strong>
Je veux que le paginateur reste en bas de la fenêtre, que le tableau soit vide ou qu'il n'y ait pas assez d'entrées pour remplir la fenêtre, et que le tableau puisse défiler (l'en-tête reste en haut) lorsque les lignes du tableau sont plus grandes que le taille de l'écran. </p>
<p>Pour clarifier ce que j'essaie de réaliser, voici une capture d'écran montrant son état actuel :
État actuel</p>
<p>Voici une capture d'écran de l'apparence que je souhaite avoir :
À quoi cela devrait ressembler</p>
<p><strong>Question : </strong>
Existe-t-il un moyen d'y parvenir de manière propre ? </p>
<p>Comme suggéré dans les commentaires, j'ai ajouté un <strong>stackblitz</strong> : https://angular-ivy-sfk7pw.stackblitz.io</p>
<p><strong>Éditeur : </strong>
J'ai découvert que si je définissais scrollHeight sur un <strong>div</strong> à l'intérieur de la table (généré par primeng) avec un nom de classe <strong>p-datatable-wrapper</strong>, il obtiendrait le style "<strong>max-height</strong> : <strong>XXX</strong>px", où <strong>XXX</strong> est la valeur de <strong>tableScrollHeight</strong> . Je pourrais écrire un sélecteur CSS pour changer le style en largeur minimale, mais ce n'est probablement pas une bonne idée car je devrais accéder au dom à partir du fichier typscript et rechercher le div généré automatiquement. </p>
