Skip to content

Commit 034ca21

Browse files
maitlandmarshallmaitlandmarshall
authored
feat(VDataTable): expose row default props to item slots (#15711)
1 parent 42ec8c5 commit 034ca21

4 files changed

Lines changed: 35 additions & 14 deletions

File tree

‎packages/api-generator/src/maps/v-data-table.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,14 @@ const DataTableItemScopedProps = {
8181
...DataIteratorItemScopedProps,
8282
headers: 'DataTableHeader[]',
8383
isMobile: 'boolean',
84+
on: {
85+
click: '(event: MouseEvent) => void',
86+
contextmenu: '(event: MouseEvent) => void',
87+
dblclick: '(event: MouseEvent) => void',
88+
},
89+
attrs: {
90+
class: 'object',
91+
},
8492
}
8593

8694
const DataTableItemColumnScopedProps = {

‎packages/vuetify/src/components/VDataTable/VDataTable.ts‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -228,9 +228,26 @@ export default mixins(
228228
return this.customSort(items, sortBy, sortDesc, locale, this.columnSorters)
229229
},
230230
createItemProps (item: any, index: number): DataTableItemProps {
231-
const props = VDataIterator.options.methods.createItemProps.call(this, item, index)
231+
const data = {
232+
...VDataIterator.options.methods.createItemProps.call(this, item, index),
233+
headers: this.computedHeaders,
234+
}
232235

233-
return Object.assign(props, { headers: this.computedHeaders })
236+
return {
237+
...data,
238+
attrs: {
239+
class: {
240+
'v-data-table__selected': data.isSelected,
241+
},
242+
},
243+
on: {
244+
// TODO: for click, the first argument should be the event, and the second argument should be data,
245+
// but this is a breaking change so it's for v3
246+
click: (event: MouseEvent) => this.$emit('click:row', item, data, event),
247+
contextmenu: (event: MouseEvent) => this.$emit('contextmenu:row', event, data),
248+
dblclick: (event: MouseEvent) => this.$emit('dblclick:row', event, data),
249+
},
250+
}
234251
},
235252
genCaption (props: DataScopeProps) {
236253
if (this.caption) return [this.$createElement('caption', [this.caption])]
@@ -510,13 +527,7 @@ export default mixins(
510527
rtl: this.$vuetify.rtl,
511528
},
512529
scopedSlots,
513-
on: {
514-
// TODO: for click, the first argument should be the event, and the second argument should be data,
515-
// but this is a breaking change so it's for v3
516-
click: (event: MouseEvent) => this.$emit('click:row', item, data, event),
517-
contextmenu: (event: MouseEvent) => this.$emit('contextmenu:row', event, data),
518-
dblclick: (event: MouseEvent) => this.$emit('dblclick:row', event, data),
519-
},
530+
on: data.on,
520531
})
521532
},
522533
genBody (props: DataScopeProps): VNode | string | VNodeChildren {

‎packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9436,19 +9436,19 @@ exports[`VDataTable.ts should render with item scoped slot 1`] = `
94369436
</thead>
94379437
<tbody>
94389438
<div>
9439-
{"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"}]}
9439+
{"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":{}}
94409440
</div>
94419441
<div>
9442-
{"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"}]}
9442+
{"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":{}}
94439443
</div>
94449444
<div>
9445-
{"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"}]}
9445+
{"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":{}}
94469446
</div>
94479447
<div>
9448-
{"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"}]}
9448+
{"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":{}}
94499449
</div>
94509450
<div>
9451-
{"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"}]}
9451+
{"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":{}}
94529452
</div>
94539453
</tbody>
94549454
</table>

‎packages/vuetify/types/index.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,8 @@ export interface DataItemProps {
117117

118118
export interface DataTableItemProps extends DataItemProps {
119119
headers: DataTableHeader[]
120+
on: { [key: string]: Function | Function[] }
121+
attrs: object;
120122
}
121123

122124
export interface DataScopeProps {

0 commit comments

Comments
 (0)