Vue data table expandable row issue

Question

Problem: I cannot add an expandable row in my data table. It is not showing.

Goal: I need to populate some data in my data table with an expandable row.

What I have tried: I have followed the documentation, here is the reproducible code that you can access on codepen. You can see after uncommenting the code which populates my Data table, the expandable row isn't visible anymore.

Code used to add expandable row:

     <template v-slot:top>
    <v-toolbar flat>
      <v-toolbar-title>Data</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-switch v-model="singleExpand" label="Single expand" class="mt-2"></v-switch>
    </v-toolbar>
  </template>
  <template v-slot:expanded-item="{ headers, item }">
    <td :colspan="headers.length">More info about {{ item.name }}</td>
  </template>

Code used to add data in Data table:

<!--       <template  v-slot:body="props">
    <tr v-for="index in props.items" :key="index.Info">
      <td id="table-data" v-for="header in headers" :key="header.Info" class="text-left">
        {{ index.packetParsed[header.value] }}
      </td> 
    </tr>      
  </template> -->

Note: Please note that I cannot change the structure of data as it is retrieved from the database.

Answer 1

as you have mentioned that the structure of data can't be changed

in the codepen which you have provided, there I saw data as

dataFromDatabase: [ { packetParsed: { Name: "Bill", Address: "NY", Contact: "1234", Info: "Mgr", }, packetParsed: { Name: "Tom", Address: "CA", Contact: "9876", Info: "Sr Mgr", }, }, ],

can you please explain why the data has an object which contains objects with the same key (Note: we can read only the last object if all the keys are same when you read )

as per the documentation of vuetify expandable table, items prop should be an array with unique item objects .

but you have provided an array with a single object( which has multiple objects with same key )