CODEWITHSUNDEEP
csssassvuetify.js
DevonDahon
DevonDahon

Reputation: 8350

How to set the background color of Vuetify v-data-table row on hover?

How to set background color attribute of <v-data-table> ?

I tried this which works, but not with scoped attribute and it also affect group header rows:

<style lang="css">
.theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
    background-color: green;
}
</style>

Upvotes: 1

Views: 8475

Answers (2)

M Hamza Mughal
M Hamza Mughal

Reputation: 51

Vuetify 3

as per documentation pass :hover=true as v-data-table property will add hover effect on table row

and to set hover color set

$table-hover-color: rgb_color

Upvotes: 3

Blackraspberryyy
Blackraspberryyy

Reputation: 2134

Use the item slot of <v-data-table/> and add your class to that custom table row element.

<v-data-table ...>

  <template v-slot:item="{item}">
    <tr class="green-bg">
      <td>{{item.property1}}</td>
      <td>{{item.property2}}</td>
      <td>{{item.property3}}</td>
    </tr>
  </template>

</v-data-table>

.green-bg {
  /* Set the display to `table-row` because Vuetify makes `flex` */
  display: table-row;
}

.green-bg:hover {
  /* `!important` is necessary here because Vuetify overrides this */
  background: green !important; 
}

enter image description here

Here is a sample demo at codesandbox.

Upvotes: 6

Related Questions