Vuetify: [Feature Request] v-data-table item link

[rudineirk]

Problem to solve

Similar to the way v-list-item has the href and nuxt props, the idea is to be possible to click on the table item to go to another page (ex.: an edit page of the item).

Proposed solution

Maybe use a function prop on the v-data-table component to create the links, ex.: nuxt-fn and href-fn

function createEditLink(item) {
  return '/my/item/' + item.id
}

<v-data-table :href-fn="createEditLink"></v-data-table>

[nekosaur]

You should be able to do this

<template slot="items" slot-scope="props">
  <router-link tag="tr" :to="whatever">
    <td>{{ props.item.name }}</td>
    <td class="text-xs-right">{{ props.item.calories }}</td>
    <td class="text-xs-right">{{ props.item.fat }}</td>
    <td class="text-xs-right">{{ props.item.carbs }}</td>
    <td class="text-xs-right">{{ props.item.protein }}</td>
    <td class="text-xs-right">{{ props.item.iron }}</td>  
  </router-link>
</template>

Or just

<template slot="items" slot-scope="props">
  <tr @click.native="whatever">
    <td>{{ props.item.name }}</td>
    <td class="text-xs-right">{{ props.item.calories }}</td>
    <td class="text-xs-right">{{ props.item.fat }}</td>
    <td class="text-xs-right">{{ props.item.carbs }}</td>
    <td class="text-xs-right">{{ props.item.protein }}</td>
    <td class="text-xs-right">{{ props.item.iron }}</td>  
  </tr>
</template>

If you're not using vue-router

[johnleider]

Thank you for the Feature Request and interest in improving Vuetify. Unfortunately this is not functionality that we are looking to implement at this time.

If you have any additional questions, please direct them to the official Discord server.

[cbarlow1993]

I came across this looking for the same feature. +1 for it's future inclusion!

[escapedcat]

@nekosaur we use this solution at the moment. but it would be great if the user could use it like a normal anchor-link regading "opening in new tab"-functionalityt etc.

[bitbytebit1]

Yup, +1 also trying "open in new tab " with tr.

[morgenweck]

another plus one please

[andrevmatos]

@nekosaur your first example with <router-link tag="tr"> isn't working. Seems like datatable's item slot doesn't like router-link components on top-level of the slot, as applying it to a td column works fine. Any idea how to get it without having to register an explicit @click method on a raw tr?

[mortik]

Actually we tried to add it to the tds which results in a lot of styling changes to make it work and look good... another approach was actually to add @click events on a plain tr which also allows us to add even more events like ctrl+click on windows and cmd+click on mac to recreate open in new tab behavior from a normal link.

Its not pretty and still seems hacky to me but it works for now.