feat: support force rendering expanded rows by nikzanda · Pull Request #1503 · react-component/table

nikzanda · 2026-07-28T11:07:55Z

Summary

Add expandable.forceRender
Render collapsed expanded-row content ahead of the first expansion
Keep expanded content mounted across expand/collapse transitions
Support regular and virtual tables; in virtual mode, only currently mounted rows are force-rendered
Keep force-rendered rows hidden until expanded

Related issue

Closes ant-design/ant-design#54798
Supersedes #1386

Summary by CodeRabbit

新功能
- 新增 expandable.forceRender 配置项（默认值 false）。
- 启用后，可展开行会在真正展开前按需预渲染并保持挂载；未展开时展开区域隐藏（display: none），展开/收起切换仅切换可见性不卸载。
- 虚拟表格模式下仅对当前已挂载的虚拟行执行强制渲染。
文档
- 更新中英文 API 文档，补充 forceRender 的虚拟模式行为说明。
测试
- 增加对预渲染不卸载、DOM复用与 rowSpan 场景的覆盖验证。

gemini-code-assist · 2026-07-28T11:07:58Z

Caution

The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased.

vercel · 2026-07-28T11:08:01Z

Someone is attempting to deploy a commit to the afc163's projects Team on Vercel.

A member of the Team first needs to authorize it.

coderabbitai · 2026-07-28T11:08:19Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: c181bb2d-27a2-4707-9130-d075964f94ff

📥 Commits

Reviewing files that changed from the base of the PR and between 536bdc8 and c3558d8.

📒 Files selected for processing (6)

README.md
README.zh-CN.md
src/Table.tsx
src/VirtualTable/BodyLine.tsx
tests/ExpandRow.spec.jsx
tests/Virtual.spec.tsx

🚧 Files skipped from review as they are similar to previous changes (3)

README.md
README.zh-CN.md
tests/Virtual.spec.tsx

Walkthrough

新增 expandable.forceRender 配置，并将其传递至行信息。普通表格和虚拟表格会提前渲染展开行，未展开时隐藏内容；同时补充类型定义、文档及测试。

Changes

展开行强制渲染

Layer / File(s)	Summary
配置契约与上下文传递 `src/interface.ts`, `src/context/TableContext.tsx`, `src/hooks/useRowInfo.tsx`, `src/Table.tsx`	新增 `forceRender` 配置类型，并通过表格上下文和 `useRowInfo` 传递至行组件；未定义时默认为 `false`，配置变化会更新上下文。
展开行渲染行为 `src/Body/BodyRow.tsx`, `src/VirtualTable/BodyLine.tsx`	普通及虚拟表格在启用 `forceRender` 时提前渲染展开行；虚拟表格未展开时使用 `display: none` 隐藏内容。
行为验证与 API 文档 `tests/ExpandRow.spec.jsx`, `tests/Virtual.spec.tsx`, `README.md`, `README.zh-CN.md`	测试预渲染、隐藏、挂载复用及 `rowSpan` 场景，并在中英文文档中记录虚拟模式下的卸载行为。

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Table
  participant TableContext
  participant RowInfo
  participant BodyRow
  participant BodyLine
  participant ExpandedRow
  Table->>TableContext: 写入 expandable.forceRender
  TableContext->>RowInfo: 选择 forceRender
  RowInfo->>BodyRow: 提供展开配置
  RowInfo->>BodyLine: 提供展开配置
  BodyRow->>ExpandedRow: forceRender 时预先渲染
  BodyLine->>ExpandedRow: forceRender 时创建并隐藏
  BodyLine->>ExpandedRow: 展开后移除隐藏样式

Suggested reviewers: zombiej, qdyanbing, afc163

Poem

小兔挥爪改展开，
行儿未开先露脸。
藏在屏幕后安睡，
点击之后光灿灿。
类型文档齐欢唱，
测试萝卜甜又香。

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	src/interface.ts 中仅格式化的 DataIndex 和 ColumnsType 调整与本功能无关，属于额外变更。	请移除 src/interface.ts 的纯格式化改动，仅保留 forceRender 相关的类型扩展。
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	标题简洁且准确概括了新增 expanded row force rendering 功能。
Linked Issues check	✅ Passed	实现了 expandable.forceRender，支持首次展开前渲染并在折叠后保持挂载，满足问题描述。

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

