diff --git a/packages/api-generator/src/maps/v-data-table.js b/packages/api-generator/src/maps/v-data-table.js
index 5122eae6ad7..9f9a8eea463 100644
--- a/packages/api-generator/src/maps/v-data-table.js
+++ b/packages/api-generator/src/maps/v-data-table.js
@@ -81,6 +81,14 @@ const DataTableItemScopedProps = {
...DataIteratorItemScopedProps,
headers: 'DataTableHeader[]',
isMobile: 'boolean',
+ on: {
+ click: '(event: MouseEvent) => void',
+ contextmenu: '(event: MouseEvent) => void',
+ dblclick: '(event: MouseEvent) => void',
+ },
+ attrs: {
+ class: 'object',
+ },
}
const DataTableItemColumnScopedProps = {
diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.ts b/packages/vuetify/src/components/VDataTable/VDataTable.ts
index 6f4f2a8a329..b9ddffbb79a 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTable.ts
+++ b/packages/vuetify/src/components/VDataTable/VDataTable.ts
@@ -228,9 +228,26 @@ export default mixins(
return this.customSort(items, sortBy, sortDesc, locale, this.columnSorters)
},
createItemProps (item: any, index: number): DataTableItemProps {
- const props = VDataIterator.options.methods.createItemProps.call(this, item, index)
+ const data = {
+ ...VDataIterator.options.methods.createItemProps.call(this, item, index),
+ headers: this.computedHeaders,
+ }
- return Object.assign(props, { headers: this.computedHeaders })
+ return {
+ ...data,
+ attrs: {
+ class: {
+ 'v-data-table__selected': data.isSelected,
+ },
+ },
+ on: {
+ // TODO: for click, the first argument should be the event, and the second argument should be data,
+ // but this is a breaking change so it's for v3
+ click: (event: MouseEvent) => this.$emit('click:row', item, data, event),
+ contextmenu: (event: MouseEvent) => this.$emit('contextmenu:row', event, data),
+ dblclick: (event: MouseEvent) => this.$emit('dblclick:row', event, data),
+ },
+ }
},
genCaption (props: DataScopeProps) {
if (this.caption) return [this.$createElement('caption', [this.caption])]
@@ -510,13 +527,7 @@ export default mixins(
rtl: this.$vuetify.rtl,
},
scopedSlots,
- on: {
- // TODO: for click, the first argument should be the event, and the second argument should be data,
- // but this is a breaking change so it's for v3
- click: (event: MouseEvent) => this.$emit('click:row', item, data, event),
- contextmenu: (event: MouseEvent) => this.$emit('contextmenu:row', event, data),
- dblclick: (event: MouseEvent) => this.$emit('dblclick:row', event, data),
- },
+ on: data.on,
})
},
genBody (props: DataScopeProps): VNode | string | VNodeChildren {
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap
index edac3697f47..412936ef90e 100644
--- a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap
+++ b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap
@@ -9436,19 +9436,19 @@ exports[`VDataTable.ts should render with item scoped slot 1`] = `
- {"item":{"name":"Frozen Yogurt","calories":159,"fat":6,"carbs":24,"protein":4,"iron":"1%","class":"test"},"index":0,"isSelected":false,"isExpanded":false,"isMobile":true,"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}]}
+ {"item":{"name":"Frozen Yogurt","calories":159,"fat":6,"carbs":24,"protein":4,"iron":"1%","class":"test"},"index":0,"isSelected":false,"isExpanded":false,"isMobile":true,"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}],"attrs":{"class":{"v-data-table__selected":false}},"on":{}}
- {"item":{"name":"Ice cream sandwich","calories":237,"fat":9,"carbs":37,"protein":4.3,"iron":"1%","class":["test","second"]},"index":1,"isSelected":false,"isExpanded":false,"isMobile":true,"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}]}
+ {"item":{"name":"Ice cream sandwich","calories":237,"fat":9,"carbs":37,"protein":4.3,"iron":"1%","class":["test","second"]},"index":1,"isSelected":false,"isExpanded":false,"isMobile":true,"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}],"attrs":{"class":{"v-data-table__selected":false}},"on":{}}
- {"item":{"name":"Eclair","calories":262,"fat":16,"carbs":23,"protein":6,"iron":"7%","class":{"test":true,"second":false}},"index":2,"isSelected":false,"isExpanded":false,"isMobile":true,"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}]}
+ {"item":{"name":"Eclair","calories":262,"fat":16,"carbs":23,"protein":6,"iron":"7%","class":{"test":true,"second":false}},"index":2,"isSelected":false,"isExpanded":false,"isMobile":true,"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}],"attrs":{"class":{"v-data-table__selected":false}},"on":{}}
- {"item":{"name":"Cupcake","calories":305,"fat":3.7,"carbs":67,"protein":4.3,"iron":"8%"},"index":3,"isSelected":false,"isExpanded":false,"isMobile":true,"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}]}
+ {"item":{"name":"Cupcake","calories":305,"fat":3.7,"carbs":67,"protein":4.3,"iron":"8%"},"index":3,"isSelected":false,"isExpanded":false,"isMobile":true,"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}],"attrs":{"class":{"v-data-table__selected":false}},"on":{}}
- {"item":{"name":"Gingerbread","calories":356,"fat":16,"carbs":49,"protein":3.9,"iron":"16%"},"index":4,"isSelected":false,"isExpanded":false,"isMobile":true,"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}]}
+ {"item":{"name":"Gingerbread","calories":356,"fat":16,"carbs":49,"protein":3.9,"iron":"16%"},"index":4,"isSelected":false,"isExpanded":false,"isMobile":true,"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}],"attrs":{"class":{"v-data-table__selected":false}},"on":{}}
diff --git a/packages/vuetify/types/index.d.ts b/packages/vuetify/types/index.d.ts
index 27399ededd3..1c7a76db07f 100644
--- a/packages/vuetify/types/index.d.ts
+++ b/packages/vuetify/types/index.d.ts
@@ -117,6 +117,8 @@ export interface DataItemProps {
export interface DataTableItemProps extends DataItemProps {
headers: DataTableHeader[]
+ on: { [key: string]: Function | Function[] }
+ attrs: object;
}
export interface DataScopeProps {