Vuetify data table slot group.summary

user_4138732 0
Viewed 642

I am working with a vuetify data table, I am using the groub-by slot to group my items either by category or location that is working fine. What I am trying to do now is add a summary row for each group.

this is my current code for the grouping and attempt at summary row

 <v-data-table
          v-if="reportType === 'Category' || reportType === 'Location'"
          :headers="headers"
          :items="assets"
          disable-pagination
          disable-filtering
          hide-default-footer
          disable-sort
          :group-by="`${reportType.toLowerCase()}Name`"
          class="elevation-1">
        <template v-slot:group="{ items }">
          <tr>
            <td class="text-xs-right" :colspan="fixGroupByHeaders()"><strong>{{ getGroupByName(items[0]) }}</strong></td>
          </tr>
          <tr v-for="(item) in items" :key="item.id">
            <td v-for="(header, index) in headers" :key="index">
              {{ (getTotalCost(item, header.value) || item[header.value]) }}
            </td>
          </tr>
        </template>
        <template v-slot:group.summary="{ items }">
          <tr>
            <th class="title">Totals</th>
          </tr>
        </template>
      </v-data-table>

the groupby is working but th e summary is not .. I would like to know what I am doing wrong and how can I fix it to where I get the summary row using the grouby.summary slot found on the vuetify data table api.

EDIT: I understand about the group.summary slot and I can easily make it if the report headers were static, in this case they are not.

So, I created a CodeSandbox example that I hope will show you what I am trying to achieve and as I said the headers array is dynamic.

Another thing is I added an array called columnsToTotal to show what columns need a total added if they are present in the headers array.

vuejs2 vuetify.js
2 Answers

You can't use both group and group.summary slots simultaneously.

group.header and group.summary slots is just a "sub-slots" of group slot. When you are overriding group slot, the "sub-slots" simply does not exist.

I'm not clearly understand what are you trying to achieve, but perhaps this tip will be useful to you.

If you want to customize...

  1. ...your group header, use group.header slot
  2. ...your group rows, use item slot
  3. ...your group footer, use group.summary slot
  4. ...the whole group, use group slot
user_92752240

This is what I did to get my summary row. itemTotal is a method.

<template v-slot:group.summary="{ items }">
    <th colspan="7"></th>
    <th>
       <span class="ml-10">
          Charge Total: {{ itemTotal(items) }}
       </span>
    </th>
</template>
user_178431690
Related