fix expanded & sticky 2

[crazyair]

Summary by CodeRabbit

• 新功能

  • 新增“expandedSticky”演示文档及示例，展示可展开并支持粘性表头的表格用法。

• 文档

  • 新增 expandedSticky.md，包含相关代码示例。
  • 简化 className.tsx 和 components.tsx 示例，移除多余的表格和样式类名演示。

• 重构

  • 移除所有 classNames 和 styles 属性及其相关用法，简化表格组件的样式接口。
  • 扩展表格可展开配置，支持 expandedRowOffset 属性以自定义展开行的偏移量。

• 样式

  • 组件仅保留必要的 className，移除内联样式支持，统一样式处理方式。

[vercel]

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 4:58am

[coderabbitai]

Walkthrough

本次更改全面移除了表格组件及其子组件对 classNames 和 styles 属性的支持，包括类型定义、上下文传递及所有相关用法。同时，增加了 expandedRowOffset 属性以支持可展开行的偏移配置。文档和示例也做了相应调整，并新增了 sticky 展开行的演示页面。

Changes

文件/分组	变更摘要
docs/demo/expandedSticky.md docs/examples/expandedSticky.tsx	新增 sticky 展开行演示文档与示例组件
docs/examples/className.tsx docs/examples/components.tsx	移除 Table 组件的 classNames、title、footer 及滚动示例，简化结构
src/Table.tsx src/context/TableContext.tsx src/Body/index.tsx src/Header/Header.tsx src/Header/HeaderRow.tsx src/Body/BodyRow.tsx src/Cell/index.tsx src/Panel/index.tsx src/FixedHolder/index.tsx	移除所有 classNames 和 styles 属性及相关上下文、类型定义和用法
src/interface.ts	为 ExpandableConfig 新增可选属性 expandedRowOffset，包含 width 和 column 字段
src/Body/BodyRow.tsx src/Body/ExpandedRow.tsx src/Table.tsx src/context/TableContext.tsx	引入并传递 expandedRowOffset，用于调整展开行的偏移和宽度计算

Sequence Diagram(s)

sequenceDiagram
    participant 用户
    participant Demo组件
    participant Table
    participant ExpandedRow

    用户->>Demo组件: 展开/收起某一行
    Demo组件->>Table: 设置 expandedRowKeys
    Table->>ExpandedRow: 渲染展开行，传递 expandedRowOffset
    ExpandedRow->>ExpandedRow: 根据 offsetWidth 和 colSpan 调整布局
    ExpandedRow-->>Table: 展开行渲染完成

Loading

Possibly related PRs

• feat: support classNames and styles #1261: 该 PR 增加了对 classNames 和 styles 自定义属性的支持，本次变更则完全移除了这些特性，二者在代码层面高度相关。

Suggested reviewers

• zombieJ

Poem

🐇
代码翻新去浮华，
classNames 与 styles 说再见。
展开行偏移新加，
sticky 示例文档现。
兔子跳跃欢欣鼓，
轻装上阵更清爽！

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.

src/Body/ExpandedRow.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.

docs/examples/expandedSticky.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.

src/Body/index.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.

• 8 others

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 d696f75 and 2b894a3.

📒 Files selected for processing (15)

• docs/demo/expandedSticky.md (1 hunks)
• docs/examples/className.tsx (0 hunks)
• docs/examples/components.tsx (0 hunks)
• docs/examples/expandedSticky.tsx (1 hunks)
• src/Body/BodyRow.tsx (5 hunks)
• src/Body/ExpandedRow.tsx (3 hunks)
• src/Body/index.tsx (4 hunks)
• src/Cell/index.tsx (2 hunks)
• src/FixedHolder/index.tsx (0 hunks)
• src/Header/Header.tsx (2 hunks)
• src/Header/HeaderRow.tsx (1 hunks)
• src/Panel/index.tsx (1 hunks)
• src/Table.tsx (7 hunks)
• src/context/TableContext.tsx (2 hunks)
• src/interface.ts (1 hunks)

💤 Files with no reviewable changes (3)

• src/FixedHolder/index.tsx
• docs/examples/className.tsx
• docs/examples/components.tsx

🧰 Additional context used

🧬 Code Graph Analysis (2)

src/context/TableContext.tsx (1)

src/interface.ts (1)

• ExpandableConfig (240-260)

src/Body/BodyRow.tsx (1)

src/interface.ts (3)

• CustomizeComponent (152-152)
• Key (21-21)
• ExpandableConfig (240-260)

🔇 Additional comments (25)

src/interface.ts (1)

259-259: 新增的展开行偏移配置属性设计合理

expandedRowOffset 属性的类型定义清晰明确，包含 width 和 column 两个数值字段，能够有效支持展开行的偏移控制功能。作为可选属性设计也很合适，保持了向后兼容性。

docs/demo/expandedSticky.md (1)

1-8: 演示文档结构规范

文档的前置元数据配置正确，代码引用路径符合项目结构，为新的粘性展开行功能提供了清晰的演示入口。

src/Header/HeaderRow.tsx (1)

47-47: 简化样式管理的重构符合预期

移除外部 className 和 style 属性是整体重构的一部分，简化了组件的样式管理逻辑，使组件更专注于核心功能。这种改动与整个代码库的重构方向保持一致。

