Nuxt•3mo ago

<UTable> generates an empty <tr> under the first grouped line when rouping columns

As explained vaguely in the docs https://ui.nuxt.com/docs/components/table#with-grouped-rows And they use a "trick" to not show the empty ones by removing the padding with this : :ui="{ root: 'min-w-full', td: 'empty:p-0' // helps with the colspaned row added for expand slot }" I'd like to remove them completely but I don't know how

Nuxt UI

Vue Table Component - Nuxt UI

A responsive table element to display data in rows and columns.

5 Replies

kapa.ai•3mo ago

Hi @Nicolas Walter. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The knowledge sources confirm that when using grouped rows in <UTable>, an extra empty <tr> is rendered under the first grouped line. The official documentation acknowledges this and suggests a workaround: setting the td class for empty rows to p-0 (no padding) via the ui prop, which visually minimizes the impact of the empty row but does not remove it from the DOM:

<UTable
  :data="data"
  :columns="columns"
  :grouping="['account_id', 'status']"
  :grouping-options="grouping_options"
  :ui="{
    root: 'min-w-full',
    td: 'empty:p-0' // helps with the colspaned row added for expand slot
  }"
>
  <!-- ... -->
</UTable>

<UTable
  :data="data"
  :columns="columns"
  :grouping="['account_id', 'status']"
  :grouping-options="grouping_options"
  :ui="{
    root: 'min-w-full',
    td: 'empty:p-0' // helps with the colspaned row added for expand slot
  }"
>
  <!-- ... -->
</UTable>

However, the documentation does not provide a method to completely remove these empty <tr> elements. The workaround only hides their visual impact, not their existence in the markup. There is no documented prop, slot, or configuration to prevent their rendering entirely. This appears to be a limitation of the current implementation of <UTable> and its integration with TanStack Table grouping features. Summary:
You can only visually hide the empty rows using the empty:p-0 class as shown in the docs. There is no documented way to remove them from the DOM completely at this time With grouped rows. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@1400488692048728084> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Nicolas WalterOP•3mo ago

@kapa.ai Could you maybe suggest a workaround using code or css ?

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the provided knowledge sources, the only officially documented workaround is to use the empty:p-0 utility in the :ui prop to visually minimize the empty <tr> by removing its padding. This does not remove the row from the DOM, but it makes it less noticeable:

<UTable
  :data="data"
  :columns="columns"
  :grouping="['account_id', 'status']"
  :grouping-options="grouping_options"
  :ui="{
    root: 'min-w-full',
    td: 'empty:p-0' // helps with the colspaned row added for expand slot
  }"
/>

<UTable
  :data="data"
  :columns="columns"
  :grouping="['account_id', 'status']"
  :grouping-options="grouping_options"
  :ui="{
    root: 'min-w-full',
    td: 'empty:p-0' // helps with the colspaned row added for expand slot
  }"
/>

The documentation does not provide any further workaround—neither a code nor a CSS solution—to completely remove these empty rows from the DOM. The workaround is limited to hiding their visual impact, not their existence With grouped rows. Summary:
There is no documented way to remove the empty <tr> elements entirely. The only available workaround is to use the empty:p-0 class to hide their padding. If you need more control, you may need to wait for an update to the component or consider opening a feature request with the Nuxt UI team. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@1400488692048728084> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

<UTable> generates an empty <tr> under the first grouped line when rouping columns

Did you find this page helpful?