Sub rows in table aligned to to main table columns

Question

I'm using vuetify's data table. I want to use the expanded slot to show more rows in the table.
For example:

The blue colored rows are sub rows of January 2nd, sells and revenue sums up.

It seems the expanded-item slot for v-data-table is inside <tr> tag, that's why the official documentation uses <td> in it. Assuming my item looks like:

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

If I use the slot like that:

<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>

It looks fine. The content of the sub rows is aligned with the columns of the main table,
But I want to use v-for, I tried to wrap the code above in <tr> or <table> but it doesn't use the whole slot width or the columns of the sub rows are not aligns with the main row and table.

how can I achieve my goal?

Thanks.