patternfly / patternfly/react-component-groups
SkeletonTable: add option to hide header skeleton rows
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 10
- Forks
- 40
- Avg merge
- 3d 22h
- Merged PRs (30d)
- 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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Locate the SkeletonTable component and any related tests, then read how header and body skeleton rows are currently rendered. Add a boolean or row-count option with the existing header behavior as the default, and verify that disabling it leaves body rows intact while relevant tests pass.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 72/100