How does one style a specific row on v-data-table? [Vuetify]
You could use v-bind: on class and create a method to change the tr background color.
Please below working code snippet
new Vue({
el: '#app',
//vuetify: new Vuetify(),
methods: {
getClass(calories) {
//Here you can put your condition based on your logic...
if (calories == 237) return 'orange';
else if (calories == 305) return 'green';
},
},
data() {
return {
headers: JSON.parse('[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}]'),
desserts: JSON.parse('[{"name":"Frozen Yogurt","calories":159,"fat":6,"carbs":24,"protein":4,"iron":"1%"},{"name":"Ice cream sandwich","calories":237,"fat":9,"carbs":37,"protein":4.3,"iron":"1%"},{"name":"Eclair","calories":262,"fat":16,"carbs":23,"protein":6,"iron":"7%"},{"name":"Cupcake","calories":305,"fat":3.7,"carbs":67,"protein":4.3,"iron":"8%"},{"name":"Gingerbread","calories":356,"fat":16,"carbs":49,"protein":3.9,"iron":"16%"},{"name":"Jelly bean","calories":375,"fat":0,"carbs":94,"protein":0,"iron":"0%"},{"name":"Lollipop","calories":392,"fat":0.2,"carbs":98,"protein":0,"iron":"2%"},{"name":"Honeycomb","calories":408,"fat":3.2,"carbs":87,"protein":6.5,"iron":"45%"},{"name":"Donut","calories":452,"fat":25,"carbs":51,"protein":4.9,"iron":"22%"},{"name":"KitKat","calories":518,"fat":26,"carbs":65,"protein":7,"iron":"6%"}]')
}
}
})td {
border-bottom: 1px solid #FFF;
}
.orange {
background-color: orange;
}
.green {
background-color: green;
}<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<div id="app">
<v-app>
<v-data-table items-per-page="10" :headers="headers" :items="desserts" >
<template slot="items" slot-scope="props">
<tr v-bind:class="getClass(props.item.calories)">
<td v-for="key in Object.keys(props.item)" :key="key">{{props.item[key]}}</td>
</tr>
</template>
</v-data-table>
</v-app>
</div>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>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' : ''
}
}