Skip to content

fix(table): subtract header height from filled body so the last row isn't clipped#576

Merged
Foxhoundn merged 1 commit into
developfrom
bugfix/table-fill-header-clip
Jun 26, 2026
Merged

fix(table): subtract header height from filled body so the last row isn't clipped#576
Foxhoundn merged 1 commit into
developfrom
bugfix/table-fill-header-clip

Conversation

@Foxhoundn

Copy link
Copy Markdown
Member

Problem

When a <ReqoreTable> uses fill, the virtualized body is sized to the full measured container height (sizes.height). But the column/filter header sits above the body inside the same StyledTableWrapper, so the body overflows the wrapper by exactly the header's height. The result: the table's last row(s) are clipped under the wrapper edge — reachable only by scrolling them back into view, which reads as "the table has ~20px hidden under its wrapper."

This affects any fill table, and is more visible with filterable (the filter row makes the header taller).

Root cause (measured)

In Table/index.tsx the body height was:

height={fill ? sizes.height : height}

sizes.height is the whole content area (header + body), so the body got the full height with no room left for the header.

DOM measurements on a filled, overflowing table:

  • body list bottom sat +70px past the wrapper bottom → last row not visible.
  • forcing the list height to wrapperHeight − headerHeight → overflow 0, body scrolls internally as intended.

Fix

Measure the header height with a ResizeObserver and subtract it from the filled body height:

height={fill ? Math.max(0, sizes.height - headerHeight) : height}

The observer keeps headerHeight correct when the filter row appears/disappears or the header wraps, and only runs while fill is on. No behaviour change when fill is off.

Verification

  • yarn lint — clean
  • yarn test __tests__/table.test.tsx — 18/18 pass
  • yarn build (prod tsc) — compiles
  • Verified in the browser: with the corrected height the body no longer overflows its wrapper (70px → 0) and overflow rows are reached via the body's internal scroll.

Patch version bumped to 0.70.2.

🤖 Generated with Claude Code

…sn't clipped

When `<ReqoreTable fill>` is used, the virtualized body was sized to the full
measured container height (`sizes.height`) while the column/filter header sits
above it inside the same wrapper. The body therefore overflowed the wrapper by
the header's height, and its last rows were clipped — visible only by scrolling
them out from under the wrapper edge.

Measure the header height with a ResizeObserver and subtract it from the body
height when `fill` is set: `height = max(0, sizes.height - headerHeight)`. The
observer keeps it correct when the filter row appears/disappears or the header
wraps. No effect when `fill` is off.

Bumps the patch version to 0.70.2.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@Foxhoundn Foxhoundn merged commit 499d104 into develop Jun 26, 2026
5 checks passed
@Foxhoundn Foxhoundn deleted the bugfix/table-fill-header-clip branch June 26, 2026 11:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant