Unable to make an expandable v-data-table in vuetify3?

Question

I am trying to make an expandable v-data-table in vue3 and vuetify3. The normal data table worked fine. However when I am trying an expandable v-data-table. It does not display anything but loads data as appears from the pagination.

Updated code: All of the rows expand together now

<script setup>
import { ref } from 'vue'
import currencyHelpers from '../lib/currencyHelpers';

const info = ref([]);
const currencies = ref([]);
const headers = [
  { title: 'Name', value: 'currencydefinition.fullyqualifiedname' },
  { title: 'ID', value: 'currencydefinition.currencyid' },
  { title: 'ID rego fee', value: 'currencydefinition.idregistrationfees' },
  { title: 'ID import fee', value: 'currencydefinition.idimportfees' },
  { title: 'Converter Name', value: 'currencydefinition.gatewayconvertername' },
  { title: 'Proof Protocol', value: 'currencydefinition.proofprotocol' },
  { title: 'Options', value: 'currencydefinition.options' }
];
const expanded = ref(null);

(async () => {
  info.value = await currencyHelpers.getInfo();
  currencies.value = await currencyHelpers.listCurrencies();
})();

</script>

<template>
  <v-layout>
    <v-row>
      <v-col>
    <h1>Currencies</h1>
    <v-container class="mx-auto pa-6">
      <v-data-table 
      :items="currencies" 
      :headers="headers" 
      item-value="title"
      v-model:expanded="expanded"
      show-expand
    >
      <!-- expanded card content -->
      <template v-slot:top>
        <v-toolbar flat>
          <v-toolbar-title>Version {{ info.VRSCversion }}</v-toolbar-title>
        </v-toolbar>
      </template>

        <template v-slot:expanded-row="items">
          <tr>
            <td :colspan="headers.length">
              More info about {{ headers }}
            </td>
          </tr>
        </template>
    </v-data-table>

    </v-container>
    </v-col>
    </v-row>
    </v-layout>

</template>

<style scoped>

</style>

This is the JSON response btw:

More info about [ { "title": "Name", "value": "currencydefinition.fullyqualifiedname" }, { "title": "ID", "value": "currencydefinition.currencyid" }, { "title": "ID rego fee", "value": "currencydefinition.idregistrationfees" }, { "title": "ID import fee", "value": "currencydefinition.idimportfees" }, { "title": "Converter Name", "value": "currencydefinition.gatewayconvertername" }, { "title": "Proof Protocol", "value": "currencydefinition.proofprotocol" }, { "title": "Options", "value": "currencydefinition.options" } ]

Something like this happens as in the screenshot below:

Answer 1

There are a few issues I notice in your code:

1. You're using expandedRow.value inside the toggleExpansion method, but expandedRow is not defined. Instead, you should use expanded.

2. In the expanded row template, you're trying to access headers.title, which is incorrect. You should iterate over the headers array to display the titles.

   <template>
     <h1>Currencies</h1>
     <v-container variant="outlined" class="mx-auto pa-6 transition-swing overflow-x-auto">
       <v-data-table 
         :items="currencies" 
         :headers="headers" 
         item-value="title"
         v-model:expanded="expanded"
         show-expand
       >
         <!-- expanded card content -->
         <template v-slot:top>
           <v-toolbar flat>
             <v-toolbar-title>Expandable Table</v-toolbar-title>
           </v-toolbar>
         </template>
   
         <v-expand-transition>
           <template v-slot:expanded-row="{ item }">
             <tr>
               <td :colspan="headers.length">
                 More info about {{ item.currencydefinition.fullyqualifiedname }}
               </td>
             </tr>
           </template>
         </v-expand-transition>
       </v-data-table>
     </v-container>
   </template>
   
   <script setup>
   import { ref } from 'vue'
   import currencyHelpers from '../lib/currencyHelpers';
   
   const info = ref([]);
   const currencies = ref([]);
   const headers = [
     { text: 'Name', value: 'currencydefinition.fullyqualifiedname' },
     { text: 'ID', value: 'currencydefinition.currencyid' },
     { text: 'ID rego fee', value: 'currencydefinition.idregistrationfees' },
     { text: 'ID import fee', value: 'currencydefinition.idimportfees' },
     { text: 'Converter Name', value: 'currencydefinition.gatewayconvertername' },
     { text: 'Proof Protocol', value: 'currencydefinition.proofprotocol' },
     { text: 'Options', value: 'currencydefinition.options' }
   ];
   const expanded = ref([]);
   
   (async () => {
     info.value = await currencyHelpers.getInfo();
     currencies.value = await currencyHelpers.listCurrencies();
   })();
   
   </script>