Vuetify datatable add totals row

Question

I'm trying to add a totals row with this framework but seems it's not contemplated. The only way I found is doing this, but the aproach is not correct...

<v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  >
    <template slot="footer">
      <tr>
          <th></th>
          <th>150</th>
          <th>260</th> 
          <th>150</th>
          <th>260</th> 
        <th></th>
      </tr>
    </template>
</v-data-table>

See this codepen to see the result:

https://codepen.io/slayerbleast/pen/KKKjWjP

The footer is like another table instead of reusing the same columns.

Any idea how to fix this?

Justice47 Justice47 · Accepted Answer · 2019-11-26T14:38:54

You must use body.append slot for this purpose.

So it will be like this:

<v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  >
    <template slot="body.append">
      <tr>
          <th>Total</th>
          <th>150</th>
          <th>260</th> 
          <th>150</th>
          <th>260</th>
          <th>33%</th>
      </tr>
</template>

Vuetify datatable add totals row

1 Answers