fix(table): subtract header height from filled body so the last row isn't clipped#576
Merged
Merged
Conversation
…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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
When a
<ReqoreTable>usesfill, the virtualized body is sized to the full measured container height (sizes.height). But the column/filter header sits above the body inside the sameStyledTableWrapper, 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
filltable, and is more visible withfilterable(the filter row makes the header taller).Root cause (measured)
In
Table/index.tsxthe body height was:sizes.heightis 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:
wrapperHeight − headerHeight→ overflow 0, body scrolls internally as intended.Fix
Measure the header height with a
ResizeObserverand subtract it from the filled body height:The observer keeps
headerHeightcorrect when the filter row appears/disappears or the header wraps, and only runs whilefillis on. No behaviour change whenfillis off.Verification
yarn lint— cleanyarn test __tests__/table.test.tsx— 18/18 passyarn build(prod tsc) — compilesPatch version bumped to 0.70.2.
🤖 Generated with Claude Code