web-dev-qa-db-fra.com

Angular 6 Material Sticky Header Table ne fonctionne pas

J'ai besoin de faire l'en-tête du composant mat-table fixé en haut, mais cela ne fonctionne pas.

J'ai Angular v6.1.7 et @ angular/material v6.4.7.

J'ai ajouté la propriété "sticky: true" au matHeaderRowDef comme quelqu'un mentionne ici mais cela ne fait rien :(

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

J'ai cet exemple de projet: https://stackblitz.com/edit/angular-wem2qa

Voici mes importations sur le fichier TS:

import { Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from "@angular/core";
import { MatDialog, MatExpansionPanel, MatSnackBar, MatSort, MatTableDataSource, Sort } from "@angular/material";
angularangular-materialangular-material-6
4
FrancoVP

Votre problème n'est peut-être pas la ligne collante elle-même. Vous devez ajouter un conteneur autour de votre table pour vous assurer qu'une ligne peut être collante en haut avec ces styles par exemple:

.example-container {
  height: 400px;
  overflow: auto;
}

Voir l'exemple sur Angular Documentation matérielle: https://material.angular.io/components/table/overview#sticky-rows-and-columns et vérifiez également le Onglet CSS.

5
Philipp Escher

Il semble que cela ne soit plus pris en charge dans IE. Extrait de la documentation :

Cette fonctionnalité est prise en charge par Chrome, Firefox, Safari et Edge. Il n'est pas pris en charge dans IE, mais il échoue gracieusement afin que les lignes ne collent tout simplement pas.

L'alternative serait de le gérer manuellement, à partir de Javascript, mais ce serait très cher pour un ancien navigateur comme IE.

0
Sergiu