How to style a data table td in Vuetify?

Question

Good Afternoon. I'm trying to build a stylized table with "v-data-table", without being used to it. Mainly put style into second or third cell (table, tr, td). I don't find the solution for my problem. Help me, please. thanks.

Answer 1

There are also the possibility to use cellClass, which is part of the headers.

The image is from https://vuetifyjs.com/en/api/v-data-table/#props

As computed property i have:

headers() {
    return [
        { text: this.$t('Name'), align: 'left', sortable: true, value: 'name', cellClass:'select' },
        { text: 'CVR', sortable: false, value: 'cvrno' },
        { text: this.$t('Updated At'), sortable: false, value: 'updatedAt' }
    ]
},

and by v-data-table tag looks like:

<v-data-table
    v-model="selected"
    :headers="headers"
    :items="customerFiltered"
    :loading="loadingCustomers"
    :items-per-page="-1"
    selected-key="id"
    show-select
    hide-default-footer
    fixed-header
>

Answer 2

You can use the item-class attributes to style every row

Property on supplied items that contains item’s row class or function that takes an item as an argument and returns the class of corresponding row

It works as the following :

It takes a function as argument that return a class depending on the row.

If you want to return a specific class depending on the item use it like this :

<template>
   <v-datad-table :item="items" :item-class="getMyClass"></v-data-table>
</template>

<script>
   methods: {
      getMyClass(item){
         // here define your logic
         if (item.value === 1) return "myFirstClass"
         else return "mySecondClass"
      }
   }
</script>

If you want to always give the same class you can just return the class you want to give (note that this is the same as stylized the td of the table using css)

<template>
   <v-data-table :items="items" :item-class="() => 'myClass'"></v-data-table>
</template>

---

In your case, you can add an index to your data using a computed property and added a class based on the index

computed: {
   myItemsWithIndex(){
      retunr this.items.map((x, index) => {...x, index: index})
   }
}

methods: {
   getMyClass(item){
      if(item.index === 2 || item.index === 3) return "myClass"
   }
}

---

Working example

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: () => {
    return {
      items: [
        {name: "foo"},
        {name: "bar"},
        {name: "baz"},
        {name: "qux"},
        {name: "quux"},
        {name: "corge"},
        {name: "grault"},
      ],
      headers: [{ text: 'Name', value: 'name'}],
    }
  },
  
  computed: {
    itemsWithIndex(){
      return this.items.map((item, index) => ({ ...item, index:index }))
    }
  },
  
  methods: {
    getMyClass(item){
      if(item.index === 2  || item.index === 3){
        return "myClass"
      } else return
    }
  }
})

.myClass {
  background: red
}

<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.css" />

<div id="app" data-app>
  <v-data-table :items="itemsWithIndex" :headers="headers" :item-class="getMyClass"></v-data-table>
</div>

Answer 3

I'd bet that what you're trying to achieve can be done using named slots See this example from the docs. Basically, the template tag you see in the example will become whatever node is 'above it' (which it really isn't because it takes its place, but you get the point). For instance, in the case of data-tables, <template #item="{ item }">... represents every <td> of your table. Then you can use the destructured item and apply some logic to it to still of modify you table as you will.
Don't forget to upvote/validate the answer if it helped your to solve your issue, comment if you need more details and welcome to Stack!