fix(Table): merge grouped headers across rows by GeoffroyS6868 · Pull Request #7240 · nuxt/ui

GeoffroyS6868 · 2026-10-20T21:00:46Z

Linked issue

Resolves #5612

Type of change

Bug fix

Description

Tables with uneven column-group depths render empty placeholder cells above shallow headers. Resolve each placeholder chain to its real TanStack header and render that header once with the corresponding rowspan. The original header context remains available to slots, sorting, and column metadata.

Adds a three-level playground example and regression coverage for grouped headers, column visibility, ordering, pinning, and accessibility. Updates the existing aria-sort test to check the merged header.

Merged headers change the positions and number of <thead> cells. Custom CSS that targets header cells by row or nth-child may need adjustment.

Screenshots

Before	After

Validation

The regression test fails before the fix: the first header row contains an empty cell instead of the custom ID header.
Focused regression and sorting checks pass in both Vue and Nuxt: 8 tests.
pnpm exec vitest run --maxWorkers 2 passes: 303 test files, 8,011 tests passed, and 6 skipped.
ESLint passes, including the final playground changes.
pnpm run typecheck passes for the library, Nuxt playground and documentation.
Verified the local Vue playground visually before and after the fix, including hiding and restoring a column.

Checklist

I have linked an issue or discussion.
I have updated the documentation accordingly (existing behavior fix; playground example included).

vercel · 2026-10-20T21:00:52Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
ui	Ready	Preview	Oct 21, 2026 8:50pm UTC
ui-repl	Ready	Preview	Oct 21, 2026 8:50pm UTC

github-actions · 2026-10-20T21:03:09Z

Client output of the apps in test/bundle that changed, compared to the base branch.

Fixture	JS (gzip)	CSS (gzip)
`nuxt-full`	902.7 kB (+89 B, +0.0%)	28.4 kB

Raw sizes

Fixture	JS	CSS
`nuxt-full`	2833.5 kB (+0.2 kB, +0.0%)	204.2 kB

coderabbitai · 2026-10-20T21:04:06Z

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

⚙️ Run configuration

Configuration used: Organization UI
Review profile: CHILL
Plan: Advanced
Run ID: 7df2beb3-752e-45da-a1f0-36dcd1e8b21e

📥 Commits

Reviewing files that changed from the base of the PR and between da4a9d7 and a86f366.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

No new commits to review - use @coderabbitai full review for a full pass

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI
Review profile: CHILL
Plan: Advanced
Run ID: 4fa8f038-0bb7-4cfc-99c3-98d9ee9d8131

📥 Commits

Reviewing files that changed from the base of the PR and between bda0b3f and da4a9d7.

📒 Files selected for processing: 3

playgrounds/nuxt/app/pages/components/table-grouped-headers.vue
src/runtime/components/Table.vue
test/components/Table.spec.ts

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review.

📝 Walkthrough

The table now computes grouped header rows and row spans before rendering them. The playground adds a nested-header example with a switch for age-column visibility. Tests cover header spans, visibility changes, reordering, pinning, body-cell alignment, and accessibility.

Priority: ➖ Normal

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

Severity of issue fixed: Low

Merge Risk: ⚪ Minimal · up to da4a9

No actionable grouped-header issue is established. The change appears mergeable after normal checks.

Pre-merge checks: 5

Check name	Status	Explanation
Title check		The title clearly and concisely identifies the main change: merging grouped table headers across rows.
Linked Issues check		Issue [`#5612`] requires correct rendering of grouped headers in Vue `UTable`. `src/runtime/components/Table.vue` now resolves placeholder header chains and renders the real header with the calculated `…
Out of Scope Changes check		The changes stay within issue [`#5612`]. The playground example demonstrates the grouped-header case. The tests validate the rendering fix and related table state changes. No unrelated product behavior …
Docstring Coverage		No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
Description check		The pull request description directly describes the grouped-header rendering fix, added playground example, regression tests, accessibility updates, validation results, and related issue.

