How to change background color of selected row in Vuetify Datatable?

Question

In my Vuetify data table, I want to change the background color of the clicked row. In the docs, i see that an event emitted named click:row, but it just returns the data of the row. How can detect the row field and change its css?

Answer 1

Store the index of the clicked row in a data property:

data () {
    return {
      selectedRow: null
    }
}

And then apply a style conditionally. You'll need to use slots to do this, see the codepen below:

 <tr :class="key === selectedRow ? 'custom-highlight-row' : ''">

https://codepen.io/huntleth/pen/eYOrWog