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

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);
    }
}