How do I integrate checkboxes with v-data-table - Vuetify

Question

I have a simple V-data-table. I am trying to add checkboxes for each row in the table.

My table looks like this.

<v-data-table :headers="headers" :items="rows"item-key="name" :search="search">
    <template v-slot:item="props">
        <tr >
            <td v-for="(prop, key) in props.item" :key="key" @click="onClickItem(key, props.item[key])">
                {{props.item[key]}}     
            </td>
            <td>
                <!-- Some icons for editing rows -->        
            </td>
        </tr>
    </template> 
    <template v-slot:top>
         <!-- A dialog box for editing rows -->
    </template>
</v-data-table>

I tried to use the official guide for doing this, however all my rows get shifted to the right by 1 position & I only see only one checkbox even though I have multiple rows, that too, on the header! How should I proceed?

@Rikkas I am a bit new to VueJs & Vuetify. Could you please explain how I could pass 'show-select' as a prop? — Sameer Pusegaonkar
@HansFelixRamos I simply followed the documentation. Just added 'show-select' in the v-data-table tag — Sameer Pusegaonkar

Manoj Manoj · Accepted Answer · 2020-05-27T07:39:14

Here is the working codepen similar to official doc https://codepen.io/manojkmishra/pen/MWadELG

another way https://codepen.io/manojkmishra/pen/bGVyoaw

TEMPLATE PART:

 <div id="app">
  <v-app id="inspire">
  <h5>Selected: {{selected}}</h5>
  <v-data-table
  v-model="selected"
  :headers="headers"
  :items="desserts"
  item-key="name"
  show-select
  class="elevation-1"
  >
  </v-data-table>
 </v-app>
</div>

SCRIPT PART:

new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
  singleSelect: false,
  selected: [],
  headers: [
    {
      text: 'Dessert (100g serving)',
      align: 'start',
      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' },
  ],
  desserts: [
    {
      name: 'Frozen Yogurt',
      calories: 159,
      fat: 6.0,
      carbs: 24,
      protein: 4.0,
      iron: '1%',
    },
    {
      name: 'Ice cream sandwich',
      calories: 237,
      fat: 9.0,
      carbs: 37,
      protein: 4.3,
      iron: '1%',
    },
    {
      name: 'Eclair',
      calories: 262,
      fat: 16.0,
      carbs: 23,
      protein: 6.0,
      iron: '7%',
    },
  ],
 }
},
})

How do I integrate checkboxes with v-data-table - Vuetify

1 Answers