feat: support rowspan expanded
Summary by CodeRabbit
-
新功能
- 新增了“expandedRowSpan”演示页面,展示表格行合并与可展开行的用法示例。
- 新增了“expandedSticky”演示页面,展示带有粘性列和可展开行的表格示例。
-
文档
- 增加了“expandedRowSpan.md”和“expandedSticky.md”文档,包含相关代码演示。
-
修复
- 优化了表格在行合并与行展开同时使用时的表现,确保合并单元格能正确适应展开行。
- 调整展开行宽度计算,提升展开内容显示的准确性。
The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Comments | Updated (UTC) |
|---|---|---|---|---|
| table | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | May 24, 2025 2:39am |
"""
Walkthrough
此次更改引入了一个新的“expandedRowSpan”演示文档及相关 React 代码示例,展示了带有可展开行和自定义行合并(rowSpan)功能的表格。同时,核心表格组件逻辑被增强,以支持在行展开时动态调整单元格的 rowSpan 属性,并在数据结构中显式维护 rowKey。
Changes
| 文件路径分组 | 变更摘要 |
|---|---|
| docs/demo/expandedRowSpan.md | 新增文档页面“expandedRowSpan”,配置导航元数据,并嵌入了代码示例。 |
| docs/examples/expandedRowSpan.tsx | 新增 React 代码示例,演示 rc-table 结合可展开行与自定义 rowSpan 的用法,包含列定义、动态 rowSpan 逻辑、可展开行渲染及样式引入。导出默认组件 Demo。 |
| docs/demo/expandedSticky.md | 新增文档页面“expandedSticky”,配置导航元数据,并嵌入了对应的代码示例。 |
| docs/examples/expandedSticky.tsx | 新增 React 代码示例,演示带有可展开行和固定列(sticky)的表格,包含列定义、展开行状态管理及渲染。导出默认组件 Demo。 |
| src/Body/BodyRow.tsx | BodyRowProps 接口新增 rowKeys 属性,getCellProps 函数和 BodyRow 组件均支持 rowKeys。getCellProps 内部根据 expandedKeys 动态调整 rowSpan,确保单元格在行展开时正确合并。渲染时改用 memoized 的列数据,提升效率。 |
| src/Body/index.tsx | 重构数据处理逻辑:通过 useFlattenRecords 生成的 flattenData 提取 rowKey 数组 rowKeys。渲染 BodyRow 时传递 rowKey 及 rowKeys,简化 key 处理。 |
| src/hooks/useFlattenRecords.ts | FlattenData 接口及相关数据结构新增 rowKey 属性,确保每个扁平化数据项都显式携带其唯一 key。 |
| src/VirtualTable/VirtualCell.tsx | VirtualCell 组件调用 getCellProps 时增加空数组参数,未影响其他逻辑。 |
| src/Body/ExpandedRow.tsx | ExpandedRowProps 接口新增可选属性 offsetWidth。ExpandedRow 组件中调整宽度计算,减去 offsetWidth 以适配额外的水平偏移。 |
| src/Table.tsx | Table 组件中将 classNames 和 styles 加入 TableContextValue 的依赖数组,确保上下文更新。 |
| src/context/TableContext.tsx | 将 TableProps 改为类型导入,明确仅用于类型注解,无运行时影响。 |
| src/Panel/index.tsx | Panel 组件的 JSX 返回格式由单行改为多行,功能无变更。 |
| tests/Expanded.spec.tsx | 新增测试套件验证表格展开行与 rowSpan 结合的渲染行为,模拟 DOM 属性,断言单元格的 rowSpan 和 colSpan 正确应用。 |
Sequence Diagram(s)
sequenceDiagram
participant User
participant DemoPage
participant DemoComponent
participant Table
participant BodyRow
User->>DemoPage: 访问 expandedRowSpan 演示页
DemoPage->>DemoComponent: 渲染 Demo 组件
DemoComponent->>Table: 渲染带有 columns/data/expandable 的表格
Table->>BodyRow: 传递 rowKeys, rowKey, columns, expandedKeys 等
BodyRow->>getCellProps: 计算每个单元格的 rowSpan(考虑展开行)
getCellProps-->>BodyRow: 返回调整后的单元格属性
BodyRow-->>Table: 渲染行
Table-->>DemoComponent: 渲染完整表格
Possibly related PRs
- react-component/table#1210: 该 PR 也涉及
BodyRow的rowKeys属性调整,虽然关注点不同,但在组件接口层面相关。
Suggested reviewers
- zombieJ
- afc163
Poem
兔子跳跃新功能,
表格行合并真灵活。
展开收起随心意,
rowKey 明确不迷离。
文档示例齐上阵,
代码世界更精彩!
🐇✨ """
[!WARNING] There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.
🔧 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.
tests/Expanded.spec.tsx
Oops! Something went wrong! :(
ESLint: 8.57.1
ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct.
The config "prettier" was referenced from the config file in "/.eslintrc.js".
If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.
[!NOTE]
⚡️ AI Code Reviews for VS Code, Cursor, Windsurf
CodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Learn more here.
📜 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 fa2517419ea43b7340f6a7f50a928e097e33469e and dc67020a4b6773a8df856f14ecd7d7b7672cafc9.
📒 Files selected for processing (1)
-
tests/Expanded.spec.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- tests/Expanded.spec.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test / react component workflow
✨ Finishing Touches
- [ ] 📝 Generate Docstrings
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.
🪧 Tips
Chat
There are 3 ways to chat with CodeRabbit:
- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
-
I pushed a fix in commit <commit_id>, please review it. -
Explain this complex logic. -
Open a follow-up GitHub issue for this discussion.
-
- Files and specific lines of code (under the "Files changed" tab): Tag
@coderabbitaiin a new review comment at the desired location with your query. Examples:-
@coderabbitai explain this code block. -
@coderabbitai modularize this function.
-
- PR comments: Tag
@coderabbitaiin a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:-
@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase. -
@coderabbitai read src/utils.ts and explain its main purpose. -
@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format. -
@coderabbitai help me debug CodeRabbit configuration file.
-
Support
Need help? Create a ticket on our support page for assistance with any issues or questions.
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.
CodeRabbit Commands (Invoked using PR comments)
-
@coderabbitai pauseto pause the reviews on a PR. -
@coderabbitai resumeto resume the paused reviews. -
@coderabbitai reviewto trigger an incremental review. This is useful when automatic reviews are disabled for the repository. -
@coderabbitai full reviewto do a full review from scratch and review all the files again. -
@coderabbitai summaryto regenerate the summary of the PR. -
@coderabbitai generate docstringsto generate docstrings for this PR. -
@coderabbitai generate sequence diagramto generate a sequence diagram of the changes in this PR. -
@coderabbitai resolveresolve all the CodeRabbit review comments. -
@coderabbitai configurationto show the current CodeRabbit configuration for the repository. -
@coderabbitai helpto get help.
Other keywords and placeholders
- Add
@coderabbitai ignoreanywhere in the PR description to prevent this PR from being reviewed. - Add
@coderabbitai summaryto generate the high-level summary at a specific location in the PR description. - Add
@coderabbitaianywhere in the PR title to generate the title automatically.
CodeRabbit Configuration File (.coderabbit.yaml)
- You can programmatically configure CodeRabbit by adding a
.coderabbit.yamlfile to the root of your repository. - Please see the configuration documentation for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation:
# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json
Documentation and Community
- Visit our Documentation for detailed information on how to use CodeRabbit.
- Join our Discord Community to get help, request features, and share feedback.
- Follow us on X/Twitter for updates and announcements.
Codecov Report
All modified and coverable lines are covered by tests :white_check_mark:
Project coverage is 98.12%. Comparing base (
d696f75) to head (dc67020).
Additional details and impacted files
@@ Coverage Diff @@
## master #1278 +/- ##
==========================================
+ Coverage 98.08% 98.12% +0.03%
==========================================
Files 77 78 +1
Lines 7609 7771 +162
Branches 1164 1194 +30
==========================================
+ Hits 7463 7625 +162
Misses 140 140
Partials 6 6
: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.