Header grouping in the `UTable` does not display correctly.

[allahyar]

Is this bug related to Nuxt or Vue?

Vue

Package

v4.x

Version

V4.1.2

Description

This report was previously submitted, but it was overlooked. #4756

Now:

https://codesandbox.io/p/devbox/nuxt-ui-table-nested-header-forked-ss8y9l

Additional context

Correct display:

[zvn2060]

I think we have to deal with the rowspan ourself

consider use https://www.npmjs.com/package/tanstack-table-header-rowspan
and modify

ui/src/runtime/components/Table.vue

Lines 581 to 606 in 9002f27

	<tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" data-slot="tr" :class="ui.tr({ class: [props.ui?.tr] })">
	<th
	v-for="header in headerGroup.headers"
	:key="header.id"
	:data-pinned="header.column.getIsPinned()"
	:scope="header.colSpan > 1 ? 'colgroup' : 'col'"
	:colspan="header.colSpan > 1 ? header.colSpan : undefined"
	:rowspan="header.rowSpan > 1 ? header.rowSpan : undefined"
	data-slot="th"
	:class="ui.th({
	class: [
	props.ui?.th,
	resolveValue(header.column.columnDef.meta?.class?.th, header)
	],
	pinned: !!header.column.getIsPinned()
	})"
	:style="[
	getColumnStyles(header.column),
	resolveValue(header.column.columnDef.meta?.style?.th, header)
	]"
	>
	<slot :name="`${header.id}-header`" v-bind="header.getContext()">
	<FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
	</slot>
	</th>
	</tr>

to

tableApi.getHeaderGroups().map(headerGroup => ({
	...headerGroup,
	headers: headerGroup.headers.map((header) => {
		const rowSpan = tableHeaderRowSpan(header);
		if (!rowSpan) return null;
		return { ...header, rowSpan, isPlaceholder: false };
	}).filter(Boolean)
}))