fix: prevent sticky pinned column overlap#6386
Conversation
📝 WalkthroughWalkthroughCSS updates across the column-pinning-sticky examples add fixed table layout, hidden overflow on header and body cells, and ellipsis truncation for nowrap text to keep pinned columns from overlapping while scrolling. ChangesSticky Column Overflow Fix
Estimated code review effort: 2 (Simple) | ~10 minutes Related issues: Resolves resized sticky columns overlapping when scrolling horizontally in the Column Pinning Sticky example ( Suggested labels: examples, css, bugfix Suggested reviewers: KevinVandy 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
|
View your CI Pipeline Execution ↗ for commit 1697331
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@examples/angular/column-pinning-sticky/src/styles.css`:
- Around line 23-33: The global th styling currently clips both axes, which can
hide the pin controls rendered by the header template. Update the th rule used
by the sticky column-pinning example so the clipping only applies horizontally,
keeping the fixed height behavior while preserving the .pin-actions controls
inside the pinnable header cells. Use the th selector in the styles for the
Angular column-pinning-sticky example as the place to make this adjustment.
In `@examples/lit/column-pinning-sticky/src/main.ts`:
- Around line 352-365: The `th` styles in the sticky column example are clipping
the pin-action controls because `overflow: hidden` is applied to the whole
header cell, including the `th` template that renders the header text,
pin-actions row, and resizer. Update the styling so the horizontal sticky
overlap is handled without clipping vertical content—keep the clip scoped to the
horizontal axis or another wrapper used by the sticky behavior, and avoid
applying full overflow clipping to the `th` itself. Use the existing `th` and
`.pin-actions` markup in the same file to verify the buttons remain visible and
clickable.
In `@examples/preact/column-pinning-sticky/src/index.css`:
- Around line 23-33: The header cell styling in the `th` rule is clipping the
pin controls and resizer because the fixed 30px height and overflow rules apply
to the whole header, including `.nowrap`, `.pin-actions`, and `.resizer`. Update
the header layout in `index.css` so the clipping/ellipsis behavior is handled by
`.nowrap` instead of `th`, or allow the `th` height to grow, while keeping the
header controls visible and accessible.
In `@examples/solid/column-pinning-sticky/src/index.css`:
- Around line 22-32: The table header styling in th is clipping the .pin-actions
controls because the fixed 30px height and overflow hidden prevent the header
from expanding. Update the th rules in index.css so the header can show both the
label and pin/unpin controls, either by removing the fixed height or changing
overflow to only clip horizontally while keeping the vertical content visible.
In `@examples/svelte/column-pinning-sticky/src/index.css`:
- Around line 22-32: The th styling is clipping the pin-action row because
overflow: hidden hides vertical content under the fixed 30px header height.
Update the th rule in the column-pinning-sticky example so only horizontal
overflow is hidden (overflow-x) while preserving vertical visibility, and keep
the rest of the header styling unchanged.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 61160862-3ac3-4d80-9f90-6ab486475d49
📒 Files selected for processing (6)
examples/angular/column-pinning-sticky/src/styles.cssexamples/lit/column-pinning-sticky/src/main.tsexamples/preact/column-pinning-sticky/src/index.cssexamples/solid/column-pinning-sticky/src/index.cssexamples/svelte/column-pinning-sticky/src/index.cssexamples/vue/column-pinning-sticky/src/index.css
| th { | ||
| background-color: lightgray; | ||
| border-bottom: 1px solid lightgray; | ||
| box-sizing: border-box; | ||
| font-weight: bold; | ||
| height: 30px; | ||
| overflow: hidden; | ||
| padding: 2px 4px; | ||
| position: relative; | ||
| text-align: center; | ||
| } |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n== Files ==\n'
git ls-files 'examples/angular/column-pinning-sticky/*' 'examples/lit/column-pinning-sticky/*' | sort
printf '\n== Angular outline ==\n'
ast-grep outline examples/angular/column-pinning-sticky/src --match '' --view expanded 2>/dev/null || true
printf '\n== Lit outline ==\n'
ast-grep outline examples/lit/column-pinning-sticky/src --match '' --view expanded 2>/dev/null || true
printf '\n== Search for pin buttons / header template ==\n'
rg -n "pin|unpin|button|th|header" examples/angular/column-pinning-sticky examples/lit/column-pinning-sticky
printf '\n== Angular relevant files ==\n'
for f in \
examples/angular/column-pinning-sticky/src/main.ts \
examples/angular/column-pinning-sticky/src/styles.css \
examples/lit/column-pinning-sticky/src/main.ts
do
if [ -f "$f" ]; then
echo "--- $f ($(wc -l < "$f") lines) ---"
sed -n '1,260p' "$f"
fi
doneRepository: TanStack/table
Length of output: 33356
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n== Files ==\n'
git ls-files 'examples/angular/column-pinning-sticky/*' 'examples/lit/column-pinning-sticky/*' | sort
printf '\n== Search for pin buttons / header template ==\n'
rg -n "pin|unpin|button|th|header" examples/angular/column-pinning-sticky examples/lit/column-pinning-sticky
printf '\n== Angular relevant files ==\n'
for f in \
examples/angular/column-pinning-sticky/src/main.ts \
examples/angular/column-pinning-sticky/src/styles.css \
examples/lit/column-pinning-sticky/src/main.ts
do
if [ -f "$f" ]; then
echo "--- $f ($(wc -l < "$f") lines) ---"
sed -n '1,260p' "$f"
fi
doneRepository: TanStack/table
Length of output: 32380
🏁 Script executed:
#!/bin/bash
set -euo pipefail
git ls-files 'examples/angular/column-pinning-sticky/**' 'examples/lit/column-pinning-sticky/**' | sortRepository: TanStack/table
Length of output: 1203
Keep th clipping horizontal only examples/angular/column-pinning-sticky/src/app/app.html renders .pin-actions inside each pinnable header cell, so overflow: hidden on the fixed-30px th can clip the pin buttons. overflow-x: hidden preserves the intended horizontal crop without hiding the controls.
Proposed fix
th {
background-color: lightgray;
border-bottom: 1px solid lightgray;
box-sizing: border-box;
font-weight: bold;
height: 30px;
- overflow: hidden;
+ overflow-x: hidden;
padding: 2px 4px;
position: relative;
text-align: center;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| th { | |
| background-color: lightgray; | |
| border-bottom: 1px solid lightgray; | |
| box-sizing: border-box; | |
| font-weight: bold; | |
| height: 30px; | |
| overflow: hidden; | |
| padding: 2px 4px; | |
| position: relative; | |
| text-align: center; | |
| } | |
| th { | |
| background-color: lightgray; | |
| border-bottom: 1px solid lightgray; | |
| box-sizing: border-box; | |
| font-weight: bold; | |
| height: 30px; | |
| overflow-x: hidden; | |
| padding: 2px 4px; | |
| position: relative; | |
| text-align: center; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@examples/angular/column-pinning-sticky/src/styles.css` around lines 23 - 33,
The global th styling currently clips both axes, which can hide the pin controls
rendered by the header template. Update the th rule used by the sticky
column-pinning example so the clipping only applies horizontally, keeping the
fixed height behavior while preserving the .pin-actions controls inside the
pinnable header cells. Use the th selector in the styles for the Angular
column-pinning-sticky example as the place to make this adjustment.
| table-layout: fixed; | ||
| } | ||
|
|
||
| th { | ||
| background-color: lightgray; | ||
| border-bottom: 1px solid lightgray; | ||
| box-sizing: border-box; | ||
| font-weight: bold; | ||
| height: 30px; | ||
| overflow: hidden; | ||
| padding: 2px 4px; | ||
| position: relative; | ||
| text-align: center; | ||
| } |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
overflow: hidden on th clips the pin-action buttons — confirmed by the markup in this same file.
The th template (Lines 240-299) renders, inside a single th with fixed height: 30px:
<div class="nowrap">...</div>
${pin-actions button row}
<div class="resizer">...</div>
.pin-actions (flex, with gap/padding) plus the header text row will exceed the 30px height whenever a column's pin buttons are shown. Now that overflow: hidden is added to th, that overflow is clipped — and clipped content outside an overflow: hidden box is not rendered or hit-testable, so pin/unpin buttons become invisible and unclickable for any column with visible pin actions.
The reported bug (sticky column overlap) is a horizontal-axis mismatch only; scope the clip accordingly to avoid the regression:
🛡️ Proposed fix
th {
background-color: lightgray;
border-bottom: 1px solid lightgray;
box-sizing: border-box;
font-weight: bold;
height: 30px;
- overflow: hidden;
+ overflow-x: hidden;
padding: 2px 4px;
position: relative;
text-align: center;
}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@examples/lit/column-pinning-sticky/src/main.ts` around lines 352 - 365, The
`th` styles in the sticky column example are clipping the pin-action controls
because `overflow: hidden` is applied to the whole header cell, including the
`th` template that renders the header text, pin-actions row, and resizer. Update
the styling so the horizontal sticky overlap is handled without clipping
vertical content—keep the clip scoped to the horizontal axis or another wrapper
used by the sticky behavior, and avoid applying full overflow clipping to the
`th` itself. Use the existing `th` and `.pin-actions` markup in the same file to
verify the buttons remain visible and clickable.
| th { | ||
| background-color: lightgray; | ||
| border-bottom: 1px solid lightgray; | ||
| box-sizing: border-box; | ||
| font-weight: bold; | ||
| height: 30px; | ||
| overflow: hidden; | ||
| padding: 2px 4px; | ||
| position: relative; | ||
| text-align: center; | ||
| } |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
rg -n "pin-actions|resizer" examples/preact/column-pinning-sticky/src/main.tsx -A3 -B3Repository: TanStack/table
Length of output: 982
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== main.tsx relevant section =="
sed -n '170,255p' examples/preact/column-pinning-sticky/src/main.tsx
echo
echo "== index.css relevant section =="
sed -n '1,120p' examples/preact/column-pinning-sticky/src/index.cssRepository: TanStack/table
Length of output: 5285
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n "\.(pin-actions|pin-button|resizer|nowrap)\b|pin-actions|pin-button|resizer|nowrap" examples/preact/column-pinning-sticky/src/index.css examples/preact/column-pinning-sticky/src/main.tsx -A4 -B4Repository: TanStack/table
Length of output: 9873
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Preact markup =="
sed -n '185,250p' examples/preact/column-pinning-sticky/src/main.tsx
echo
echo "== Lit markup =="
fd -a 'main.ts' examples/lit/column-pinning-sticky/srcRepository: TanStack/table
Length of output: 3052
🏁 Script executed:
#!/bin/bash
set -euo pipefail
nl -ba examples/preact/column-pinning-sticky/src/main.tsx | sed -n '185,250p'
echo
nl -ba examples/preact/column-pinning-sticky/src/index.css | sed -n '1,80p'Repository: TanStack/table
Length of output: 192
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== locate column-pinning-sticky examples =="
fd -a 'index.css' examples | rg 'column-pinning-sticky'
echo
fd -a 'main.tsx' examples | rg 'column-pinning-sticky'
echo
echo "== search for overflow settings and header controls in similar demos =="
rg -n "overflow-x: hidden|overflow: hidden|pin-actions|resizer|nowrap" examples -g 'index.css' -g 'main.tsx' -g '*.ts' -g '*.tsx'Repository: TanStack/table
Length of output: 50370
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Lit sticky header markup =="
sed -n '235,310p' examples/lit/column-pinning-sticky/src/main.ts
echo
echo "== Lit sticky relevant CSS =="
sed -n '350,515p' examples/lit/column-pinning-sticky/src/main.tsRepository: TanStack/table
Length of output: 7625
Keep the header controls out of the clipped th. In examples/preact/column-pinning-sticky/src/index.css, the 30px th still wraps .nowrap, .pin-actions, and .resizer as stacked siblings, so overflow-x: hidden leaves the vertical clipping intact and can hide the pin buttons/resizer. Move the ellipsis clipping to .nowrap, or let the header height expand.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@examples/preact/column-pinning-sticky/src/index.css` around lines 23 - 33,
The header cell styling in the `th` rule is clipping the pin controls and
resizer because the fixed 30px height and overflow rules apply to the whole
header, including `.nowrap`, `.pin-actions`, and `.resizer`. Update the header
layout in `index.css` so the clipping/ellipsis behavior is handled by `.nowrap`
instead of `th`, or allow the `th` height to grow, while keeping the header
controls visible and accessible.
| th { | ||
| background-color: lightgray; | ||
| border-bottom: 1px solid lightgray; | ||
| box-sizing: border-box; | ||
| font-weight: bold; | ||
| height: 30px; | ||
| overflow: hidden; | ||
| padding: 2px 4px; | ||
| position: relative; | ||
| text-align: center; | ||
| } |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
rg -n "pin-actions|resizer" examples/solid/column-pinning-sticky/src/App.tsx -A3 -B3Repository: TanStack/table
Length of output: 982
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n## App.tsx excerpt\n'
sed -n '160,235p' examples/solid/column-pinning-sticky/src/App.tsx
printf '\n## index.css excerpt\n'
sed -n '1,80p' examples/solid/column-pinning-sticky/src/index.cssRepository: TanStack/table
Length of output: 4618
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n "^(\.pin-actions|\.nowrap|\.resizer|th \{|td \{|\.table-container|\.button-row)" examples/solid/column-pinning-sticky/src/index.css -A8 -B3
printf '\n## Tail of CSS\n'
sed -n '80,180p' examples/solid/column-pinning-sticky/src/index.cssRepository: TanStack/table
Length of output: 3233
Keep the header controls visible
th contains both the header label and the .pin-actions row, so the fixed height: 30px plus overflow: hidden clips the pin/unpin buttons. Switch to horizontal-only clipping or let the header grow to fit the controls.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@examples/solid/column-pinning-sticky/src/index.css` around lines 22 - 32, The
table header styling in th is clipping the .pin-actions controls because the
fixed 30px height and overflow hidden prevent the header from expanding. Update
the th rules in index.css so the header can show both the label and pin/unpin
controls, either by removing the fixed height or changing overflow to only clip
horizontally while keeping the vertical content visible.
| th { | ||
| background-color: lightgray; | ||
| border-bottom: 1px solid lightgray; | ||
| box-sizing: border-box; | ||
| font-weight: bold; | ||
| height: 30px; | ||
| overflow: hidden; | ||
| padding: 2px 4px; | ||
| position: relative; | ||
| text-align: center; | ||
| } |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
rg -n "pin-actions|resizer" examples/svelte/column-pinning-sticky/src/App.svelte -A3 -B3Repository: TanStack/table
Length of output: 903
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "=== App.svelte header area ==="
sed -n '160,235p' examples/svelte/column-pinning-sticky/src/App.svelte
echo
echo "=== index.css relevant rules ==="
sed -n '1,120p' examples/svelte/column-pinning-sticky/src/index.cssRepository: TanStack/table
Length of output: 5046
Avoid clipping the pin actions overflow: hidden on th will hide the pin-action row under the fixed 30px header height. Change it to overflow-x: hidden.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@examples/svelte/column-pinning-sticky/src/index.css` around lines 22 - 32,
The th styling is clipping the pin-action row because overflow: hidden hides
vertical content under the fixed 30px header height. Update the th rule in the
column-pinning-sticky example so only horizontal overflow is hidden (overflow-x)
while preserving vertical visibility, and keep the rest of the header styling
unchanged.
2 participants
Changes
Closes #5392.
This fixes the React
column-pinning-stickyexample so resized pinned columns do not overlap when horizontally scrolling.The example calculates sticky offsets from TanStack Table column sizes, but browser auto table layout could let rendered cell widths diverge from those calculated sizes after resizing. This change makes the rendered table cells respect the explicit column widths by using fixed table layout, border-box sizing, and clipped overflowing content.
Changes made:
table-layout: fixedto the example table.box-sizing: border-boxto header and body cells.Checklist
pnpm test:pr.Testing
git diff --checknpm run buildfromexamples/react/column-pinning-stickyManual visual testing:
Summary by CodeRabbit