fix: align grouped sticky headers

[biubiukam]

🎯 Changes

Fix grouped sticky headers in the React column pinning example.

Grouped headers now derive their sticky side, offsets, width, and boundary shadow from the leaf columns rendered by the current header segment. This keeps mixed partial-pinning segments relative and aligns fully pinned groups when other pinned columns precede or follow them.

Add Playwright coverage for partial group pinning and non-zero start/end offsets.

Fixes #5397

✅ Checklist

• I have followed the steps in the Contributing guide.
• I have tested this code locally with pnpm test:pr.

Summary by CodeRabbit

• New Features

  • Added support for grouped headers in the column-pinning example.
  • Grouped headers now correctly reflect pinning when all visible child columns are pinned to the same side.
  • Added sticky positioning and offset handling for grouped headers pinned to the start or end.

• Tests

  • Added end-to-end coverage for grouped-header pinning, alignment, dimensions, and sticky positioning.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 312e6b80-a376-48b3-bffe-34d1e4397e62

📥 Commits

Reviewing files that changed from the base of the PR and between d66b39f and e181abe.

📒 Files selected for processing (2)

• examples/react/column-pinning-sticky/src/main.tsx
• examples/react/column-pinning-sticky/tests/e2e/smoke.spec.ts

---

📝 Walkthrough

Walkthrough

The sticky column-pinning example now supports grouped headers. It derives pinning styles from visible leaf columns, adds an Info column group, and tests mixed, start-pinned, and end-pinned grouped-header behavior.

Changes

Grouped header sticky pinning

Layer / File(s)	Summary
Grouped-header pinning calculation examples/react/column-pinning-sticky/src/main.tsx	The example recursively finds visible leaf columns and applies sticky styles only when all leaves share a pinning side. Sticky offsets, width, and boundary shadows use the group’s leaf-column boundaries. First name and last name now belong to an Info group.
Grouped-header end-to-end validation examples/react/column-pinning-sticky/tests/e2e/smoke.spec.ts	Tests cover grouped-header locators, mixed pinning, start-pinned offsets, end-pinned offsets, dimensions, alignment, and pinning state.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Suggested reviewers: kevinvandy

Sequence Diagram(s)

sequenceDiagram
  participant HeaderCell
  participant getHeaderPinningStyles
  participant getCommonPinningStyles
  HeaderCell->>getHeaderPinningStyles: pass grouped header
  getHeaderPinningStyles->>getHeaderPinningStyles: find visible leaf columns
  getHeaderPinningStyles->>getCommonPinningStyles: pass leaf boundaries and pin position
  getCommonPinningStyles-->>HeaderCell: return sticky styles

Loading

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the fix for grouped sticky header alignment.
Linked Issues check	✅ Passed	The changes fix grouped-column sticky positioning and add tests for left, right, mixed, and offset pinning cases described in issue #5397.
Out of Scope Changes check	✅ Passed	The changes remain within the React column-pinning-sticky example and its end-to-end tests.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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.}