patternfly / patternfly/react-component-groups

SkeletonTable: add option to hide header skeleton rows

Aperta Adatta ai principianti
#968 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Lingua principale
TypeScript
Stelle
10
Fork
40
Merge medio
3g 22h
PR unite (30g)
4

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Individua il componente SkeletonTable e tutti i test correlati, quindi leggi come vengono attualmente renderizzate le righe skeleton dell’intestazione e del corpo. Aggiungi un’opzione booleana o un’opzione per il numero di righe, usando come predefinito il comportamento esistente dell’intestazione, e verifica che disabilitarla lasci inalterate le righe del corpo e che i test pertinenti vengano superati.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
react, typescript
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
2/5
Tempo stimato
1-3 ore
Stato di attività
Attiva
Chiarezza
Abbastanza chiara
Idoneità per principianti
72/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.