Dynamically building a table using vuetifyJS data table

Question

I have a table with dynamically changing columns. because of that, the template for the table can't be hardcoded like this -

<template>   <v-data-table     :headers="headers"     :items="items"     hide-actions     class="elevation-1"   >     <template slot="items" slot-scope="props">       **<td>{{ props.item.name }}</td>       <td class="text-xs-right">{{ props.item.calories }}</td>       <td class="text-xs-right">{{ props.item.fat }}</td>       <td class="text-xs-right">{{ props.item.carbs }}</td>       <td class="text-xs-right">{{ props.item.protein }}</td>       <td class="text-xs-right">{{ props.item.iron }}</td>**     </template>   </v-data-table> </template> 

I'm getting the code for this part in the response. can't figure out how to communicate it forward.

Answer 1

I was looking at the same question, found a typical way to avoid hardcoding the data structure in the markup; you can use the content of the headers to script the item template using a v-for loop like this:

<div id="app">    <v-app id="inspire">      <v-data-table        :headers="headers"        :items="desserts"        hide-actions        class="elevation-1"      >        <template slot="items" slot-scope="myprops">          <td v-for="header in headers">          {{ myprops.item[header.value] }}          </td>        </template>      </v-data-table>    </v-app>  </div>

Answer 2

I know this question is old but I have been having same problem and I stumbled across this page. Thankfully I have solved my issue by editing the code given by Bart to meet the latest syntax in Vue 2.

<v-data-table :headers="headers"  :items="myDataObject"  class="elevation-24">     <template v-slot:body="props">       <tr v-for="index in props.items">         <td v-for="header in headers" class="text-left font-weight-black">           {{ index[header.value]}}         </td>       </tr>     </template> </v-data-table>