Skip to content

fix: prevent sticky pinned column overlap #6386

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KevinVandy merged 2 commits into from
Jul 6, 2026
Merged

fix: prevent sticky pinned column overlap #6386

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
46de1f9
fix: prevent sticky pinned column overlap
gerasidev Jul 6, 2026
1697331
do for other framework examples too
KevinVandy Jul 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions examples/angular/column-pinning-sticky/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,25 @@ table {
/* box-shadow and borders will not work with position: sticky otherwise */
border-collapse: collapse;
border-spacing: 0;
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;
}
Comment on lines 23 to 33

@coderabbitai coderabbitai Bot Jul 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🩺 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
done

Repository: 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
done

Repository: 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/**' | sort

Repository: 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.

Suggested change
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.


td {
background-color: white;
box-sizing: border-box;
overflow: hidden;
padding: 2px 4px;
}

Expand Down Expand Up @@ -187,6 +192,8 @@ td {
}

.nowrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

Expand Down
7 changes: 7 additions & 0 deletions examples/lit/column-pinning-sticky/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -349,20 +349,25 @@ class LitTableExample extends LitElement {
}

table {
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;
}
Comment on lines +352 to 365

@coderabbitai coderabbitai Bot Jul 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

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


td {
background-color: white;
box-sizing: border-box;
overflow: hidden;
padding: 2px 4px;
}

Expand Down Expand Up @@ -493,6 +498,8 @@ class LitTableExample extends LitElement {
border-color: #000;
}
.nowrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.demo-note {
Expand Down
7 changes: 7 additions & 0 deletions examples/preact/column-pinning-sticky/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,25 @@ table {
/* box-shadow and borders will not work with position: sticky otherwise */
border-collapse: collapse;
border-spacing: 0;
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;
}
Comment on lines 23 to 33

@coderabbitai coderabbitai Bot Jul 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🩺 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 -B3

Repository: 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.css

Repository: 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 -B4

Repository: 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/src

Repository: 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.ts

Repository: 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.


td {
background-color: white;
box-sizing: border-box;
overflow: hidden;
padding: 2px 4px;
}

Expand Down Expand Up @@ -187,6 +192,8 @@ td {
}

.nowrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

Expand Down
7 changes: 7 additions & 0 deletions examples/react/column-pinning-sticky/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,25 @@ table {
/* box-shadow and borders will not work with position: sticky otherwise */
border-collapse: collapse;
border-spacing: 0;
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;
}

td {
background-color: white;
box-sizing: border-box;
overflow: hidden;
padding: 2px 4px;
}

Expand Down Expand Up @@ -187,6 +192,8 @@ td {
}

.nowrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

Expand Down
7 changes: 7 additions & 0 deletions examples/solid/column-pinning-sticky/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,25 @@ html {
table {
border-collapse: collapse;
border-spacing: 0;
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;
}
Comment on lines 22 to 32

@coderabbitai coderabbitai Bot Jul 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🩺 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 -B3

Repository: 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.css

Repository: 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.css

Repository: 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.


td {
background-color: white;
box-sizing: border-box;
overflow: hidden;
padding: 2px 4px;
}

Expand Down Expand Up @@ -186,6 +191,8 @@ td {
}

.nowrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

Expand Down
7 changes: 7 additions & 0 deletions examples/svelte/column-pinning-sticky/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,25 @@ html {
table {
border-collapse: collapse;
border-spacing: 0;
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;
}
Comment on lines 22 to 32

@coderabbitai coderabbitai Bot Jul 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🩺 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 -B3

Repository: 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.css

Repository: 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.


td {
background-color: white;
box-sizing: border-box;
overflow: hidden;
padding: 2px 4px;
}

Expand Down Expand Up @@ -186,6 +191,8 @@ td {
}

.nowrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

Expand Down
7 changes: 7 additions & 0 deletions examples/vue/column-pinning-sticky/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,25 @@ html {
table {
border-collapse: collapse;
border-spacing: 0;
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;
}

td {
background-color: white;
box-sizing: border-box;
overflow: hidden;
padding: 2px 4px;
}

Expand Down Expand Up @@ -186,6 +191,8 @@ td {
}

.nowrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

Expand Down
Loading