Full details: Linked Issues check

Explanation

Issue [#5612] requires correct rendering of grouped headers in Vue UTable. src/runtime/components/Table.vue now resolves placeholder header chains and renders the real header with the calculated rowspan. test/components/Table.spec.ts covers uneven header depths, column visibility, ordering, pinning, slot content, body alignment, and accessibility. The regression coverage directly checks the reported behavior.

Full details: Out of Scope Changes check

Explanation

The changes stay within issue [#5612]. The playground example demonstrates the grouped-header case. The tests validate the rendering fix and related table state changes. No unrelated product behavior or unrelated files are included.

Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1 files. (2 skipped: 2 unsupported.)

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create a new PR

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

codspeed · 2026-10-20T21:07:17Z

Merging this PR will degrade performance by 11.83%

1 warning

⚠️ Base and head ran on different runner types

Some benchmarks with significant performance changes were compared across different runner types, so the changes might not come from the code. Run base and head on the same runner type, or use CodSpeed Macro Runners for more stable results.

Learn more about Macro Runners

Open the report in CodSpeed to investigate

❌ 1 regressed benchmark
✅ 30 untouched benchmarks
⏩ 10 skipped benchmarks¹

Warning

Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

	Benchmark	`BASE`	`HEAD`	Efficiency
❌	`table`	1.6 ms	1.8 ms	-11.83%

Tip

Investigate this regression by commenting @codspeedbot fix this regression on this PR, or directly use the CodSpeed MCP with your agent.

_{Comparing GeoffroyS6868:fix/table-grouped-header-rowspan (a86f366) with v4 (3456d03)}

10 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

pkg-pr-new · 2026-10-20T21:10:17Z

npm i https://pkg.pr.new/@nuxt/ui@7240

commit: a86f366

GeoffroyS6868 requested a review from benjamincanac as a code owner October 20, 2026 21:00

github-actions Bot added the v4 #4488 label Oct 20, 2026

vercel Bot deployed to Preview – ui-repl October 20, 2026 21:02

View deployment

vercel Bot deployed to Preview – ui October 20, 2026 21:05

View deployment

fix(Table): merge grouped headers across rows

a86f366

GeoffroyS6868 force-pushed the fix/table-grouped-header-rowspan branch from da4a9d7 to a86f366 Compare October 21, 2026 20:44

vercel Bot deployed to Preview – ui-repl October 21, 2026 20:45

View deployment

vercel Bot deployed to Preview – ui October 21, 2026 20:50

View deployment

Navigation Menu

Repository navigation

fix(Table): merge grouped headers across rows - #7240

fix(Table): merge grouped headers across rows#7240
GeoffroyS6868 wants to merge 1 commit into
nuxt:v4from
GeoffroyS6868:fix/table-grouped-header-rowspan

GeoffroyS6868 commented Oct 20, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Oct 20, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 20, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 20, 2026 •

edited

Loading

Review skipped

Uh oh!

codspeed Bot commented Oct 20, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Oct 20, 2026 •

edited

Loading

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

GeoffroyS6868 commented Oct 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Linked issue

Type of change

Description

Screenshots

Validation

Checklist

Uh oh!

vercel Bot commented Oct 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Oct 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Review skipped

Uh oh!

codspeed Bot commented Oct 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging this PR will degrade performance by 11.83%

Performance Changes

Footnotes

Uh oh!

pkg-pr-new Bot commented Oct 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

GeoffroyS6868 commented Oct 20, 2026 •

edited

Loading

vercel Bot commented Oct 20, 2026 •

edited

Loading

github-actions Bot commented Oct 20, 2026 •

edited

Loading

coderabbitai Bot commented Oct 20, 2026 •

edited

Loading

codspeed Bot commented Oct 20, 2026 •

edited

Loading

pkg-pr-new Bot commented Oct 20, 2026 •

edited

Loading