How to set "cursor" to "pointer" on Vuetify <v-data-table> rows?
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;
}
<v-data-table
:style="\`cursor: pointer\`"
>