patternfly / patternfly/react-component-groups

SkeletonTable: add option to hide header skeleton rows

Abierto Apto para principiantes
#968 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Lenguaje dominante
TypeScript
Estrellas
10
Forks
40
Merge medio
3 d 22 h
PR fusionados (30 d)
4

Descripción

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

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Localiza el componente SkeletonTable y cualquier prueba relacionada, y luego lee cómo se renderizan actualmente las filas skeleton del encabezado y del cuerpo. Añade una opción booleana o de cantidad de filas, con el comportamiento actual del encabezado como valor predeterminado, y verifica que deshabilitarla deje intactas las filas del cuerpo y que las pruebas relevantes pasen.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
react, typescript
Área
frontend
Tipo de issue
Nueva funcionalidad
Dificultad
2/5
Tiempo estimado
1-3 horas
Estado de actividad
Activo
Claridad
Bastante claro
Aptitud para principiantes
72/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.