After carefully examining the question, I stumbled upon an innovative solution to prevent hardcoding the data structure in the markup. By utilizing the content of the headers, you can dynamically generate the item template through a v-for loop like the snippet below:

<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>

Although this question is dated, I encountered the same issue and chanced upon this page. I was able to resolve my problem by adjusting Bart's code to align with the most recent 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>

Try out this method that I have successfully used before. To understand how it works, delve into the concept of dynamic components in Vue.js.

Beware: It may seem overwhelming to configure each data-bound item individually, but it could prove beneficial if dealing with multiple data tables. Stay persistent and don't give up!

To customize the headers, utilize the headers scoped-slot. Refer to the documentation for detailed information here. Explore the scoped slots tab to understand your customization options.

For configuring columns, employ dynamic components. As a suggestion, decide on the component based on the type of column in your data table - for instance, return <td>text</td> for text columns. The choice is yours when it comes to configuration.

<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.
    }
  }
}

I'm not sure about your question, but it seems like you're looking to create a Vuetify table.

Here is the template for that:

<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>

And here is the accompanying script:

<script>
  export default {
    data () {
      return {
        headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'left',
            sortable: false,
            value: 'name'
          },
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' }
        ],
        items: [
          // Data entries omitted for brevity
        ]
      }
    }
  }
</script>

This content is taken directly from the Vuetify documentation.

If you want to use dynamic headers, simply adjust the headers property accordingly.

I suggest utilizing Vuetify multiple select in conjunction with your table. Populate the multiple select with table columns and let the user select or deselect them. Then in the data-table's :headers, use the corresponding property from the multiple select.

For example, if the multiple select is bound to e6 (property name), then the v-data-table will appear as follows:

<v-data-table
    :headers="e6" /*this changed*/
    :items="items"
    hide-actions
    class="elevation-1"
  >

If you're looking for a solution regarding resizing table columns in vuetify 2, I have created a sample codepen example for reference.

Check out the codepen example here

Sample Code:

HTML

<div id="app">

  <v-app id="inspire">
    <v-container>
      <v-row><v-btn @click="add">ADD</v-btn><v-btn @click="remove">REMOVE</v-btn></v-row>
    <v-data-table
      :headers="headers"
      :items="desserts"

    >
      <template v-slot:body="props">
       <tbody>
        <tr v-for="item in props.items">
          <td v-for="(header, index) in headers">
            <span v-if="index">{{ item.cols[index-1] }}</span>
            <span v-else>{{ item.name }}</span>
          </td>
        </tr>
       </tbody>
      </template>
    </v-data-table>


      </v-container>
  </v-app>
</div>

JS

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      index: 0,
      headers: [
        {
          text: 'Name',
          align: 'start',
          sortable: true,
          value: 'name',
        },
        { text: '1', value: 'calories', align: 'start' },
        { text: '2', value: 'fat', align: 'start' },
        { text: '3', value: 'carbs', align: 'start' },
        { text: '4', value: 'protein', align: 'start' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          cols:[0,0,0,0]
        },
        {
          name: 'Ice cream sandwich',
          cols:[0,0,0,0]
        },
        {
          name: 'Eclair',
          cols:[0,0,0,0]
        },
        {
          name: 'Cupcake',
          cols:[0,0,0,0]
        },
        {
          name: 'Gingerbread',
          cols:[0,0,0,0]
        },
        {
          name: 'Jelly bean',
          cols:[0,0,0,0]
        },
        {
          name: 'Donut',
          cols:[0,0,0,0]
        },
        {
          name: 'KitKat',
          cols:[0,0,0,0]
        },
      ],
    }
  },
  mounted(){
    this.index = this.headers.length
  },
  methods:{
    add(){
      this.desserts.forEach(item => { item.cols.push(0) })
      this.headers.push({text:this.index, value:this.index})
      this.index++
    },
    remove(){
      let header = this.headers.pop()
      this.desserts.forEach(item => { item.cols.pop() })
      this.index--
    },

  }
})