Vuetify: How to add an extra item row in v-data-table?

Question

I am trying to add an extra row at the bottom of my v-data-table. The extra row is a sum row, but instead of doing the calculation on the frontend I need to pull the sum from an array which is given from an api. So my question is how can I map the sum array as an extra row at the bottom of the table? I understand the general structure is like this but I don't know how to complete it. Any help would be appreciated, thank you!

<v-data-table>
<template v-for="s in sum">
</template>
</v-data-table>

Answer 1

You can use the body.append slot

Here is an altered example based on an example from vuetify docs

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
    >
      
      <template v-slot:body.append>
        <tr>
          <td/>
          <td>{{total.calories}}</td>
          <td>{{total.fat}}</td>
          <td>{{total.carbs}}</td>
          <td>{{total.protein}}</td>
          <td/>
        </tr>
      </template>
      
    </v-data-table>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
        // .... etc
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%',
        },
      ],
    }
  },
  computed:{
    total(){
      const sums = {
          calories: 0,
          fat: 0,
          carbs: 0,
          protein:0,
      }
      this.desserts.forEach(({calories, fat, carbs, protein}) => {
         sums.calories += calories;
         sums.fat += fat;
         sums.carbs += carbs;
         sums.protein += protein;
      })
      return sums
    }
  }
})