Skip to content

feat(Table): support dynamic sticky styling#12348

Open
kmcfaul wants to merge 3 commits intopatternfly:mainfrom
kmcfaul:sticky-table-updates
Open

feat(Table): support dynamic sticky styling#12348
kmcfaul wants to merge 3 commits intopatternfly:mainfrom
kmcfaul:sticky-table-updates

Conversation

@kmcfaul
Copy link
Copy Markdown
Contributor

@kmcfaul kmcfaul commented Apr 10, 2026

What: Closes #12329

Needs patternfly/patternfly#8223 to be merged and pulled in for styling.

  • Bumps core to v.66
  • Passes ref through to InnerScrollContainer
  • Adds isStickyHeaderBase and isStickyHeaderStuck properties to Table
  • Adds unit tests for new modifiers
  • Adds "dynamic sticky header" simplified example

Notes -
New styling is most noticeable in glass theme, but still works in default.
If sticky column support goes in before this merges will update that here.

Summary by CodeRabbit

  • Chores

    • Updated PatternFly dependency across packages to prerelease version 6.5.0-prerelease.66.
  • New Features

    • Added ref forwarding support to scroll container component.
    • Introduced new beta sticky header styling options for dynamic control.
    • Added example demonstrating scroll-aware sticky header behavior.
  • Documentation

    • Added documentation and example for dynamic sticky header pattern.

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 10, 2026

Walkthrough

Adds devDependency bumps for @patternfly/patternfly across multiple packages; extends Table with two beta sticky-header props and class logic; adds forwardRef support to InnerScrollContainer; introduces a dynamic sticky header example and tests tracking sticky-stuck state via scroll.

Changes

Cohort / File(s) Summary
Dependency updates
packages/react-core/package.json, packages/react-docs/package.json, packages/react-icons/package.json, packages/react-styles/package.json, packages/react-tokens/package.json
Bump @patternfly/patternfly devDependency from 6.5.0-prerelease.65 to 6.5.0-prerelease.66.
InnerScrollContainer (ref support)
packages/react-table/src/components/Table/InnerScrollContainer.tsx
Introduce InnerScrollContainerBase accepting innerRef?: React.Ref<HTMLDivElement> and export InnerScrollContainer as a forwardRef wrapper forwarding the ref.
Table sticky header props & class logic
packages/react-table/src/components/Table/Table.tsx, packages/react-table/src/components/Table/__tests__/Table.test.tsx
Add isStickyHeaderBase?: boolean and isStickyHeaderStuck?: boolean to TableProps; apply styles.modifiers.stickyHeaderBase and styles.modifiers.stickyHeaderStuck conditionally; add tests asserting modifier class presence/absence.
Dynamic sticky header example & docs
packages/react-table/src/components/Table/examples/TableStickyHeaderDynamic.tsx, packages/react-table/src/components/Table/examples/Table.md
Add TableStickyHeaderDynamic example and useIsStuckFromScrollParent hook to track scrollTop and toggle isStickyHeaderStuck; update documentation with "Dynamic sticky header" guidance and example import.

Sequence Diagram

sequenceDiagram
    participant ScrollParent as Scroll Parent (InnerScrollContainer)
    participant Hook as useIsStuckFromScrollParent
    participant Component as TableStickyHeaderDynamic
    participant Table as Table Component
    participant Styles as CSS Modifiers

    ScrollParent->>Hook: scroll event (passive)
    activate Hook
    Hook->>Hook: read scrollTop, compute isStuck
    Hook-->>Component: set isStuck state
    deactivate Hook

    Component->>Table: render with isStickyHeaderBase=true, isStickyHeaderStuck=isStuck
    Table->>Styles: apply stickyHeaderBase / stickyHeaderStuck modifiers
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested reviewers

  • mcoker
  • thatblindgeye
  • nicolethoen
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title 'feat(Table): support dynamic sticky styling' clearly and concisely summarizes the main change—adding support for dynamic sticky header styling via new props.
Linked Issues check ✅ Passed The PR fulfills all coding requirements from #12329: adds isStickyHeaderBase and isStickyHeaderStuck props to Table, adds forwardRef to InnerScrollContainer, creates a new example with a custom hook demonstrating dynamic sticky behavior, and includes documentation and tests.
Out of Scope Changes check ✅ Passed All changes are directly related to implementing dynamic sticky table styling; package version bumps for @patternfly/patternfly are justified as supporting dependencies for the feature.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@patternfly-build
Copy link
Copy Markdown
Collaborator

patternfly-build commented Apr 10, 2026

@kmcfaul kmcfaul force-pushed the sticky-table-updates branch from 0668f05 to 4316b40 Compare April 10, 2026 17:54
Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@packages/react-table/src/components/Table/examples/TableStickyHeaderDynamic.tsx`:
- Around line 108-111: In the Tbody of the TableStickyHeaderDynamic component
replace the non-header cell currently rendered with <Th ...> (the state cell
where `{` ${fact.state}`}` is rendered) with a data cell component <Td ...> so
body rows use Td not Th; keep the same props (modifier="nowrap",
dataLabel={columnNames.state}) and children (BlueprintIcon and the state text)
to preserve styling and accessibility semantics.
- Line 84: The aria-label on the example component TableStickyHeaderDynamic.tsx
currently reads "Sticky columns and header table" but the demo only shows
dynamic sticky header behavior; update the aria-label prop (the JSX attribute
aria-label on the TableStickyHeaderDynamic example component) to accurately
describe the example (e.g., something indicating "Dynamic sticky header table"
or similar) so it no longer references sticky columns.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b1443169-49cc-4b17-a403-8960c219ab96

📥 Commits

Reviewing files that changed from the base of the PR and between 911223a and 4316b40.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (9)
  • packages/react-core/package.json
  • packages/react-docs/package.json
  • packages/react-icons/package.json
  • packages/react-styles/package.json
  • packages/react-table/src/components/Table/InnerScrollContainer.tsx
  • packages/react-table/src/components/Table/Table.tsx
  • packages/react-table/src/components/Table/examples/Table.md
  • packages/react-table/src/components/Table/examples/TableStickyHeaderDynamic.tsx
  • packages/react-tokens/package.json

Copy link
Copy Markdown
Contributor

@mcoker mcoker left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NICE

@kmcfaul kmcfaul closed this Apr 10, 2026
@kmcfaul kmcfaul reopened this Apr 10, 2026
@kmcfaul
Copy link
Copy Markdown
Contributor Author

kmcfaul commented Apr 10, 2026

Reopening to rerun Snyk

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Table - add updated sticky props & example

3 participants