web-dev-qa-db-fra.com

Primeng rend réactif la hauteur des données datables et défilables

PrimeNG DataTable fournit une propriété [scrollable] pour définir le défilement vertical et/ou horizontal. Ceci doit être utilisé avec une combinaison d'un ensemble scrollHeight et/ou scrollWidth.

Comment puis-je avoir une table qui s'adapte à la hauteur/largeur de la fenêtre tout en maintenant la fonctionnalité de défilement?

Voici le code que j'ai essayé:

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

Mais cela ne résout que le problème de la largeur de réponse. Sur la capture d'écran, vous pouvez voir le tableau dans lequel vous pouvez faire défiler horizontalement:  here is the screenshot

Étant donné que l'attribut height du p-dataTable est relatif au parent en cas de valeur en pourcentage, j'ai essayé de faire en sorte que le parent div s'adapte au contenu en ajoutant style="height: 100%" au parent div. Voici le code mis à jour:

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

J'ai également appliqué les modifications suivantes à mon fichier styles.scss pour le faire fonctionner (trouvé dans une autre question sur stackoverflow):

html, body {
  height: 100%;
}

Mais cela n’a pas non plus fonctionné pour moi:  enter image description here Sur la capture d'écran, la hauteur semble être correcte, mais ce n'est pas le cas. Tout d'abord, lorsque je fais défiler l'écran vers le bas, cela fonctionne comme il se doit, mais lorsque la fin de la table se rapproche, la barre de défilement disparaît de la vue. Je ne peux donc pas la voir tant que je peux toujours faire défiler. On dirait que le datatable est légèrement supérieur à ce qu'il devrait être.

Alors, comment puis-je résoudre ce problème? Toute aide serait appréciée!

cssangularprimengprimeng-datatable
4
Nikita Marinosyan

Je ne sais pas si cela correspond exactement à votre cas, mais j'ai résolu mon problème en définissant la propriété datatable scrollHeight sur:

scrollHeight="50vh"

vh fait référence à:

vh par rapport à 1% de la hauteur du viewport

Viewport = la taille de la fenêtre du navigateur. Si la fenêtre a une largeur de 50 cm, 1vw = 0,5 cm.

Vous pouvez tester différentes valeurs du vh et voir ce qui convient le mieux.

plus sur: https://www.w3schools.com/cssref/css_units.asp

4
fabioresner

J'utilise ceci à p-table (je ne sais pas si cela fonctionnera sur p-datatable).

[scrollHeight]="'calc(100vh - 204px)'"

4
jvitor83

ScrollHeight doit être 100%.

0
Tejashree