Dynamically building a table using vuetifyJS data table
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>
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>
Here is something you can try, i know it works as i have used a similar approach. But to understand how this works, read about dynamic components in vue js.
Warning : You have to configure every single data bound item yourself and it can be overwhelming, but if you have many data table it may be worth it. dont give up :)
The headers can be configured using the headers scoped-slot. Read the documentation for more details here. Look for the scoped slots tab and see what you could configure.
And now for the column you got to configure using dynamic components. That said, return the component based on the type of the data table column, say if text then return <td>text</td> and so on. Am simply laying out an idea for you and you got to configure the way you want to.
<v-data-table v-model="tableRowsSelected" :items="tableItems" :headers="tableHeaders" :pagination.sync="tablePagination" :rows-per-page-items="tablePaginationDropdown" item-key="name" class="elevation-1"> <template v-if="tableHeaders" slot="headers" slot-scope="row"> <tr> <th v-for="header in row.headers" :key="header.text" :class="['column sortable', tablePagination.descending ? 'desc' : 'asc', header.value === tablePagination.sortBy ? 'active' : '']" @click="changeSort(header.value)" > <v-icon small>arrow_upward</v-icon> {{ header.text }} </th> </tr> </template> <template template slot="items" slot-scope="row"> <tr> <component v-for="header in Object.keys(row.item)" :key="header" :is="getComponentByColumnType(header, row.item)"></component> </tr> </template>export default {data () { return { tableItems: [] } computed: { tableHeaders: function () { } tablePagination: functin() {} // and other properties here or you could simply configure them as part of data. }, method:{ getComponentByColumnType(header, data) { // return the component per your column type here. } }}