How can I set "cursor: pointer" on Vuetify v-data-table rows? (expanded item area excluded)

Question

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

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

With this CSS, found here, cursor changes even inside expanded item area, and this is not what I want. Do you know how to prevent this behaviour?

Edit #1

While @cmfc31 solution kinda works, there are a couple of things to point out:

1. In order to apply the class, you must know in advance which tables are going to be clickable.
2. You are relying on class names, which might be changed and break your CSS.
3. This CSS does not work if you embed a non clickable table inside a clickable one through expanded item slot.

If you are looking for a workaround @cmfc31 approach may suit you, but if you are looking for a solution I suppose we must wait for Vuetify 3.

Answer 1

Check this codesanbox I made: https://codesandbox.io/s/stack-72501803-css-not-cursor-pointer-ei812i?file=/src/components/Example.vue

Use the :not() CSS pseudo-class to disable the style on the expanded content area.

<style scoped>
.row-pointer >>> tbody tr:not(.v-data-table__expanded__content) :hover {
 cursor: pointer;
}
</style>