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

[MILLERMARRU]

This example previously had no grouped columns at all, firstName and lastName were flat top-level accessors, so there was actually no way to exercise sticky positioning for a group header before this PR. Wrapping them in an info group is what exposes the bug in the first place, getCommonPinningStyles(column) was being called with the group's own column, whose getIsPinned/getStart/getAfter don't reflect what its leaf columns are actually doing.

I checked header_getSize in table-core to confirm header.getSize() on a group header already sums its leaf columns (sumHeaderSize), so using it directly as width for the group is correct and explains why the tests expect the Info header to be ~360px (180+180) rather than the single-column 180.

The "every leaf column must share the same pinned side" check in getHeaderPinningStyles is the right call for deciding sticky vs relative. The first test nails exactly why: pin only First Name to start while Last Name stays unpinned, and since pinning to start doesn't reorder columns when the pinned one is already first, TanStack still renders Info as one merged header cell, just now with mixed-pinned leaves underneath. Without the "all leaves agree" check, that merged cell would likely have inherited a stale or partial sticky style. The test asserting position: relative in that exact intermediate state is a good regression guard, and the second test showing Info splits into two separate header cells once First Name is pinned to end (because pinning to end physically reorders it away from Last Name) is a nice demonstration that the split itself is TanStack's own header-group logic doing its job, not something this PR has to handle manually.

Using firstLeafColumn.getStart('start') and lastLeafColumn.getAfter('end') instead of the group column's own offsets is correct since a group column has no size/position of its own outside of what its leaves contribute, and the boundingBox assertions comparing the sticky header's x against the actual leaf header's x are a good way to catch an off-by-one-column offset that a snapshot-only test would miss.

Only thing I'd note is this all lives in an example, so it's more "here's the pattern to copy" than covered by table-core's own test suite, but for a docs example that's the right place for this logic to live since it's inherently presentational.