table icon indicating copy to clipboard operation
table copied to clipboard

feat: support rowspan expanded

Open crazyair opened this issue 9 months ago • 3 comments

Summary by CodeRabbit

  • 新功能
    • 新增了“expandedRowSpan”演示页面,展示表格行合并与可展开行的用法示例。
    • 新增了“expandedSticky”演示页面,展示带有粘性列和可展开行的表格示例。
  • 文档
    • 增加了“expandedRowSpan.md”和“expandedSticky.md”文档,包含相关代码演示。
  • 修复
    • 优化了表格在行合并与行展开同时使用时的表现,确保合并单元格能正确适应展开行。
    • 调整展开行宽度计算,提升展开内容显示的准确性。

crazyair avatar May 21 '25 06:05 crazyair

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

vercel[bot] avatar May 21 '25 06:05 vercel[bot]

"""

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 也涉及 BodyRowrowKeys 属性调整,虽然关注点不同,但在组件接口层面相关。

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.

❤️ Share
🪧 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 @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in 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 pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file 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.

coderabbitai[bot] avatar May 21 '25 06:05 coderabbitai[bot]

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.

codecov[bot] avatar May 21 '25 12:05 codecov[bot]