Adding class to <td> and <tr> in Vuetify data-table

Question

I want to give the tr and td a class name in my Vuetify data-table. But what am I doing wrong as this isn't working while I see everywhere this solution.

<template>
  <v-data-table :headers="headers" :items="customers" class="elevation-1">
    <template slot="items" slot-scope="props">
      <td class="test">{{ props.item.name}}</td>
      <td class="test1">{{ props.item.telephone}}</td>
      <td class="test2">{{ props.item.email}}</td>
      <td class="test3">{{ props.item.website}}</td>
      <td class="test4">{{ props.item.location}}</td>
    </template>
  </v-data-table>
</template>

Answer 1

As mentioned by a member of the vuetify core team, the preferred way to override the rendering of individual table cells is to use slots, as defined at the bottom of the docs.

Here's an example, where one of the properties of an item is rendered using a chip, while the rest of the table's columns use the default rendering.

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    class="elevation-1"
  >
    <template v-slot:item.calories="{ item }">
      <v-chip :color="getColor(item.calories)">
        {{ item.calories }}
      </v-chip>
    </template>
  </v-data-table>
</template>

Note that the content inside the slot's <template> ends up being rendered inside the data table's <td> element, so you can't use this approach to add a class to the <td> element itself. But when you're only changing the markup for one column and would prefer to use the default rendering for all other columns, this is a useful tradeoff.

Answer 2

Here is the working codepen https://codepen.io/manojkmishra/pen/QWjRpbP VUE TEMPLATE:

<div id="app">
<v-app id="inspire">
    <div class="px-2">
        <h2>Simple v-data-table with class in td</h2>
        <v-data-table :headers="headers"  :items="desserts"           class="elevation-4">
            <template slot="items" slot-scope="props">
              <td class="test">{{ props.item.name }}</td>
              <td class="test1">{{ props.item.calories }}</td>
              <td class="test2 ">{{ props.item.fat }}</td>
              <td class="test3">{{ props.item.carbs }}</td>
              <td class="test4">{{ props.item.protein }}</td>
              <td class="test5">{{ props.item.iron }}</td>
            </template>
        </v-data-table>
    </div>
</v-app>

CSS:

.test{color:red}
.test1{color:blue}
.test2{color:green}
.test3{color:yellow}
.test4{color:brown}
.test5{color:black}

VUE SCRIPT:

Vue.config.devtools = false;
Vue.config.productionTip = false;
console.clear();
new Vue({
el: "#app",
data () {
  return {
    headers: [
      {
        text: 'Dessert (100g serving)',
        align: 'start',
        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: [
      {
        name: 'Frozen Yogurt',
        calories: 200,
        fat: 6.0,
        carbs: 24,
        protein: 4.0,
        iron: '1%',
      },
      {
        name: 'Ice cream sandwich',
        calories: 200,
        fat: 9.0,
        carbs: 37,
        protein: 4.3,
        iron: '1%',
      },
      {
        name: 'Eclair',
        calories: 300,
        fat: 16.0,
        carbs: 23,
        protein: 6.0,
        iron: '7%',
      },
      {
        name: 'Cupcake',
        calories: 300,
        fat: 3.7,
        carbs: 67,
        protein: 4.3,
        iron: '8%',
      },
      {
        name: 'Gingerbread',
        calories: 400,
        fat: 16.0,
        carbs: 49,
        protein: 3.9,
        iron: '16%',
      },
      {
        name: 'Jelly bean',
        calories: 400,
        fat: 0.0,
        carbs: 94,
        protein: 0.0,
        iron: '0%',
      },
      {
        name: 'Lollipop',
        calories: 400,
        fat: 0.2,
        carbs: 98,
        protein: 0,
        iron: '2%',
      },
      {
        name: 'Honeycomb',
        calories: 400,
        fat: 3.2,
        carbs: 87,
        protein: 6.5,
        iron: '45%',
      },
      {
        name: 'Donut',
        calories: 500,
        fat: 25.0,
        carbs: 51,
        protein: 4.9,
        iron: '22%',
      },
      {
        name: 'KitKat',
        calories: 500,
        fat: 26.0,
        carbs: 65,
        protein: 7,
        iron: '6%',
      },
    ],
  }
}
});