Skip to content

Conversation

@afc163
Copy link
Member

@afc163 afc163 commented Sep 6, 2025

ant-design/ant-design#54906

Summary by CodeRabbit

  • 新功能
    • 新增 measureRowRender,可自定义测量行的包装与渲染(并通过上下文可用)。
    • 固定表头支持 scrollX 配置,优化横向滚动布局,替代此前样式控制方式。
  • Bug 修复
    • 虚拟表格列宽遵循 minWidth,避免列过窄。
    • 无列时不再渲染空的 colgroup,减少无效 DOM。
  • 文档
    • 新增示例:measureRowRender 用法、sticky 与横向滚动、scrollY 对齐问题。
  • 样式
    • 表格单元格不再强制断词,长词换行依赖空白符。
  • 测试
    • 增加 measureRowRender 相关用例。
  • 维护
    • 版本更新至 7.52.7。

@vercel
Copy link

vercel bot commented Sep 6, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
table Ready Ready Preview Comment Sep 6, 2025 4:23pm

@coderabbitai
Copy link

coderabbitai bot commented Sep 6, 2025

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

本次变更新增 Table 的 measureRowRender 扩展点并通过上下文传递,调整 FixedHolder 采用 scrollX 控制宽度,VirtualTable 列宽计算加入 minWidth,ColGroup 在无列时不渲染,文档示例新增/扩充相关用例,样式移除表格单元的 word-break,版本号升至 7.52.7,并补充相应测试。

Changes

Cohort / File(s) Change Summary
样式调整
assets/index.less
去除 th, tdword-break: break-word 规则。
文档与示例
docs/examples/measureRowRender.tsx, docs/examples/scrollY.tsx, docs/examples/stickyHeader.tsx
新增 measureRowRender 示例;在 scrollY 示例中加入 sticky + 水平滚动用例;stickyHeader 示例新增多列场景与数据填充,新增 scroll: { x: true } 展示。
测量行可自定义渲染(核心改动)
src/Table.tsx, src/context/TableContext.tsx, src/Body/MeasureRow.tsx, tests/FixedHeader.spec.jsx
新增 measureRowRender?: (measureRow: React.ReactNode) => React.ReactNode 至 Table props 与上下文;MeasureRow 读取上下文并允许包装渲染;测试覆盖自定义包装逻辑。
固定表头宽度控制
src/FixedHolder/index.tsx, src/Table.tsx
scrollTableStyle 替换为 `scrollX: number
列组渲染优化
src/ColGroup.tsx
当无列(cols.length <= 0)时返回 null,避免多余 colgroup
虚拟表格列宽计算
src/VirtualTable/BodyGrid.tsx
列宽计算考虑 minWidth,采用 max(width, minWidth) 计入总宽与回调。
版本号
package.json
版本从 7.52.5 升至 7.52.7

Sequence Diagram(s)

sequenceDiagram
  participant App as App
  participant Table as Table
  participant Ctx as TableContext
  participant FH as FixedHolder
  participant MR as MeasureRow

  App->>Table: render({ measureRowRender, scroll })
  Table->>Ctx: provide { measureRowRender, mergedScrollX }
  Table->>FH: render({ scrollX: mergedScrollX, ... })
  FH->>MR: render()
  MR->>Ctx: useContext()
  alt measureRowRender provided
    MR->>MR: build default <tr class="rc-table-measure-row" tabIndex=-1>
    MR-->>App: return measureRowRender(measureRow)
  else
    MR-->>App: return default measureRow
  end
Loading
sequenceDiagram
  participant Table as Table
  participant FH as FixedHolder (Header)
  Note over Table,FH: 水平尺寸控制改为 scrollX
  Table->>FH: props { scrollX }
  FH->>FH: header table style { minWidth: '100%', width: scrollX }
  FH-->>Table: header rendered with width constraint
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested reviewers

  • zombieJ
  • MadCcc

Poem

我是小兔写新篇,跳上表格量行间。
轻拢薄云包一层,measureRow 任我旋。
横向 scrollX 护宽面,minWidth 悄然添。
版本轻跃七五七,咔哒一声更周全。 🐇✨

✨ Finishing Touches
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/add-measureRowRender-prop

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 and usage tips.

@afc163 afc163 changed the base branch from master to antd-5.x September 6, 2025 16:12
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Summary of Changes

Hello @afc163, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses a critical bug affecting table column minWidth in virtualized environments, ensuring that columns correctly respect their minimum width constraints. It also introduces a new API for customizing the internal row used for measurement, providing greater flexibility for complex table setups. The changes enhance the robustness and configurability of the table component, particularly for scenarios involving dynamic content and scrolling.

Highlights

  • Table Column minWidth Fix: Resolved an issue where minWidth properties for table columns were not correctly applied in virtualized tables, ensuring proper column sizing.
  • New measureRowRender Prop: Introduced a new measureRowRender prop to the Table component, allowing custom rendering of the internal measure row. This enables advanced use cases like hiding popups within the measure row.
  • Improved Table Layout and Styling: Adjusted table styling for scroll.x to better handle minWidth and width properties, and removed word-break: break-word from table cells in the base stylesheet.
  • Documentation and Test Updates: Added new examples and updated existing ones to demonstrate the measureRowRender functionality and to test various table scrolling and column alignment scenarios, along with corresponding snapshot updates.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in issue comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

@afc163 afc163 changed the title fix: Table columns minWidth props no work when virtualized (for 5.x) feat: add measureRowRender prop Sep 6, 2025
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a new internal prop measureRowRender to allow wrapping the MeasureRow component. This is a clever solution to fix an issue where minWidth on columns doesn't work with virtualized tables, by allowing a ConfigProvider to control where popups (like filters) are rendered. The changes are well-contained, and the new example and test case are helpful. I have two suggestions: one to prevent a potential memory leak in the new example, and another to address a minor accessibility concern.

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
@codecov
Copy link

codecov bot commented Sep 6, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.76%. Comparing base (8c37e7f) to head (c97beea).
⚠️ Report is 1 commits behind head on antd-5.x.

Additional details and impacted files
@@             Coverage Diff              @@
##           antd-5.x    #1347      +/-   ##
============================================
+ Coverage     97.75%   97.76%   +0.01%     
============================================
  Files            77       77              
  Lines          7660     7707      +47     
  Branches       1162     1167       +5     
============================================
+ Hits           7488     7535      +47     
  Misses          166      166              
  Partials          6        6              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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.

2 participants