How does one style a specific row on v-data-table? [Vuetify]

Question

All I'm trying to do is for the given row that contains an entry that is equal to lowestEntry, change the background color.

<v-col cols="8">
        <v-data-table
          :loading="loadEntryTable"
          loading-text="A procurar dados..."
          :headers="this.entryheaders"
          :items="this.stockentries"
          :items-per-page="10"
        >
        //Have tried using the v-slot.item to achieve it but no success
</v-data-table>
</v-col>

I want to change the tr background color do green. Sort of highlight it when ìtem.id_entry == lowestEntry["id_entry"].

Answer 1

If you're using newer versions of vuetify, you have access to item-class as a property of the v-data-table. This will provide the item as the first argument to the callback function.

<v-data-table
....
:item-class="itemRowBackground"
></v-data-table>

And then define the function which will return the class name:

methods: {
  itemRowBackground: function (item) {
     return item.protein > 4.2 ? 'style-1' : 'style-2'
  }
}

Then just define the classes for style-1 and style-2:

.style-1 {
  background-color: rgb(215,215,44)
}
.style-2 {
  background-color: rgb(114,114,67)
}

Here's a code pen for this example that will work for you codepen example

Edit If :item-class is not available for your current version of Vuetify, or you need more control over the row other than just binding a class, you'll have to use the item slot and bind the class/style/etc manually.

Target the item slot and bind the class to the row manually:

<v-data-table>
    <template #item="{ item }">
      <tr :class="item.id_entry === lowestEntry['id_entry'] ? 'custom-bg' : ''">
        //manually define all of your <td> elements now.
      </tr> 
    </template>
<v-data-table>

Alternatively, you can pass :class="customRowClass(item, lowestEntry)" and define the customRowClass method:

methods: {
  customRowClass (item, lowestEntry) {
    return item.id_entry === lowestEntry['id_entry'] ? 'custom-bg' : ''
  }
}

Answer 2

Based on totalhacks suggestion, the new vuetifys item-class:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  methods: {
    row_classes(item) {
        if (item.calories < 200) {
          return "orange";
        } 
    }
  },
  data () {
    return {
      singleSelect: false,
      selected: [],
      headers: [{text: 'Dessert', value: 'name'},{ text: 'Calories', value: 'calories' },],
      desserts: [{name: 'Frozen Yogurt',calories: 159,},{name: 'Ice cream sandwich',calories: 237,},{name: 'Eclair',calories: 262,},{name: 'Cupcake',calories: 305,},],
    }
  },
})

.orange {
  background-color: orange;
}

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css'>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js'></script>

<div id="app">
  <v-app id="inspire">
    <v-data-table
      v-model="selected"
      :headers="headers"
      :items="desserts"
      :item-class= "row_classes"                  
    >
    </v-data-table>
  </v-app>
</div>