table icon indicating copy to clipboard operation
table copied to clipboard

feat: add forceRender api

Open rubbishmaker opened this issue 3 months ago • 4 comments

https://github.com/ant-design/ant-design/issues/54798 #54798

Summary by CodeRabbit

新功能

  • 为表格可展开行新增 forceRender 选项,允许根据指定条件强制渲染行的展开内容。支持布尔值或自定义回调函数配置,提供更灵活的展开行控制能力。

rubbishmaker avatar Oct 24 '25 08:10 rubbishmaker

Someone is attempting to deploy a commit to the React Component Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] avatar Oct 24 '25 08:10 vercel[bot]

功能概览

表格组件的 expandable 配置中添加了新的 forceRender 选项,允许通过布尔值或函数来控制指定行是否强制渲染展开内容,无论该行当前是否处于展开状态。

变更汇总

类别 / 文件 变更描述
类型定义和接口更新
src/interface.ts, src/context/TableContext.tsx
新增 forceRender 可选属性到 ExpandableConfigTableContextProps,类型为 boolean | ((record: RecordType) => boolean),支持条件式强制渲染
主表格组件集成
src/Table.tsx
从 expandable 配置中提取 forceRender,将其传入 TableContext 和相关的渲染逻辑,并添加到依赖数组以确保上下文正确更新
上下文传播
src/Body/index.tsx
从 TableContext 解构 forceRender,并将其作为 prop 传递给每个 BodyRow 组件
行渲染逻辑
src/Body/BodyRow.tsx
新增 forceRender prop,引入 shouldForceRender() 辅助函数,将强制渲染条件集成到展开行渲染的条件判断中
使用示例
docs/examples/expandedRowRender.tsx
展示在 expandable 配置中使用 forceRender 回调函数,对特定行(key 为 0)强制渲染展开内容的用法

序列图

sequenceDiagram
    participant User
    participant Table
    participant Body
    participant BodyRow
    
    User->>Table: 传入 expandable 配置 (含 forceRender)
    Table->>Table: 从 expandableConfig 提取 forceRender
    Table->>Table: 将 forceRender 放入 TableContext
    Body->>Body: 从 TableContext 解构 forceRender
    Body->>BodyRow: 逐行传递 forceRender prop
    BodyRow->>BodyRow: 调用 shouldForceRender(record, index)
    alt forceRender 返回 true
        BodyRow->>BodyRow: 强制渲染展开行内容
    else forceRender 返回 false
        BodyRow->>BodyRow: 根据现有 expanded 状态决定是否渲染
    end

代码审查工作量评估

🎯 3 (中等复杂度) | ⏱️ ~20-25 分钟

该 PR 涉及多个文件的协调变更,从接口定义到组件实现,再到上下文传播形成了完整的特性链路。变更模式相对一致(均为在各层添加 forceRender 支持),但需要验证:(1) 类型定义的一致性;(2) 上下文传播链路的正确性;(3) BodyRow 中的条件渲染逻辑是否正确处理了 forceRender 与现有 expanded 状态的交互。

可能相关的 PR

  • react-component/table#1261: 同样修改表格渲染管线的多个层级(Table、TableContext、Body、BodyRow),通过上下文和 props 传播新的配置字段。

建议审查者

  • afc163
  • zombieJ
  • MadCcc

兔子的诗

🐰 展开行有新魔法,
forceRender 让你掌控,
层层传递若春风,
条件渲染成永恒,
表格优雅又灵动!✨

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标题"feat: add forceRender api"清晰地反映了本次变更集的主要目标。根据提供的原始总结,所有更改都围绕一个核心功能展开:在表格组件中添加新的forceRender API,该功能通过在ExpandableConfig、TableContext和BodyRowProps中添加forceRender属性,使用户能够强制渲染展开行。标题简洁明了,不含模糊措辞或无关内容,准确传达了变更的要点。
✨ Finishing touches
  • [ ] 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • [ ] Create PR with unit tests
  • [ ] Post copyable unit tests in a comment

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

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai[bot] avatar Oct 24 '25 08:10 coderabbitai[bot]

Summary of Changes

Hello @rubbishmaker, 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 introduces a new forceRender API to the Table component's expandable configuration, providing enhanced control over the rendering lifecycle of expanded rows. This feature allows developers to ensure that the content of expanded rows is always present in the DOM, even when visually collapsed, which can be crucial for scenarios requiring consistent DOM presence, such as for accessibility or complex interactions. The implementation seamlessly integrates this new capability across the table's internal components, from the main Table down to individual BodyRows.

Highlights

  • New forceRender API: Introduced a new forceRender property within the expandable configuration of the Table component. This API allows expanded rows to be rendered in the DOM even when they are not visually expanded, either globally or conditionally based on a record.
  • Conditional Rendering Control: The forceRender API accepts either a boolean value to force render all expanded rows, or a function that receives the record and its index to conditionally force render specific rows.
  • Integration with Table Components: The forceRender property is propagated through the TableContext and utilized by the BodyRow component to determine whether an expanded row's content should be rendered regardless of its expanded state.
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.

gemini-code-assist[bot] avatar Oct 24 '25 08:10 gemini-code-assist[bot]

Codecov Report

:x: Patch coverage is 85.71429% with 2 lines in your changes missing coverage. Please review. :white_check_mark: Project coverage is 96.05%. Comparing base (998c134) to head (d773321).

Files with missing lines Patch % Lines
src/Body/BodyRow.tsx 75.00% 2 Missing :warning:
Additional details and impacted files
@@            Coverage Diff             @@
##           master    #1386      +/-   ##
==========================================
- Coverage   96.09%   96.05%   -0.05%     
==========================================
  Files          57       57              
  Lines        3434     3447      +13     
  Branches      632      634       +2     
==========================================
+ Hits         3300     3311      +11     
- Misses        129      131       +2     
  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.

codecov[bot] avatar Oct 24 '25 08:10 codecov[bot]