feat(Table): separate sticky and pinned styles

[kmcfaul]

Testing out different methods of applying additional sticky styling only when the scroll has moved the element from the top of its container.

Summary by CodeRabbit

• New Features
  • Added sticky header capability to tables. When enabled, table headers remain fixed at the top of the viewport while scrolling through content, improving visibility and navigation.

[coderabbitai]

Walkthrough

The changes add a sticky header feature to the Table component by introducing an isStickyHeader context flag and updating the Thead component to observe intersection changes and apply a 'PINNED' class when sticky behavior is triggered.

Changes

Cohort / File(s)	Summary
Sticky Header Implementation packages/react-table/src/components/Table/Table.tsx, packages/react-table/src/components/Table/Thead.tsx	Introduced isStickyHeader context flag to TableContextProps with default value false. Enhanced Thead to conditionally set up IntersectionObserver for sticky header behavior, detecting scroll parent and applying 'PINNED' class based on intersection ratio threshold of 0.999.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

• thatblindgeye
• mcoker

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat(Table): separate sticky and pinned styles' clearly relates to the main changes in the PR, which add sticky header functionality and pinned state management to the Table component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[patternfly-build]

Preview: https://pf-react-pr-12316.surge.sh

A11y report: https://pf-react-pr-12316-a11y.surge.sh

[coderabbitai]

🧹 Nitpick comments (1)

packages/react-table/src/components/Table/Thead.tsx (1)

82-82: Remove debug comment.

The commented console.log should be removed before merging.

🧹 Proposed fix

     const observer = new IntersectionObserver(
       ([entry]) => {
-        // console.log(scrollRoot, entry, entry.intersectionRatio);
         setIsPinned(entry.intersectionRatio < PINNED_INTERSECTION_RATIO);
       },

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/react-table/src/components/Table/Thead.tsx` at line 82, Remove the
debug comment "console.log(scrollRoot, entry, entry.intersectionRatio);" from
the Table Thead component (Thead.tsx) so no leftover debug logging remains;
locate the line within the intersection/observer logic where scrollRoot, entry,
and entry.intersectionRatio are referenced and delete the commented console.log
statement.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/react-table/src/components/Table/Thead.tsx`:
- Line 82: Remove the debug comment "console.log(scrollRoot, entry,
entry.intersectionRatio);" from the Table Thead component (Thead.tsx) so no
leftover debug logging remains; locate the line within the intersection/observer
logic where scrollRoot, entry, and entry.intersectionRatio are referenced and
delete the commented console.log statement.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 4660fa05-ac78-4661-ba18-0fbdaf40d193

📥 Commits

Reviewing files that changed from the base of the PR and between c9853de and 73590e1.

📒 Files selected for processing (2)

• packages/react-table/src/components/Table/Table.tsx
• packages/react-table/src/components/Table/Thead.tsx