Подстроки в таблице выровнены по основным столбцам таблицы

Question

Я использую таблицу данных vuetify. Я хочу использовать расширенный слот, чтобы отображать больше строк в таблице.
Например: строки синего цвета - это подстроки

January 2nd, продажи и выручка суммируются.

Кажется expanded-item слот для v-data-table это внутри <tr> тег, поэтому в официальной документации используется <td>в этом. Предполагая, что мой предмет выглядит так:

{
  month: 'January',
  day: 2,
  sells: 29,
  revenue: 428,
  byHour: [
    {hour: 7, sells: 3, revenue: 33},
    ...
  ]
}

Если я использую такой слот:

<template v-slot:expanded-item="{ headers, item }">
  <td></td>
  <td>item.byHour[0].hour</td>
  <td>item.byHour[0].sells</td>
  <td>item.byHour[0].revenue</td>
</template>

Выглядит нормально. Содержимое подстрок выровнено со столбцами основной таблицы,
но я хочу использоватьv-for, Я попытался обернуть приведенный выше код в <tr> или <table> но он не использует всю ширину слота или столбцы вспомогательных строк не выровнены с основной строкой и таблицей.

как я могу достичь своей цели?

Спасибо.