How to set "cursor" to "pointer" on Vuetify <v-data-table> rows?

Viewed 17199

How to set cursor: pointer on Vuetify <v-data-table> rows ?

I tried the code below in my component, but it's not recognized:

<style lang="css" scoped>
tr:hover {
  cursor: pointer;
}
</style>
6 Answers

I finally fixed it this way:

</template>
<v-data-table class="row-pointer"></v-data-table>
<template>

<style lang="css" scoped>
.row-pointer >>> tbody tr :hover {
  cursor: pointer;
}
</style>

This is how you can override the rows of v-data-table component with a custom css selector. The accepted answer only works in scoped stlyes.

<template>
  <v-data-table class="row-pointer" ...></v-data-table>
</template>

<style> 
.row-pointer > .v-data-table__wrapper > table > tbody > tr:hover {  
  cursor: pointer;
}
</style>

unfortunately, this did not work for me, I had to write the whole item-template

    <template v-slot:item="{ item }">
      <tr class="row-pointer" @click="handleRowClick(item)">
        <td>{{item.name}}</td>
        <td>{{item.email}}</td>

        <td>
          <v-simple-checkbox v-model="item.active" disabled></v-simple-checkbox>
        </td>
      </tr>
    </template>

scss:
.row-pointer:hover {
  cursor: pointer;
}

have you tried this:

<v-data-table style="cursor: pointer" @click="handleClick">

Should work on other components like v-row too

<v-row style="cursor: pointer" @click="handleClick">
<v-data-table
:style="\`cursor: pointer\`"
>

My solutions is:

Template

 <v-data-table
  class="row-pointer"
 />

Style

::v-deep .row-pointer {
  tbody {
    tr {
      cursor: pointer;
    }
  }
}
Related