[Feature Request] Change the cursor to pointer when click:row event is attached in VDataTable

Problem to solve

When a user currently hover over a table row and the row has a click event attached to it, the user will only recognize that there is an action, when he know the functionallity or clicked the row by accident.

There should be any visual change for the user, to let him know there is some action he can trigger.

Proposed solution

Check if the ‘click:row’ event is attached to the component and add a class while generate the Row element, which change the cursor to pointer.

Can be done by extending the genDefaultSimpleRow function in VDataTable

class: {
    ...classes,
    'v-data-table__selected': data.isSelected,
    'v-clickable': this.$listeners && this.$listeners['click:row'],
},

.v-clickable { cursor: pointer; }

[CatsMiaow]

https://stackoverflow.com/a/61792596 The above code didn’t work for me

• Vuetify v2.3.2

/* <v-data-table class="table-cursor"></v-data-table> */
.table-cursor tbody tr:hover {
  cursor: pointer;
}

I solved it with this code.

[drocha87]

Ohh man the problem is that I was using scoped css! My bad, it really works!