Fix failing CI checks

🧪 Generate unit tests (beta)

Create PR with unit tests

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

coderabbitai

🧹 Nitpick comments (1)

tests/ExpandRow.spec.jsx (1)
62-65: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

补充重新折叠后的隐藏断言。

当前仅验证首次展开；若 forceRender 路径在折叠后未恢复 display: none，测试不会捕获回归。

tests/ExpandRow.spec.jsx#L62-L65：再次点击第一行展开图标，并断言第一条展开行恢复隐藏。

tests/Virtual.spec.tsx#L201-L205：再次点击展开图标，并断言虚拟展开行恢复隐藏。

依据 PR 目标，强制渲染的内容应在未展开时保持隐藏。
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@tests/ExpandRow.spec.jsx` around lines 62 - 65, Extend the expansion
assertions in tests/ExpandRow.spec.jsx lines 62-65 by clicking the first row’s
expand icon again and asserting its expanded row is hidden; apply the same
additional collapse interaction and hidden-state assertion in
tests/Virtual.spec.tsx lines 201-205. Ensure both force-render paths verify
content remains hidden after collapsing.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@tests/ExpandRow.spec.jsx`:
- Around line 62-65: Extend the expansion assertions in tests/ExpandRow.spec.jsx
lines 62-65 by clicking the first row’s expand icon again and asserting its
expanded row is hidden; apply the same additional collapse interaction and
hidden-state assertion in tests/Virtual.spec.tsx lines 201-205. Ensure both
force-render paths verify content remains hidden after collapsing.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: b021e53e-c774-4b76-af09-561b172fd7ff

📥 Commits

Reviewing files that changed from the base of the PR and between adf0701 and 2a55be7.

📒 Files selected for processing (10)

README.md
README.zh-CN.md
src/Body/BodyRow.tsx
src/Table.tsx
src/VirtualTable/BodyLine.tsx
src/context/TableContext.tsx
src/hooks/useRowInfo.tsx
src/interface.ts
tests/ExpandRow.spec.jsx
tests/Virtual.spec.tsx

nikzanda · 2026-07-28T11:12:59Z

Related work

This PR overlaps with #1386. Thanks to @rubbishmaker for the earlier implementation.

Compared with #1386, this PR:

follows the boolean API proposed in Table expandable forceRender prop ant-design/ant-design#54798;
supports both regular and virtual tables;
adds unit tests for both rendering paths;
documents the new option in the English and Chinese READMEs;
is based on the current master.

I'm happy to rework or close this PR if maintainers prefer continuing from #1386.

codecov · 2026-07-29T01:39:08Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.05%. Comparing base (adf0701) to head (c3558d8).

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #1503   +/-   ##
=======================================
  Coverage   99.05%   99.05%           
=======================================
  Files          45       45           
  Lines        1372     1374    +2     
  Branches      411      413    +2     
=======================================
+ Hits         1359     1361    +2     
  Misses         13       13

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

yoyo837 · 2026-07-30T06:59:13Z

Thanks for covering both the regular and virtual rendering paths. I reviewed the current head (536bdc8); the main implementation looks good, but I think the following points are worth addressing before merge.

1. Virtual table + `rowSpan` may mount expanded content twice

BodyGrid.extraRender creates an additional BodyLine for records that need the virtual rowSpan overlay. BodyLine currently renders expanded content without excluding these extra lines:

if (rowSupportExpand && (forceRender || expanded)) {
  const expandContent = expandedRowRender(...);
}

With forceRender: true, the normal line and the extra row-span line can therefore both call expandedRowRender and mount two copies for the same record. This is particularly risky for the motivating use case, since duplicate Form.Item names may be registered.

Could we suppress expanded-row rendering for the overlay line (for example, guard it with !extra) and add a virtual + rowSpan + forceRender regression test that verifies each record mounts only one expanded subtree?

Relevant paths:

src/VirtualTable/BodyLine.tsx
src/VirtualTable/BodyGrid.tsx

2. Please clarify the virtual-list limitation

In virtual mode, forceRender only affects BodyLine instances currently mounted by the virtual list. Rows outside the viewport are still unmounted, so this does not guarantee that every off-screen row's form fields remain registered.

