Skip to content

fix: keep trailing scrollbar col in header colgroup when data is empty - #1515

Open
Soumya95 wants to merge 2 commits into
react-component:masterfrom
Soumya95:fix/header-scrollbar-colgroup
Open

Soumya95 wants to merge 2 commits into
react-component:masterfrom
Soumya95:fix/header-scrollbar-colgroup

Conversation

@Soumya95

@Soumya95 Soumya95 commented Sep 14, 2026

Copy link
Copy Markdown

Problem

When scroll.y is enabled, FixedHolder renders a trailing scrollbar <th> in the header, and the body scroll container reserves ~15px for the native vertical scrollbar. But the header <colgroup> did not consistently include the matching trailing <col>:

  • When data was empty (noData), or when no measured widths existed, FixedHolder fell back to rendering bodyColGroup — a <ColGroup> built from declared widths only, without the scrollbar column.
  • Since ColGroup skips trailing columns that carry no width/attrs, that path could even render no <colgroup> at all.

Net effect: the header's scrollbar <th> had no corresponding <col>, so under table-layout: fixed the header cells shrank / diverged from the body cells → misaligned header vs. body with scroll.y, plus a visible "jump" when the first data rows arrived (empty vs. filled data rendered different colgroups).

Fix

src/FixedHolder/index.tsx now always renders the inline <ColGroup> and always appends the scrollbar column width:

  • uses measured widths when any are available, otherwise falls back to the declared widths from flattenColumns, and
  • always appends combinationScrollBarSize as the trailing placeholder.

This makes the empty-data and filled-data renderings identical (stable, non-jumping header) and guarantees every header cell — including the trailing rc-table-cell-scrollbar <th> — has a matching <col>.

noData / colGroup props (used only to feed the old fallback) were removed from Table.tsx.

Tests

  • tests/Scroll.spec.jsx: new regression tests asserting
    • empty data still renders columns.length + 1 header cols with a trailing 15px scrollbar col, and
    • the header colgroup is serialized identically for empty vs. filled data.
  • Snapshots regenerated for the changed header colgroup output (FixedColumn.spec.tsx, Table.spec.jsx).

Full suite: 238/238 tests pass; tsc --noEmit clean.

Summary by CodeRabbit

  • Bug 修复

    • 修复固定表头和固定列在空数据或数据加载过程中列宽不稳定的问题。
    • 确保表头始终保留滚动条占位列,避免数据加载后出现列宽跳变。
    • 无法获取测量宽度时,自动回退使用列配置中的宽度。
  • 测试

    • 增加空数据与有数据场景下表头列组及列宽一致性的验证。

@vercel

vercel Bot commented Sep 14, 2026

Copy link
Copy Markdown

@Soumya95 is attempting to deploy a commit to the afc163's projects Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Sep 14, 2026

Copy link
Copy Markdown
Contributor

Review Change StackReview Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 860b7ce0-dc42-48d8-bd4a-fd3fe3441434

📥 Commits

Reviewing files that changed from the base of the PR and between 02badc3 and a96262e.

📒 Files selected for processing (1)
  • tests/Scroll.spec.jsx

Included review availability: Your plan provides up to 4 included reviews per hour; 2 remain after this review.


Walkthrough

固定表头不再接收 noDatacolGroup。组件始终生成 ColGroup,优先使用测量宽度,否则使用列声明的 width,并保留滚动条占位列。测试覆盖空数据和有数据状态下的列宽一致性。

Changes

固定表头宽度处理

Layer / File(s) Summary
固定表头列组生成
src/FixedHolder/index.tsx
FixedHeaderProps 移除 noDatacolGroup。固定表头始终渲染 ColGroup,并根据测量宽度或列声明宽度生成列宽。
表格接入与列宽测试
src/Table.tsx, tests/Scroll.spec.jsx
Table 移除已删除的固定表头参数。测试模拟单元格测量宽度,并验证空数据与有数据状态下的表头列宽和滚动条占位列一致。

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Bug fix

Merge Risk: ⚪ Minimal · up to a9626

The fixed-header column-width behavior and its empty-data and measured-width cases are covered without any identified merge-blocking risk.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 标题准确概括了在数据为空时保留表头滚动条列的主要修复内容,并明确指出了涉及的 header colgroup。
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2…
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

❤️ Share

小兔挥耳看列组,
测量宽度排成行。
空数据时不迷路,
有数据也守旧章。
滚动条列稳稳站,
表头清晰到月亮。

Comment @coderabbitai help to get the list of available commands.

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