Skip to content

feat: add header and body holder semantics - #1520

Open
yunfeizhu wants to merge 1 commit into
react-component:masterfrom
yunfeizhu:feat/scroll-holder-semantics
Open

yunfeizhu wants to merge 1 commit into
react-component:masterfrom
yunfeizhu:feat/scroll-holder-semantics

Conversation

@yunfeizhu

@yunfeizhu yunfeizhu commented Oct 14, 2026 •

Copy link
Copy Markdown

Summary

Related to ant-design/ant-design#59485. This implements the rc-table part of the proposed header.holder / body.holder API.

When scroll.y or sticky is enabled, the header and body have separate containers and content is no longer rendered. Neither container currently accepts semantic classes or styles.

  • Apply header.holder to the outer fixed/sticky header container.
  • Apply body.holder to the body scroll container, including the virtual-list holder and the empty-data fallback.
  • Merge holder styles after internal styles, consistent with the existing content slot.
  • Keep content, header.wrapper, body.wrapper, and fixed summary behavior unchanged.
  • Preserve custom virtual body wrappers, forwarded refs, scroll callbacks, and the existing DOM structure.

The virtual holder uses the virtual list's existing component extension point; no virtual-list API or dependency change is needed.

Example

<Table
  columns={columns}
  data={data}
  scroll={{ x: 600, y: 300 }}
  classNames={{
    header: { holder: 'custom-header-holder' },
    body: { holder: 'custom-body-holder' },
  }}
  styles={{
    body: { holder: { overscrollBehavior: 'contain' } },
  }}
/>

The same holder keys work with VirtualTable, with or without rows.

Verification

  • Full rc-table suite: 21 files, 242 tests passed.
  • Six new regression cases fail on the unchanged base and pass with this change. Coverage includes fixed/sticky headers, virtual and empty bodies, custom prefixes, runtime updates, style overrides, custom wrappers, refs, scroll events, and summary isolation.
  • TypeScript, compilation, formatting, and git diff --check passed.
  • ESLint: zero errors; the same 23 warnings also occur on the unchanged base.
  • Local Ant Design integration using a locally packed rc-table build: 479 Table tests passed, 17 skipped, and 169 snapshots passed. This is local integration evidence, not a published package.
  • Chrome checks at desktop and narrow widths covered normal/fixed/sticky/virtual layouts, empty-data transitions, keyboard controls, horizontal header/body scroll synchronization, virtual wheel scrolling, and theme changes.

Follow-up

Ant Design will need its holder types, semantic demo/docs, and dependency version updated after this lands and is released. This PR deliberately leaves fixed summary semantics out of scope and does not close the Ant Design issue by itself.

Summary by CodeRabbit

  • 新功能
    • 表格滚动容器现可配置语义类名和样式,适用于普通表格及虚拟表格。
    • 固定表头模式下,可分别为表头和表格主体的滚动容器设置类名与样式。

@vercel

vercel Bot commented Oct 14, 2026

Copy link
Copy Markdown

@yunfeizhu 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 Oct 14, 2026 •

Copy link
Copy Markdown
Contributor

Review in 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: ed756bae-be94-43b3-b8ce-ed9df370ef08
📥 Commits

Reviewing files that changed from the base of the PR and between e63fbf5 and 18226d5.

📒 Files selected for processing: 4
  • src/Table.tsx
  • src/VirtualTable/BodyGrid.tsx
  • src/VirtualTable/BodyHolder.tsx
  • tests/semantic.spec.tsx

Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 3 remain after this review.

Walkthrough

表格语义配置新增 holder。普通表格在 sticky 模式下为表头和主体应用 holder 类名与样式。虚拟表格改用 BodyHolder,以传递 holder 属性并保留自定义 body wrapper。

Changes

Holder 语义支持

Layer / File(s) Summary
普通表格的 sticky holder 语义
src/Table.tsx, tests/semantic.spec.tsx
ComponentsSemantic 新增 holder。sticky 模式下,表头和主体容器应用对应的 holder 类名与样式。测试覆盖空数据、属性更新、summary 行,以及 content 与 holder 的语义区分。
虚拟表格的 BodyHolder
src/VirtualTable/BodyHolder.tsx, src/VirtualTable/BodyGrid.tsx, tests/semantic.spec.tsx
虚拟列表改用 BodyHolder。该组件读取上下文中的 holder 属性和 body wrapper 配置,合并类名与样式并转发 ref。测试验证自定义 wrapper 接收 holder 属性,且其滚动事件调用 onScroll。

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~12 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant BodyGrid
  participant BodyHolder
  participant TableContext
  participant StaticContext
  participant BodyWrapper
  BodyGrid->>BodyHolder: 将 BodyHolder 用作虚拟列表组件
  BodyHolder->>TableContext: 读取 holder 类名和样式
  BodyHolder->>StaticContext: 读取 body wrapper 配置
  BodyHolder->>BodyWrapper: 传递合并后的类名、样式和 ref
  BodyWrapper->>BodyGrid: holder 滚动时触发 onScroll
Loading

Suggested reviewers: qdyanbing

Merge Risk: ⚪ Minimal · up to 18226

The holder semantics appear ready to merge after normal checks; no actionable issue was identified.

Pre-merge checks: Passed 5
Passed Passed checks: 5 passed
Check name Status Explanation
Description Check Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check Passed 标题准确概括了本次变更:为表头和表体增加 holder 语义。标题简洁、明确,并与主要代码和测试变更一致。
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 4…
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: 💡
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Warning

Some tools did not complete. Review the errors below.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install timed out. The project may have too many dependencies for the sandbox.

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

小兔沿着表格边,
轻轻检查 holder 的边。
类名样式排整齐,
虚拟滚动接住 ref。
旧节点仍在原处,
新属性随风更新。

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

This branch has not been deployed

No deployments
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