[Documentation] Document ability to bind to v-data-table row clicks and use column value callbacks

[merlinz01]

Problem to solve

I just discovered this solution for making v-data-table rows clickable. I wish this had been documented, as it would have saved me some time, and would help new users wanting to implement CRUD operations or navigating in response to clicks.

Proposed solution

Document the relevant API with examples.

[merlinz01]

First, is there a solution for this?

[merlinz01]

What if we would change

vuetify/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx

Line 71 in 0a31bf8

onClick={ props.onClick as any }

to something along the lines of

  // (type hints removed)
  onClick={ props.onClick ? (event) => props.onClick(event, props.item) : undefined }

so that one can access the row data like this:

function rowClickCallback(event: MouseEvent, item: MyItemType) {
    console.log(`Item ${item.name} was clicked.`)
}

<v-data-table @click:row="rowClickCallback" :items="myItems" />

That way we wouldn't have to depend on a hack to determine which row was clicked. I don't think such a change would affect existing code.

Unless there is a simpler solution that I'm missing.

[KaelWD]

This is already the case, did you try it?

vuetify/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx

Line 151 in 0a31bf8

getPrefixedEventHandlers(attrs, ':row', () => slotProps),

We need to figure out how to document these events, the keys are dynamic so can't just be added to the component definition.

[merlinz01]

Can't say I understand what that line does, but I'm glad it works. Thanks for pointing out a solution.

It would be great to document the events also.