fix(getColumnsKey): allow empty string && getColumnsKey in BodyGrid columnsWidth
column 的 key 为空字符串会导致 fixed 失效
https://table-react-component.vercel.app/demo/virtual
原因是 getColumnsKey 使用了 || 导致空字符串被忽略,并且 BodyGrid 的 columnsWidth 的 key 没有使用 getColumnsKey 会有潜在导致 key 取值不一致的问题,不过现在 flattenColumns 默认都会被填充 key 所以没有问题
Summary by CodeRabbit
发布说明
-
Bug Fixes
- 虚拟表格现在基于计算后的列键序列识别列,提高列宽计算和列映射的可靠性。
- 列键生成改为使用空值合并(nullish)判断,修复了对 undefined/null 与空字符串处理差异导致的列识别问题。
@evan-lc is attempting to deploy a commit to the React Component Team on Vercel.
A member of the Team first needs to authorize it.
[!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.
Walkthrough
将 BodyGrid 中列键的来源从直接读取列定义改为通过 getColumnsKey(flattenColumns) 计算;在 valueUtil 中将键的后备逻辑由 || 改为空值合并运算符 ??,并相应调整去重键生成行为。
Changes
| 内聚合 / 文件 | 变更说明 |
|---|---|
虚拟表格列键值处理src/VirtualTable/BodyGrid.tsx |
引入 getColumnsKey,在列宽计算中使用 columnKeys = getColumnsKey(flattenColumns) 并以 key = columnKeys[index] 替代直接取列对象的 key;将 flattenColumns 加入 useMemo 依赖 |
键值生成逻辑优化src/utils/valueUtil.tsx |
将生成列键时的回退逻辑从 `key |
Sequence Diagram(s)
(变更为局部键生成与使用,未引入新控制流或异步交互,故不提供序列图。)
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~10 分钟
- 变更集中在两个相近模块,修改模式一致且局部。
- 需额外关注:
-
getColumnsKey的 nullish 行为是否影响现有依赖(空字符串键的处理)。 - BodyGrid 中以新 key 序列替代原 key 是否与其他组件或样式绑定产生不一致。
-
Possibly related PRs
- react-component/table#1334 — 也修改了
src/VirtualTable/BodyGrid.tsx的列迭代/宽度计算逻辑,代码层面与本次变更涉及相同区域。
诗歌
🐰 我是小兔报春声,
键更分明少纷争,
空值见真不再替,
列宽安稳步趋正,
表格轻跳笑盈盈。
Pre-merge checks and finishing touches
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage | ⚠️ Warning | Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. | You can run @coderabbitai generate docstrings to improve docstring coverage. |
✅ Passed checks (2 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | 标题清晰准确地总结了PR的主要变更:修复getColumnsKey以允许空字符串,并在BodyGrid的columnsWidth中使用getColumnsKey,这与代码改动完全相符。 |
✨ Finishing touches
- [ ] 📝 Generate docstrings
🧪 Generate unit tests (beta)
- [ ] Create PR with unit tests
- [ ] Post copyable unit tests in a comment
📜 Recent review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📥 Commits
Reviewing files that changed from the base of the PR and between b31ea4154f89c701ad1d00454b22b965a47c73cd and 309e3cb0988008ce7351405fa787e3d5fbea42ac.
📒 Files selected for processing (1)
-
src/utils/valueUtil.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/utils/valueUtil.tsx
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.
Comment @coderabbitai help to get the list of available commands and usage tips.
Summary of Changes
Hello @evan-lc, I'm Gemini Code Assist[^1]! 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 where using an empty string as a column key in the table component would cause the fixed column functionality to fail. The primary fix involves updating the key generation logic to correctly recognize and utilize empty strings as valid keys. Additionally, it standardizes the key generation process within the BodyGrid component to prevent future inconsistencies.
Highlights
-
Fix empty string column key issue: The
getColumnsKeyutility now correctly handles empty strings as valid column keys by switching from the logical OR (||) operator to the nullish coalescing operator (??). Previously, an empty string key would be ignored, leading tofixedcolumn issues. -
Consistent column key generation in BodyGrid: The
BodyGridcomponent now explicitly uses thegetColumnsKeyutility to generate keys forcolumnsWidth. This ensures consistency in key generation across the table component, preventing potential discrepancies.
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 by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.
| 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 pull request 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 :thumbsup: and :thumbsdown: 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.
[^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.
Codecov Report
:white_check_mark: All modified and coverable lines are covered by tests.
:white_check_mark: Project coverage is 96.10%. Comparing base (c8d2df1) to head (309e3cb).
Additional details and impacted files
@@ Coverage Diff @@
## master #1408 +/- ##
=======================================
Coverage 96.09% 96.10%
=======================================
Files 57 57
Lines 3434 3437 +3
Branches 632 632
=======================================
+ Hits 3300 3303 +3
Misses 129 129
Partials 5 5
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
:rocket: New features to boost your workflow:
- :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
- :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.