Vuetify пример таблицы

Таблица взята из официальной документации vuetify

 <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
    <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" type="text/css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
    <div id="infoUser">
   <v-card>
  <v-card-title>
    Nutrition
    <v-spacer></v-spacer>
    <v-text-field
      append-icon="search"
      label="Search"
      single-line
      hide-details
      v-model="e3"
    ></v-text-field>
  </v-card-title>
  <v-data-table
      v-bind:headers="headers"
      v-model="items3"
      v-bind:search="e3"
      select-all
    >
    <template slot="items" scope="props">
      <td>
        <v-checkbox
          hide-details
          primary
          v-model="props.item.value"
        ></v-checkbox>
      </td>
      <td>
        <v-edit-dialog
          @open="props.item._name = props.item.name"
          @cancel="props.item.name = props.item._name || props.item.name"
          lazy
        > {{ props.item.name }}
          <v-text-field
            slot="input"
            label="Edit"
            v-bind:value="props.item.name"
            v-on:change="val => props.item.name = val"
            single-line counter="counter"
          ></v-text-field>
        </v-edit-dialog>
      </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.sodium }}</td>
      <td class="text-xs-right">{{ props.item.calcium }}</td>
      <td>
        <v-edit-dialog
          class="text-xs-right"
          @open="props.item._iron = props.item.iron"
          @cancel="props.item.iron = props.item._iron || props.item.iron"
          large
          lazy
        >
          <div class="text-xs-right">{{ props.item.iron }}</div>
          <div slot="input" class="mt-3 title">Update Iron</div>
          <v-text-field
            slot="input" 
            label="Edit" 
            v-bind:value="props.item.iron" 
            v-on:blur="val => props.item.iron = val"
            single-line
            counter
            autofocus
          ></v-text-field>
        </v-edit-dialog>
      </td>
    </template>
  </v-data-table>
</v-card>
    </div>
    <script>
    var infoUser = new Vue({
      delimiters: ['{', '}'],
      el:'#infoUser',
      data:{
      },
      methods
    })
    </script>

Не пойму, как тут должен строится дом... Покажите пожалуйста пример рабочей таблицы.