fix: Table columns minWidth props no work when virtualized #1334
Conversation
Walkthrough在虚拟表格的 BodyGrid 中重写列宽计算逻辑：引入 minWidth 与 width 的对比，使用最大值作为最终列宽，累计总宽并在下游（如 onColumnResize）消费该最终宽度，避免缺失 width 时出现 NaN。 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as 用户
participant VT as BodyGrid
participant C as 列定义
participant R as 渲染层
U->>VT: 触发布局/滚动/尺寸变更
VT->>C: 读取列的 width 与 minWidth
C-->>VT: 返回 { key, width, minWidth }
rect rgba(200,230,255,0.2)
note right of VT: 新逻辑
VT->>VT: finalWidth = max(width||0, minWidth||0)
VT->>VT: total += finalWidth
end
VT->>R: 传递 { key, finalWidth, total }
R-->>U: 根据 finalWidth 渲染单元格与布局
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 分钟 Assessment against linked issues
Assessment against linked issues: Out-of-scope changes（无） Poem
✨ Finishing Touches
🧪 Generate 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @cactuser-Lu, 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 resolves a long-standing bug affecting virtualized tables where the minWidth property for columns was not being respected. The change ensures that table columns correctly adhere to their minimum width constraints, improving the visual consistency and layout of virtualized tables.
Highlights
- Bug Fix: Addresses an issue where the
minWidthproperty was not correctly applied to table columns when virtualization was enabled, leading to incorrect column sizing and display. - Column Width Calculation Improvement: Modifies the column width calculation logic within
src/VirtualTable/BodyGrid.tsxto properly account for bothwidthandminWidthproperties, ensuring that the larger of the two values is used as the final column width.
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
-
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. ↩
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Code Review
This pull request addresses a bug where the minWidth property on columns was not being respected in virtualized tables. The change correctly calculates the final column width by taking the maximum of width and minWidth. My feedback includes a suggestion to improve code clarity by removing unnecessary type assertions.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/VirtualTable/BodyGrid.tsx (1)
60-63: 用显式数值校验替代类型断言，避免 Math.max 接收到 NaN/字符串当前写法依赖
(width as number)与(minWidth as number)的类型断言。若外部误传入了非 number（例如运行态为字符串或NaN），Math.max会产生NaN并重新引入累计宽度异常。建议在计算前做“有限且非负”的数值归一化，降低隐性回归风险。可在当前位置内联收敛到有限非负数：
- return flattenColumns.map(({ width, minWidth, key }) => { - const finalWidth = Math.max((width as number) || 0, (minWidth as number) || 0); + return flattenColumns.map(({ width, minWidth, key }) => { + const w = typeof width === 'number' && Number.isFinite(width) ? Math.max(width, 0) : 0; + const mw = typeof minWidth === 'number' && Number.isFinite(minWidth) ? Math.max(minWidth, 0) : 0; + const finalWidth = Math.max(w, mw); total += finalWidth; return [key, finalWidth, total]; });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
src/VirtualTable/BodyGrid.tsx(1 hunks)
🔇 Additional comments (1)
src/VirtualTable/BodyGrid.tsx (1)
60-63: 方向正确：在虚拟化 Body 中同时约束列宽与最小宽度，能修复 minWidth 只在表头生效的问题
- 使用
finalWidth = Math.max(width, minWidth)并对缺省值回落到 0，有效避免了total累加为NaN的老问题；同时确保 Body 单元格与表头在窄屏下遵守相同的最小宽度约束，契合 PR 目标（#54856）。
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #1334 +/- ##
==========================================
- Coverage 96.18% 96.07% -0.11%
==========================================
Files 57 57
Lines 3408 3417 +9
Branches 620 622 +2
==========================================
+ Hits 3278 3283 +5
- Misses 125 129 +4
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
2 participants
fix: ant-design/ant-design#54856
Summary by CodeRabbit