How to make UTable (Nuxt UI) grouped rows span all visible columns

today's blog, it will be about a frustrating issue with UTable (Nuxt UI) that I tried using in a side project. When users group data, the column sizes change significantly, as shown in the image.

From the image, you can see that normally the # or ID has a size of only w-8, but when grouped, the ID column size is no longer w-8.

I made the following adjustments for improve UTable (Nuxt UI) make grouped rows span all visible columns by

• Added :ui="{ td: 'empty:p-0' }" to the UTable section to adjust the td styles to be empty and have no internal padding.

 <UTable 
    :data="IssuesByVersions" 
    :columns="columns"
    v-model:grouping="groupedColumns"
    :grouping-options="{
       groupedColumnMode: 'remove',
       getGroupedRowModel: getGroupedRowModel()
     }"
     :ui="{ td: 'empty:p-0' }"
     class="w-full"
/>

• Added meta to the id column (which is the first column) to:
  • Set the CSS class for td: 'w-8 overflow-visible' (width of 8 units, overflow visible).
  • Add colspan to the td using a function that checks if the row is grouped; if yes, set the colspan equal to the total number of cells in that row (making it span all columns).

const columns: TableColumn<Issue>[] = [
  {
    accessorKey: 'id',
    header: ({ column }) => h('div', '#'),
    cell: ({ row }) => {
      if (row.getIsGrouped()) {
        const columnId = row.groupingColumnId as string
        const label = columnLabels[columnId] || columnId
        return h('div', { 
          class: 'flex items-center gap-2',
          style: { paddingLeft: `${row.depth * 1.5}rem` }
        }, [
          h(resolveComponent('UButton'), {
            color: 'gray',
            variant: 'ghost',
            icon: row.getIsExpanded() ? 'i-heroicons-minus' : 'i-heroicons-plus',
            size: 'xs',
            class: '-ml-2',
            onClick: row.getToggleExpandedHandler(),
          }),
          h('span', { class: 'font-bold' }, `${label}: ${row.getValue(columnId)} (${row.subRows.length})`)
        ])
      }
      return h('a', { 
        href: `${baseUrl}/issues/${row.getValue('id')}`, 
        target: '_blank',
        class: 'text-primary hover:underline',
        style: { paddingLeft: `${row.depth * 1.5}rem` }
      }, `${row.getValue('id')}`)
    },
    meta: {
      class: {
        td: 'w-8 overflow-visible'
      },
      colspan: {
        td: (cell: any) => {
          return cell.row?.getIsGrouped() ? cell.row.getAllCells().length : undefined
        }
      }
    },
  },

Here is the result after applying the change

To view the full commit, you can check it out at the link