UTable: Expand Slot causes EmptyState width issue

[rmbakker88]

Environment

• Operating System: Linux
• Node Version: v18.20.3
• Nuxt Version: 3.12.4
• CLI Version: 3.12.0
• Nitro Version: 2.9.7
• Package Manager: npm@10.2.3
• Builder: -
• User Config: devtools, modules, compatibilityDate
• Runtime Modules: @nuxt/ui@2.18.4
• Build Modules: -

Version

v2.18.4

Reproduction

https://stackblitz.com/edit/github-kntdwe?file=app.vue

Description

Initialize any UTable, make sure it is empty. Add an expand slot. The Empty State slot will now not span the full width of the table.

Remove the expand slot, and the Empty State is the full width of the table again.

Additional context

Logs

No response

[DrxcoDev]

This issue might be related to CSS or layout handling when expand slots are present. Review the CSS styles or layout calculations applied to the UTable component when expand slots are included. Ensure that the styles for the Empty State are applied correctly and consider adding a CSS rule to ensure it spans the full width regardless of other slots.

[jscaltreto]

I'm seeing this, too. When the expand slot is used, an extra <th> is added to the header, but the corresponding colspan for the loading and empty states is not increased by 1 as it is when modelValue is present. The result is that the colspan is one fewer than it should be to completely fill the table.