Select rows in Vuetify Data Table

Question

I was wondering how can I select/unselect a row by clicking a row in a datatable in Vuetify. It would be even better if I could select a range by using shift+click or shift+arr

Answer 1

I think you want to use v-model instead...

<v-data-table
    :headers="headers"
    :items="desserts"
    item-key="id"
    v-model="selectedRows"
    class="elevation-1">
      <template v-slot:item="{ item }">
        <tr :class="selectedRows.indexOf(item.id)>-1?'cyan':''" @click="rowClicked(item)">
            <td>{{item.name}}</td>
            <td>{{item.calories}}</td>
            <td>{{item.fat}}</td>
            <td>{{item.carbs}}</td>
            <td>{{item.protein}}</td>
            <td>{{item.iron}}</td>
        </tr>
    </template>
</v-data-table>

Demo

---

You can also the Vuetify Data Table select function to toggle the selected rows. This is easier than having custom methods to handle the selection logic.

Demo 2

Answer 2

Do this and it will work fine.

<v-data-table
 :headers="getHeaders"
 :items="fetchDisplayData"
 :search="search"
 flat
 class="elevation-0"
 justify="space-around"
 item-key="user_id"
 v-model="selected"
 show-select
 >
</v-data-table>

Note two things the v-model and show-select Next in the data section of your script add the selected array

data(){
  return {
    selected:[{user_id: "FOR_INSTANCE"}]
  }
}