Bug reportOct 20, 2026· 0:22· 8 views
TanStack Table v8.21.3: repeated rightward resize inflates columnSizing, creating a 600 px shrink dead-zone
0:22 total
Comments · 0
Be the first to comment.
Bug reportby SceneRecap AI
mediumColumn sizing feature (column resize handler in @tanstack/table-core used by @tanstack/react-table). Check how columnSizing deltas are applied while the pointer is past the container or viewport edge. Size appears to keep accumulating, or is not clamped to the rendered width, so later leftward deltas are spent on unrendered surplus first.
os: macOSdpr: 1page: TanStack Table v8 - Column Resize Dead-zone (issue #5870)locale: en-USbrowser: Chromium 151.0.7922.34library: @tanstack/react-table v8.21.3 (per on-page badge at 1.0s)timezone: Europe/Berlinviewport: 1280x720
Repro steps
- 1.Open the column resize repro page. The table shows First Name, Last Name, Age, Status and Visits. The state readout shows columnSizing: {}.
- 2.Drag the First Name resizer (separator 'Resize column (drag 1)') to the right.
- 3.Drag the First Name resizer (separator 'Resize column (drag 2)') to the right again.
- 4.Drag the First Name resizer (separator 'Resize column (drag 3)') to the right a third time, toward the viewport edge.
- 5.Drag the First Name resizer to the left using the separator whose label begins with 'Drag left' and ends with 'dead-zone'.
- 6.Watch the columnSizing readout and the First Name column width.
Expected
Each rightward drag should leave columnSizing in step with the rendered column width. Any leftward drag should start shrinking the column as soon as the pointer moves left, with no stretch of movement where the width does not respond.
Actual
Drag 1 works: at 7.0s columnSizing reads {fn: 660} and the column visibly widens. After drag 2 (9.0s, {fn: 1160}) the table overflows to the right. After drag 3 (11.0s) First Name fills the viewport and appears capped at the edge, but columnSizing keeps rising to {fn: 1261}. At 13.0s the page banner reads '3x rightward drags done, columnSizing >> visual width'. During the leftward drag the readout shows {fn: 1239} at 14.6s and {fn: 661} at 17.0s. At 19.0s the banner reads '600 px leftward drag, column width unchanged (dead-zone)'. At 21.0s columnSizing is still {fn: 661}.
Evidence
visualBaseline: columnSizing: {} and all five columns are visible. The instructions say to drag the First Name resizer right three times, then drag left.
visualControl (working): after drag 1, columnSizing reads {fn: 660}. First Name widens to about x=770, and Last Name, Age, Status and Visits are still visible. State and layout change together.
visualAfter drag 2, columnSizing reads {fn: 1160}. Last Name is pushed to the right edge and the other columns are off screen.
visualAfter drag 3, columnSizing reads {fn: 1261} while First Name appears capped at the viewport edge. Stored size and visible width diverge.
visualBanner: '3x rightward drags done, columnSizing >> visual width'.
visualLeftward drag starts on the 'Drag left' dead-zone separator. columnSizing reads {fn: 1239}, and Last Name text is only partly visible at the right edge.
visualcolumnSizing reads {fn: 661}. All five columns are visible again, matching the layout after drag 1.
visualBanner: '600 px leftward drag, column width unchanged (dead-zone)'.
visualcolumnSizing still reads {fn: 661} and the layout is unchanged.
Issue markdown (copy-paste ready)
## Bug: repeated rightward resize inflates columnSizing beyond visual width, causing a shrink dead-zone
**Environment**
- @tanstack/react-table v8.21.3 (per on-page badge)
- Chromium 151.0.7922.34, macOS
- Viewport 1280x720, DPR 1, en-US, Europe/Berlin
- Repro page: TanStack Table v8 - Column Resize Dead-zone (issue #5870)
### Steps to reproduce
1. Open the repro page. `columnSizing: {}` is shown (1.0s).
2. Drag the First Name resizer right (drag 1) (5.2s).
3. Drag it right again (drag 2) (7.2s).
4. Drag it right a third time toward the viewport edge (drag 3) (9.1s).
5. Drag the resizer left (14.6s).
6. Watch `columnSizing` against the visible column width.
### Expected
`columnSizing` stays in step with the rendered width. A leftward drag shrinks the column right away, with no dead-zone.
### Actual
- Control (works): after drag 1, `columnSizing: {fn: 660}` and the column visibly widens. All columns are still visible (7.0s).
- After drag 2: `{fn: 1160}`, and the table overflows to the right (9.0s).
- After drag 3: `{fn: 1261}`, while First Name appears capped at the viewport edge (11.0s).
- Banner: "3x rightward drags done, columnSizing >> visual width" (13.0s).
- Leftward drag: `{fn: 1239}` (14.6s), then `{fn: 661}` (17.0s).
- Banner: "600 px leftward drag, column width unchanged (dead-zone)" (19.0s).
- `{fn: 661}` persists (21.0s).
### First bad moment
11.0s: stored size (1261) keeps growing while the visible width stays capped at the viewport edge.
### Suggested area
Column sizing / resize handler in table-core. Size deltas seem to keep accumulating, or are not clamped, once the pointer passes the visible edge. The surplus then absorbs part of the next leftward drag.
*Recorded with SceneRecap.*Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →