CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
dreyzz
dreyzz

Reputation: 99

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

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?

Upvotes: 1

Views: 10760

Answers (1)

tom_h
tom_h

Reputation: 905

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

Upvotes: 2

Related Questions