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

[SimonMarx]

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; }

[p0wl90]

Until this is implemented: Does anyone have a nice workaround?

[drocha87]

Until this is implemented: Does anyone have a nice workaround?

I'm wondering about a workaround too!!

[jacekkarczmarczyk]

since click:row applies for each row you can just apply cursor:pointer style to table>tbody>tr

[drocha87]

since click:row applies for each row you can just apply cursor:pointer style to table>tbody>tr

This was my first guess, but it doesn't work.

[drocha87]

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

[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.