Vuetify - How to highlight row on click in v-data-table

Question

How to highlight the selected row in v-data-table? i tried to modified the data by adding flag variable selected in the Example

In the above example cli

Answer 1

Your solution does not work because the selected property is added to the data when you click on a row, but when data is reloaded then the data without a selected property replaces the old data.

So to make it work:
- add an id field to each item in the list of desserts
- add an selectedId with default value -1 to your data
- change the line of code in method activerow to this.selectedId = item.id;
- change the class attribute in the <tr> to :class="{'primary': props.item.id===selectedId}"

If on reload only your list of desserts changes, and the new list contains an item with the same id as selected before, then the same row should become selected.

I forked the codepen example to show you how this works:
https://codepen.io/anon/pen/PrWjxQ?editors=1010

Answer 2

How to make the row clickable is allready explained by others but not how to toggle the row selection. The selection state can be checked through isSelected and then set accordingly.

To style the selected row properly you need something more to take into account: the dark and light theme and the hover css pseudo class - which is overridden through the important tag so we need to restyle it.

Check out the Codepen Example

methods: {
    rowClick: function (item, row) {      
      let selectState = (row.isSelected) ? false : true;
      row.select(selectState);
    }
}


<style>
    .theme--light.v-data-table tbody tr.v-data-table__selected {
        background: #f5c17d70 !important;
    }
    .theme--dark.v-data-table tbody tr.v-data-table__selected {
        background: #a17b4970 !important;
    }
    .theme--dark.v-data-table tbody tr.v-data-table__selected:hover {
        background: #a17b49c2 !important;
    }
    .theme--light.v-data-table tbody tr.v-data-table__selected:hover {
        background: #ffd296d2 !important;
    }
</style>

Answer 3

<v-data-table @click:row="rowClick" item-key="name" single-select ...

methods: {
    rowClick: function (item, row) {      
      row.select(true);
      //item.name - selected id
    }
}

<style>
  tr.v-data-table__selected {
    background: #7d92f5 !important;
  }
</style>

or

<style scoped>
  /deep/ tr.v-data-table__selected {
    background: #7d92f5 !important;
  }
</style>

Example https://codepen.io/nicolai-nikolai/pen/GRgLpNY