web-dev-qa-db-fra.com

Table de données de matériau angulaire 6 avec en-tête fixe et paginateur

Comment faire en sorte que le composant En-tête de la table de données soit fixé en haut et le paginateur en bas?

C'est mon HTML:

<div class="example-container mat-elevation-z8">

    <table mat-table #itemsTable [dataSource]="dataSource" class="items-list">

        <ng-container matColumnDef="position">
            <th mat-header-cell *matHeaderCellDef> No. </th>
            <td mat-cell *matCellDef="let element"> {{element.position}} </td>
        </ng-container>

        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef> Name </th>
            <td mat-cell *matCellDef="let element"> {{element.name}} </td>
        </ng-container>

        <ng-container matColumnDef="weight">
            <th mat-header-cell *matHeaderCellDef> Weight </th>
            <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
        </ng-container>

        <ng-container matColumnDef="symbol">
            <th mat-header-cell *matHeaderCellDef> Symbol </th>
            <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="this.componentsDataService.displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: this.componentsDataService.displayedColumns;" (click)="onRowClicked(row)"></tr>
    </table>

    <mat-paginator [pageSizeOptions]="[50, 100, 250]" showFirstLastButtons></mat-paginator>

</div>

J'ai essayé d'ajouter sticky au <tr mat-header-row> à partir de la documentation, mais cela ne fonctionne pas.

Mes importations dans un fichier .ts:

 import { Component, OnInit, OnChanges, Input, ViewChild } from '@angular/core';
 import { TabsDataService } from 'src/app/services/tabs-data.service';
 import { ComponentsDataService } from 'src/app/services/components-data.service';
 import { MatPaginator, MatTableDataSource, MatTable, MatTableModule } from '@angular/material'

;

angularangular-material
8
Astacius

Essayez de mettre à jour le matériau angulaire dans votre projet car l'attribut sticky a été ajouté en 6.2.3.

4
kavind

J'ai trouvé dans les exemples sur le site material que l'en-tête peut être corrigé en ajoutant un sticky au matHeaderRowDef:

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true">

Pour le paginateur, j'ai ajouté une classe à mat-paginator:

<mat-paginator ...
                class="mat-paginator-sticky">

avec une classe basée sur la réponse dans le lien link @frederik fournie dans les commentaires

.mat-paginator-sticky {
  bottom: 0px;
  position: sticky;
  z-index: 10;
}
19
Wendie

Le css ci-dessous a fonctionné pour moi: 

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
.mat-header-row{
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  }
0
shrinidhi desai