How to combine a Vuetify data table and Vuetify list?

Question

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>{{ props.item.name }}</v-list-tile-title>
                <v-list-tile-sub-title class="text--primary">{{ props.item.iron }}</v-list-tile-sub-title>
                <v-list-tile-sub-title>{{ props.item.calories }}</v-list-tile-sub-title>
              </v-list-tile-content>

              <v-list-tile-action>
                <v-list-tile-action-text>{{ props.item.fat }}</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 "{{ search }}" found no results.
        </v-alert>

      </v-data-table>

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

Answer 1

DEMO: https://codepen.io/anon/pen/ZRwLgX?editors=0010

You don't need to use Vuetify List to achieve that. You can style the content inside your Vuetify data table rows as per your requirement using Typography classes. I've added onclick listener on the tr tag that toggles the value key of the particular row item which is bound to the star icon.

So inside the methods in your JS I've added the toggle function:

 toggle(name) { let index = this.desserts.findIndex(e => e.name == name); if (index > -1) { this.desserts[index].value = !this.desserts[index].value; } } 

And inside your data-table template, each row item is as follows:

 <tr style="cursor: pointer" @click="toggle(props.item.name)"> <td> <div class="body-2"> {{props.item.name}} </div> <div class=""> {{props.item.iron}} </div> <div class=""> {{props.item.calories}} </div> </td> <td> <div class="body-2" style="textAlign: center"> {{props.item.fat}}<br/> <v-icon v-if="props.item.value" color="yellow darken-2">star</v-icon> <v-icon v-else color="grey lighten-1">star_border</v-icon> </div> </td> </tr> 

I've used only 2 header items and have commented the rest. You can even choose to hide the header completely by using hide-headers props in your data-table