How to combine a Vuetify data table and Vuetify list?

I need to use this Vuetify data table but with the layout of this Vuetify list. The list should be searchable and every entry a button.

How to do that?

Here is my result so far: https://codepen.io/anon/pen/ZRqwYG

HTML:

<div id="app">
  <v-app id="inspire">
    <v-card>

      <v-card-title>
        Vuetify Data-Table + Vuetify List
        <v-spacer></v-spacer>
        <v-text-field
          v-model="search"
          append-icon="search"
          label="Search"
          single-line
          hide-details
        ></v-text-field>
      </v-card-title>

      <v-data-table
        :headers="headers"
        :items="desserts"
        :search="search"
      >

        <template slot="items" slot-scope="props">
              <v-list-tile-content>
                <v-list-tile-title></v-list-tile-title>
                <v-list-tile-sub-title class="text--primary"></v-list-tile-sub-title>
                <v-list-tile-sub-title></v-list-tile-sub-title>
              </v-list-tile-content>

              <v-list-tile-action>
                <v-list-tile-action-text></v-list-tile-action-text>
                <v-icon color="grey lighten-1">star_border</v-icon>
              </v-list-tile-action>

         </>    
        </template>

        <v-alert slot="no-results" :value="true" color="error" icon="warning">
          Your search for "" found no results.
        </v-alert>

      </v-data-table>

    </v-card>
  </v-app>
</div>

from How to combine a Vuetify data table and Vuetify list?