How to make the item(the whole row) clickable

[muhammadafif133]

How do I make the whole line clickable instead of clicking the text of the item?
Is it possible to overwrite the items into an anchor tag?

[luisberth]

Hi.

Use the "item" slot: https://vuetifyjs.com/en/api/v-data-table/#slots-item

Then, in the "tr" element, add a click event like so:

<v-data-table :headers="headers" :items="items">
  <template v-slot:[`item`]='{ item }'>
    <tr @click="yourFunction">
      <td>{{ item.something1 }}</td>
      <td>{{ item.something2 }}</td>
      <td>{{ item.something3 }}</td>
    </tr>
  </template>
</v-data-table>

[merlinz01]

I had been doing this as above, but just found a much better way to do this.

1. If you are using the item slot to customize item text, instead define your table headers with a value callback:

const headers = [
    { key: 'type', title: 'Type', value: (item: any, fallback?: any) => getTypeEnumString(item.type) },
   ...
]

This has the added benefit of making sorting and filtering work as expected.

2. Bind the click event of the rows to a callback for the row:

<v-data-table :headers="headers" @click:row="openEditDialog" />

The table even shows a nice pointing-hand cursor when the @click:row event is bound to.

[merlinz01]

Except now I'm failing to discover a pretty way to determine which row was clicked.

A bad and brittle hack for now:

function openEditDialog(event: MouseEvent) {
    const item = ((event.target as HTMLElement).parentElement as any).__vnode.ctx.props.item.raw as MyItemType
    ...
}

Any better way to do this?

[KaelWD]

The second argument contains the item.

[merlinz01]

Nice, thank you! For some reason I thought I tried that without success, but it works now. More precisely, you can access the item data as the .item attribute of the second argument, and there are other useful attributes also.