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+arrows but that is another question.

I have tried to update the array I send into the parameter "value" but the rows never get selected in the ui.

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    item-key="id"
    class="elevation-1"
    :value="selectedRows"
    @click:row="rowClicked"
  ></v-data-table>
</template>

<script>
export default {
  data() {
    return {
      selected: [],
      selectedRows: [],
      headers: [
        {
          text: "Dessert (100g serving)",
          align: "left",
          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: [
        {
          id: 1,
          name: "Frozen Yogurt",
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: "1%"
        },
        {
          id: 2,
          name: "Ice cream sandwich",
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: "1%"
        },
        {
          id: 3,
          name: "Eclair",
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: "7%"
        },
        {
          id: 4,
          name: "Cupcake",
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: "8%"
        },
        {
          id: 5,
          name: "Gingerbread",
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: "16%"
        },
        {
          id: 6,
          name: "Jelly bean",
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: "0%"
        },
        {
          id: 7,
          name: "Lollipop",
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: "2%"
        },
        {
          id: 8,
          name: "Honeycomb",
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: "45%"
        },
        {
          id: 9,
          name: "Donut",
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: "22%"
        },
        {
          id: 10,
          name: "KitKat",
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: "6%"
        }
      ]
    };
  },
  methods: {
    rowClicked(row) {
      this.swapSelectionStatus(row.id);
      this.log(row);
    },
    swapSelectionStatus(keyID) {
      if (this.selectedRows.includes(keyID)) {
        this.selectedRows = this.selectedRows.filter(
          selectedKeyID => selectedKeyID !== keyID
        );
      } else {
        this.selectedRows.push(keyID);
      }
    },
    select(e) {
      this.log(e);
    },
    log(logItem) {
      /* eslint-disable no-console */
      console.log(logItem);
    }
  }
};
</script>

Carol Skelly · Accepted Answer · 2019-12-18 14:03:31Z

8

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

edited Dec 18, 2019 at 14:03

answered Dec 13, 2019 at 13:26

Carol Skelly

364k92 gold badges741 silver badges651 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fthi.a.Abadi · Accepted Answer · 2019-12-26 14:25:26Z

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"}]
  }
}

answered Dec 26, 2019 at 14:25

Fthi.a.Abadi

3222 silver badges8 bronze badges

Comments

Hassan Faghihi · Accepted Answer · 2023-01-08 15:10:00Z

Based on this answer: Vuetify - How to highlight row on click in v-data-table

You can change it, and remove the single-select attribute, in the end, you also will need to make rows toggleable, by using row.isSelected instead of true in row.select(true)

<div id="app">  
  <v-app id="inspire">
    <div>{{selectedId}}</div> 
    <v-data-table
      @click:row="rowClick" 
      item-key="name" 
      single-select
      :headers="headers"
      :items="desserts"
      :items-per-page="5"
    ></v-data-table>
  </v-app>
</div>

You can find the full solution below and for a single select check the link at top https://codepen.io/deadManN/pen/RwBKLpv

Also I give the credit to Nicolai Nikolai's answer, as without it, I wouldn't know there is a row argument, so I couldn't debug it to see its extra properties

Note: as the answer suggested, if you are using <style scoped> you also need /deep/, or ::v-deep in your scoped CSS style to be able to override the Vuetify styles

Collectives™ on Stack Overflow

Select rows in Vuetify Data Table

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related