Vuetify: [Feature Request] v-data-table @dblclick:row event

[taylanwhite]

Problem to solve

The single click exists, but I cannot see a solution that isn't somewhat convoluted to implement a double click for the data table component.

Proposed solution

@dblclick:row to emit event on double click of row on data table

[johnleider]

Thank you for the Feature Request and interest in improving Vuetify. After careful consideration the team has decided that this is not functionality that we are looking to implement at this time.

If you have any additional questions, please reach out to us in our Discord community.

[zwecy]

I ran into this very issue today, and came up with this solution.
Not the best solution, and does not using the operating system double click timeout, but it works as you expected.
You need a global click counter variable: this.clicks
First create an async function like this:
private waitFor(type: number, limit: number, callback) { if (limit < 4) { limit++ setTimeout(this.waitFor.bind(null, this.clicks, limit, callback), 100) } else if (this.clicks > 1) { callback(limit) } else if (limit == 4 && this.clicks == 1) { callback(1) } }
Then you can use it in your @click function:
this.waitFor (this.clicks, 0, (callback: number) => { if (callback == 1) { console.log('one click' + callback) this.clicks = 0 }else { console.log('more clicks' + callback) this.clicks = 0 } });

[taylanwhite]

I did somewhat similar but made it a global function that accepts two functions and an object so I can plug it into more than one datatable.

var dataTableClickCount = 0;
var clickTimer = null;
export function singleOrDoubleRowClick(item, singleClickFunc, doubleClickFunc) {
dataTableClickCount++;

if (dataTableClickCount === 1) {
clickTimer = setTimeout(function() {
dataTableClickCount = 0;
singleClickFunc(item)
}, 250);
} else if (dataTableClickCount === 2) {
clearTimeout(clickTimer);
dataTableClickCount = 0;
doubleClickFunc(item)
}
}

[badunius]

People: build crutches en masse
Team: couldn't care less

[jameshhood]

I know this saddens me. I'm migrating a company project from version 1 to version 2 and data tables were one of the things that changed the most. I have a table with customers that a user can choose from and a better user experience would be for them just to double click on one instead of having to hit a button to execute. :/

[neskhodovskiy]

I second this request. In many interfaces, double-clicking a row to invoke the editing action is a standard behavior. Also, this is a good UX since it gives user a much larger area of action than a single icon. Please consider implementing in the future.

[nekosaur]

https://github.com/vuetifyjs/vuetify/pull/11039