patternfly / patternfly/react-component-groups

SkeletonTable: add option to hide header skeleton rows

Ouverte Adaptée aux débutants
#968 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Langage dominant
TypeScript
Étoiles
10
Forks
40
Merge moyen
3 j 22 h
PR mergées (30 j)
4

Description

Description

SkeletonTable always renders skeleton rows for the table header. There is no prop to suppress header skeletons while keeping the body skeleton rows.

Use Case

In ansible/ansible-ui, our PageLoadingTable intentionally omits header skeletons because the real table header (with column titles, sort controls, etc.) is already rendered above the loading state by the toolbar/layout. Showing skeleton header rows creates a visual mismatch — users see the real header and a duplicate skeleton header simultaneously.

Proposed Solution

Add a boolean prop (e.g., showHeaderSkeleton defaulting to true, or numberOfHeaderRows defaulting to 1 with 0 meaning none) to control whether header skeleton rows are rendered.

Current Workaround

We maintain a custom PageLoadingTable component that renders PF6 Skeleton components for body rows only, without header skeletons.


Jira Issue: PF-4546

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Repérez le composant SkeletonTable et tous les tests associés, puis examinez comment les lignes skeleton de l’en-tête et du corps sont actuellement rendues. Ajoutez une option booléenne ou une option de nombre de lignes, avec le comportement actuel de l’en-tête par défaut, et vérifiez que sa désactivation laisse les lignes du corps intactes et que les tests pertinents passent.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react, typescript
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
2/5
Temps estimé
1-3 heures
Activité
Active
Clarté
Plutôt claire
Accessibilité débutants
72/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.