I would document this explicitly, e.g.:

In virtual mode, only rows currently mounted by the virtual list are force-rendered. Off-screen rows may still be unmounted.

That keeps the feature compatible with virtualization without implying that all data rows remain in the DOM.

3. Add a test for the actual keep-mounted contract

The current tests verify presence and display: none, but the core requirement is that the expanded subtree is not unmounted across collapse/expand transitions.

It would be useful to add a small stateful child (or mount/unmount counters), then verify that:

it mounts before the first expansion;
collapsing does not run cleanup;
re-expanding preserves its state / DOM identity.

Ideally this should cover both regular and virtual paths.

4. Minor cleanup

TableContextProps.forceRender is required boolean, while expandableConfig.forceRender can be undefined. Either use expandableConfig.forceRender ?? false when building the context, or make the context field optional.
The unrelated formatting changes to DataIndex and ColumnsType in src/interface.ts could be reverted to keep the diff focused.
The PR description could use Closes ant-design/ant-design#54798 and Supersedes #1386; close #1386 refers to another PR and is unlikely to close it automatically.

The main lint/TypeScript/compile/test workflow and coverage are green, so apart from the virtual row-span edge case these are mostly contract/documentation hardening.

nikzanda · 2026-07-30T07:44:51Z

@yoyo837 Thanks for the detailed review. I’ve addressed the requested changes in c3558d8:

prevented expandedRowRender from running for virtual rowSpan overlay lines by guarding with !extra;
added a virtual + rowSpan + forceRender regression test that verifies each record mounts only one expanded subtree;
added stateful keep-mounted tests for both regular and virtual tables, covering mount count, cleanup, DOM identity, and preserved state;
documented that virtual mode only force-renders rows currently mounted by the virtual list;
normalized the context value with expandableConfig.forceRender ?? false;
reverted the unrelated DataIndex and ColumnsType formatting changes;
updated the PR description with Closes ant-design/ant-design#54798 and Supersedes #1386.

Validation completed successfully:

yarn test — 223 tests passed
yarn tsc
yarn lint

Thanks again. Please let me know if you’d like any further adjustments.

feat: support force rendering expanded rows

2a55be7

coderabbitai Bot reviewed Jul 28, 2026

View reviewed changes

test: cover collapsing force-rendered rows

536bdc8

yoyo837 approved these changes Jul 29, 2026

View reviewed changes

yoyo837 requested a review from zombieJ July 30, 2026 02:30

fix: prevent duplicate force-rendered content in virtual tables

c3558d8

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: support force rendering expanded rows - #1503

feat: support force rendering expanded rows#1503
nikzanda wants to merge 3 commits into
react-component:masterfrom
nikzanda:feat/expandable-force-render

nikzanda commented Jul 28, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

gemini-code-assist Bot commented Jul 28, 2026

Uh oh!

vercel Bot commented Jul 28, 2026

Uh oh!

coderabbitai Bot commented Jul 28, 2026 •

edited

Loading

❌ Failed checks (2 warnings)

Uh oh!

coderabbitai Bot left a comment

Uh oh!

nikzanda commented Jul 28, 2026

Uh oh!

codecov Bot commented Jul 29, 2026 •

edited

Loading

Uh oh!

yoyo837 commented Jul 30, 2026

Uh oh!

nikzanda commented Jul 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

nikzanda commented Jul 28, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Related issue

Summary by CodeRabbit

Summary by CodeRabbit

Uh oh!

gemini-code-assist Bot commented Jul 28, 2026

Uh oh!

vercel Bot commented Jul 28, 2026

Uh oh!

coderabbitai Bot commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (2 warnings)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

nikzanda commented Jul 28, 2026

Related work

Uh oh!

codecov Bot commented Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

yoyo837 commented Jul 30, 2026

1. Virtual table + rowSpan may mount expanded content twice

2. Please clarify the virtual-list limitation

3. Add a test for the actual keep-mounted contract

4. Minor cleanup

Uh oh!

nikzanda commented Jul 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

nikzanda commented Jul 28, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 28, 2026 •

edited

Loading

codecov Bot commented Jul 29, 2026 •

edited

Loading

1. Virtual table + `rowSpan` may mount expanded content twice