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

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>

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

<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>