CODEWITHSUNDEEP
vue.jsvuetify.js
Malo Marrec
Malo Marrec

Reputation: 609

Vuetify: Style only the last row of a v-data-table

Is there a way to apply a different style to only the last row of a v-data-table?

To be more specific, by style I mean changing the border and background color.

<v-data-table
  disable-sort
  :headers="headers"
  :items="data"
  :item-key="id"
  >
  <template v-slot:item="row">
  <tr :key="row.item.id">
    <td class="text-xs-right">{{ row.item.field1 }} </td>
    <td class="text-xs-right">{{ row.item.field2 }} </td>
  </tr>
</v-data-table>

Upvotes: 1

Views: 2024

Answers (1)

Majed Badawi
Majed Badawi

Reputation: 28414

You can bind a class with the styles on condition:

<v-data-table
  disable-sort
  :headers="headers"
  :items="data"
  :item-key="id"
>
  <template v-slot:item="row">
  <tr 
    :key="row.item.id" 
    :class="{'lastRow': data.length>0 && row.item.id==data[data.length-1].item.id}"
  >
    <td class="text-xs-right">{{ row.item.field1 }} </td>
    <td class="text-xs-right">{{ row.item.field2 }} </td>
  </tr>
</v-data-table>

.lastRow { background-color:'grey'; border: 1px solid black; }

In some vuetify themes, is transparent, so it might be necessary to override it using

.lastRow {background-color:rgba(105,105,105,0.3); border: 1px solid black; }

Upvotes: 1

Related Questions