Vuetify data table :item-class do nothing

Question

I'm really confused by ":item-class" prop in Vuetify (v. 2.3.4) data table. It does nothing even if I try to add a static text class.

<v-data-table class="mt-10"
                      item-key="id"
                      :headers="headers"
                      :items="user_tender_assignment_table.user_tender_assignments"
                      :loading="user_tender_assignment_table.loading"
                      :loading-text="tables.loading_text"
                      :search="user_tender_assignment_table.search"
                      v-model="user_tender_assignment_table.selected"
                      :footer-props="tables.footer_props"
                      :item-class="'xxx'"
</v-data-table>

It just renders tr tags without any class:

Do you know why? I think it worked some time ago and I haven't changed Vuetify (2) version.

Answer 1

You can use item-class like below:

<template>:

<v-data-table
    :headers="headers"
    :items="items"
    :item-class="rowClass"
></v-data-table>

<script>:

methods: {
    rowClass(item) {
        console.log(item)
        const rowClass = 'myclass'
        return rowClass;
    }
}

<style>:

<style lang="css">
.myclass {
  color: red;
  background-color: green;
}
</style>

Answer 2

item-class does not specify the CSS classes directly. If it is a String - then it specifies the property inside the item's Object which contains the CSS class(es). If it is a Function - then it gets the item as its argument and must return the CSS class(es).

Answer 3

In my case, I choose string type for item-class, then you can pass any CSS class name as a prop in your items object. it's like this in a simplified way:

Template:

<v-data-table
     :headers="headers"
     :items="lineas"
      item-class="color"
      ...
</v-data-table>

Data object:

data: () => ({
     lineas: [
       {text: 'Fecha',align: 'start',sortable: true,value: 'fecha', color: 'red-line'},
       {text: 'Descripción',align: 'start',sortable: false,value: 'descripcion', color: 'blue-line'},
      ],
})

CSS:

<style>
    .blue-line td {
        color: green;
    }

    .red-line td{
        color: red;
    }
</style>

In order for it to work properly, it is essential to have Vuetify updated at least at v2.3.8, as this feature was recently included (May '2020): https://github.com/vuetifyjs/vuetify/pull/11254