Add style to first row of v-data-table in vuetify - css

Question

I have defined the table as below using vuetify data table component. The issue I am facing here is I not able to figure out how can I make the first row of the table bold. The first item record to be bold. Please help find a solution.
I am using vuetify 1.0.5.
<v-data-table>
:headers="headers"
:items="agents"
hide-actions
class="agent-table"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td>{{ props.item.address }}</td>
</template>
</v-data-table>

Answer 1

use v-if to search for first row index or something unique about first row and bind it to style or class. Few more ways listed here reference
<template slot="items" slot-scope="props">
<tr v-if="unique condition" v-bind:style="{ 'font-weight': 'bold'}>
<td>{{ props.item.name }}</td>
<td>{{ props.item.address }}</td>
</tr>
<tr v-else>
<td>{{ props.item.name }}</td>
<td>{{ props.item.address }}</td>
</tr>
</template>

Answer 2

Another approach that can be used is using computed properties to insert the index to each element in the data. This can be useful if you need to update the table later on as computed properties are updated automatically.
For example, say the item data is stored in items.
data() {
return {
items: [{
fruit_name: 'Banana',
calories: 30
}, {
fruit_name: 'Apples',
calories: 40
}]
}
}
Here, every element to be itself plus additional attribute, i.e. index. Element addition is achieved using spread operator. All mapped elements are combined into single array using functional-programming style of map function.
computed: {
itemsWithIndex: () {
return this.items.map(
(items, index) => ({
...items,
index: index + 1
}))
}
}
Note: index: index+1 will make the numbering start from 1.
Then, inside headers data needed for v-data-table, you can make reference to index item data for numbering.
data() {
return {
items: {
...
},
headers: [{
text: 'Num',
value: 'index',
},
{
text: 'Fruit Name',
value: 'fruit_name',
},
{
text: 'Calories',
value: 'calories',
}
]
}
}
Codepen example: https://codepen.io/72ridwan/pen/NWPMxXp
Reference

Answer 3

<template slot="items" slot-scope="props">
<tr v-bind:class="getClass(props.item.name)">
<td>{{ props.item.name }}</td>
<td>{{ props.item.address }}</td>
</tr>
</template>
<script>
export default {
methods: {
getClass: function (name) {
if (name == 'XYZ') return 'header2';
},
}
}
</script>
<style>
.header2 {
// added style here
}
<style>