J'ai utilisé p-table en angulaire pour afficher des données et utilisé une barre de défilement avec une hauteur fixe comme "300px"
<p-table [columns]="myCols" [value]="myList" [scrollable]="true" scrollHeight="300px" [responsive]="true">
Ici, j'ajoute des lignes à la table de manière dynamique, ce qui crée une barre de défilement au moment de l'exécution et à ce moment-là, l'en-tête devient mal aligné.
Donc, il n'a qu'une barre de défilement sur le corps.
S'il a une barre de défilement au chargement de la page, cela fonctionne bien mais a un problème lorsque nous avons une barre de défilement au moment de l'exécution.
Voici le stackblitz pour le même problème (cliquez sur le bouton 'cloner' pour ajouter des lignes à la table de manière dynamique)
4 Réponses :
J'ai le même problème que vous mais j'ai utilisé [resizableColumns] = "true". lorsque l'en-tête devient mal aligné, je vais faire glisser le défilement de la barre horizontale. Il ne sera pas désaligné
Je l'ai réparé.
Juste besoin d'utiliser l'opérateur de propagation (...)
Besoin d'ajouter la ligne ci-dessous à la fin de l'événement de clonage.
this.cars = [...this.cars];
Stackblitz mis à jour
::ng-deep .p-datatable-scrollable-header-box {
margin-right: 17px !important;
}
Add these lines on scss file of your compoenent