fix: pass classNames.body.cell to VirtualCell in virtual mode#1487
fix: pass classNames.body.cell to VirtualCell in virtual mode#1487afc163 merged 3 commits intoreact-component:masterfrom
Conversation
In non-virtual mode, Body/index.tsx extracts classNames from TableContext and passes classNames.body to BodyRow, which then applies classNames.cell to each Cell. However, VirtualTable/BodyLine.tsx does not read classNames from TableContext, so VirtualCell never receives the body cell className. This causes custom cell classNames (e.g. from antd's Table wrapper like itp-design) to be missing on cells rendered in virtual scroll mode.
|
@gavanx is attempting to deploy a commit to the React Component Team on Vercel. A member of the Team first needs to authorize it. |
|
ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
WalkthroughBodyLine 从 TableContext 解构出 变更详情虚拟表格体单元格样式配置
预估代码审查工作量🎯 2 (Simple) | ⏱️ ~8 minutes 可能相关的 PR
推荐审查人
走查说明BodyLine 组件从 TableContext 中解构出 诗歌
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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 |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates BodyLine.tsx to extract classNames from TableContext and apply them to the VirtualCell component. The feedback suggests also extracting and applying styles from the context for consistency. Furthermore, the reviewer identified that several required props for VirtualCell, such as colIndex, indent, and record, are currently missing and should be passed down to ensure correct rendering and property calculations.
| className={classNames?.body?.cell} | ||
| component={cellComponent} | ||
| rowInfo={rowInfo} | ||
| column={column} |
There was a problem hiding this comment.
While adding className, you should also pass style from styles.body.cell for consistency.
Additionally, it appears that several required props for VirtualCell (colIndex, indent, index, renderIndex, and record) are currently missing in this instantiation. These props are necessary for VirtualCell to correctly calculate cell properties (like fixed column offsets) and render data. Since they are available in the scope of BodyLine, they should be passed down.
| className={classNames?.body?.cell} | |
| component={cellComponent} | |
| rowInfo={rowInfo} | |
| column={column} | |
| className={classNames?.body?.cell} | |
| style={styles?.body?.cell} | |
| component={cellComponent} | |
| rowInfo={rowInfo} | |
| column={column} | |
| colIndex={colIndex} | |
| indent={indent} | |
| index={index} | |
| renderIndex={renderIndex} | |
| record={record} |
| const { scrollX, flattenColumns, prefixCls, fixColumn, componentWidth, classNames } = useContext( | ||
| TableContext, | ||
| ['prefixCls', 'flattenColumns', 'fixColumn', 'componentWidth', 'scrollX'], | ||
| ['prefixCls', 'flattenColumns', 'fixColumn', 'componentWidth', 'scrollX', 'classNames'], |
There was a problem hiding this comment.
For consistency with the classNames fix, you should also extract styles from TableContext. This ensures that custom styles defined in the styles prop of the Table are also correctly applied to cells in virtual mode.
| const { scrollX, flattenColumns, prefixCls, fixColumn, componentWidth, classNames } = useContext( | |
| TableContext, | |
| ['prefixCls', 'flattenColumns', 'fixColumn', 'componentWidth', 'scrollX'], | |
| ['prefixCls', 'flattenColumns', 'fixColumn', 'componentWidth', 'scrollX', 'classNames'], | |
| const { scrollX, flattenColumns, prefixCls, fixColumn, componentWidth, classNames, styles } = useContext( | |
| TableContext, | |
| ['prefixCls', 'flattenColumns', 'fixColumn', 'componentWidth', 'scrollX', 'classNames', 'styles'], | |
| ); |
VirtualTable's BodyLine only forwarded classNames.body.cell but missed styles.body.cell, causing style customizations via the styles prop to be ignored in virtual mode while working in non-virtual mode.
…virtual mode BodyLine's RowComponent was missing classNames.body.row and styles.body.row, causing row-level customizations to be ignored in virtual mode while working in non-virtual BodyRow. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #1487 +/- ##
=======================================
Coverage 96.11% 96.12%
=======================================
Files 57 57
Lines 3448 3456 +8
Branches 635 639 +4
=======================================
+ Hits 3314 3322 +8
Misses 129 129
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
2 participants
In non-virtual mode, Body/index.tsx extracts classNames from TableContext and passes classNames.body to BodyRow, which then applies classNames.cell to each Cell. However, VirtualTable/BodyLine.tsx does not read classNames from TableContext, so VirtualCell never receives the body cell className.
This causes custom cell classNames (e.g. from antd's Table wrapper like itp-design) to be missing on cells rendered in virtual scroll mode.
non-virtual
virtual
Summary by CodeRabbit
发布说明