src/Body/ExpandedRow.tsx (3)

17-17: 新增的偏移宽度属性定义合理

offsetWidth 作为可选属性添加到接口中，支持展开行的偏移控制功能，类型定义清晰准确。

---

34-34: 默认值设置恰当

为 offsetWidth 设置默认值 0 是合理的选择，确保在未提供偏移值时组件行为不受影响，保持向后兼容性。

---

48-48: 宽度计算逻辑正确

修改后的宽度计算正确地将 offsetWidth 纳入考虑，计算顺序合理：componentWidth - offsetWidth - scrollbarSize。这样能够精确控制展开行的粘性定位宽度，与新的偏移功能需求完美匹配。

src/Panel/index.tsx (1)

8-9: 移除style属性的更改看起来正确

这个更改与整体重构目标一致，即移除表格组件对 style 属性的支持。TitleProps接口和Panel组件都正确地移除了style相关代码，简化了组件接口。

src/Cell/index.tsx (2)

2-2: 导入别名更改保持了一致性

将导入别名从 cls 改为 classNames 提高了代码可读性，与下面使用该函数的变量名保持一致。

---

215-215: 变量重命名与导入别名保持一致

将变量从 cls 重命名为 classNames 与导入别名变更保持一致，提高了代码的可读性和一致性。

src/context/TableContext.tsx (2)

6-6: 正确添加了ExpandableConfig导入

添加ExpandableConfig导入是为了支持新的expandedRowOffset属性类型定义，这个更改是必要且正确的。

---

56-56: expandedRowOffset属性类型定义正确

新增的expandedRowOffset属性使用了正确的类型定义 ExpandableConfig<RecordType>['expandedRowOffset']，这确保了类型安全性，并与interface.ts中定义的类型保持一致。

docs/examples/expandedSticky.tsx (1)

1-57: 优秀的演示示例，展示了新功能的正确用法

这个演示文件很好地展示了新的 expandedRowOffset 功能的使用方法：

1. 状态管理：正确使用 useState 管理展开行的状态
2. 列配置：巧妙地结合了固定列、rowSpan 逻辑和展开状态
3. 功能集成：展示了 expandedRowOffset 与 sticky 表头、横向滚动的配合使用
4. 数据结构：提供了合适的测试数据来验证功能

特别值得注意的是第45行 expandedRowOffset: { column: 1, width: 100 } 的配置，这正确地演示了新功能的API用法。

src/Body/index.tsx (3)

34-44: 新增 expandedRowOffset 上下文支持

正确地从 TableContext 中提取了 expandedRowOffset 属性并添加到依赖数组中，这将支持可展开行的偏移配置功能。

---

79-79: 正确传递 expandedRowOffset 属性

将 expandedRowOffset 属性传递给 BodyRow 组件，这是新增可展开行偏移功能的必要步骤。

---

103-103: 简化样式类名应用

移除了外部样式覆盖支持，现在只使用基于 prefixCls 的固定类名，这简化了组件的样式逻辑。

src/Table.tsx (3)

28-28: 统一 classNames 导入别名

将导入别名从 cls 改为 classNames 提高了代码的可读性和一致性。

---

666-666: 更新 classNames 函数调用

正确地将所有 cls 函数调用更新为 classNames，保持了与新导入别名的一致性。

Also applies to: 748-748, 781-781, 800-800, 801-801, 804-804

---

847-847: 添加 expandedRowOffset 上下文支持

正确地将 expandedRowOffset 从 expandableConfig 添加到 TableContext 中，并包含在依赖数组中。这为可展开行偏移功能提供了必要的上下文传递。

Also applies to: 898-898

src/Header/Header.tsx (3)

32-32: 简化表头单元格样式应用

现在只使用列自身的 className，移除了外部样式覆盖，这简化了表头的样式逻辑。

---

100-101: 简化上下文使用和函数调用

移除了对 classNames 和 styles 的上下文依赖，并简化了 parseHeaderRows 函数调用，这与整体重构目标一致。

---

108-108: 简化包装组件样式

使用固定的类名而不是合并外部样式，这简化了组件的样式应用逻辑。

src/Body/BodyRow.tsx (4)

1-1: 更新导入声明

统一了 classNames 导入别名并添加了 ExpandableConfig 类型导入，为新功能提供了必要的类型支持。

Also applies to: 7-7

---

22-22: 添加 expandedRowOffset 属性支持

正确地添加了 expandedRowOffset 属性到接口中，并设置了合理的默认值 { column: 0, width: 0 }，这为可展开行偏移功能提供了基础支持。

Also applies to: 106-106

---

138-138: 简化样式应用逻辑

移除了外部 classNames 和 styles 的使用，现在只依赖于组件自身的样式和列级别的 className，这简化了样式管理并提高了组件的可维护性。

Also applies to: 147-147, 162-162, 192-192

---

200-201: 正确实现可展开行偏移功能

为 ExpandedRow 组件添加了 offsetWidth 属性并调整了 colSpan 计算 (flattenColumns.length - expandedRowOffset.column)，这正确地处理了可展开行的偏移布局需求。

✨ 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

• X
• Mastodon
• Reddit
• LinkedIn

🪧 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.