Skip to content

Commit

Permalink
fix(VDataTable): display header text instead of value in group headers
Browse files Browse the repository at this point in the history
fixes #11516
  • Loading branch information
KaelWD committed Jul 6, 2022
1 parent 7875421 commit 100053f
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 15 deletions.
5 changes: 4 additions & 1 deletion packages/vuetify/src/components/VDataTable/VDataTable.ts
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,9 @@ export default mixins(

return itemsPerPage
},
groupByText (): string {
return this.headers?.find(header => header.value === this.internalGroupBy?.[0])?.text ?? ''
},
},

created () {
Expand Down Expand Up @@ -375,7 +378,7 @@ export default mixins(
const column = this.$createElement('td', {
staticClass: 'text-start',
attrs: this.colspanAttrs,
}, [toggle, `${props.options.groupBy[0]}: ${group}`, remove])
}, [toggle, `${this.groupByText}: ${group}`, remove])

children.unshift(this.$createElement('template', { slot: 'column.header' }, [column]))
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6911,7 +6911,7 @@ exports[`VDataTable.ts should render item slot when using group-by function 1`]
</i>
</span>
</button>
name: Frozen Yogurt
Dessert (100g serving): Frozen Yogurt
<button type="button"
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
>
Expand Down Expand Up @@ -6941,7 +6941,7 @@ exports[`VDataTable.ts should render item slot when using group-by function 1`]
</i>
</span>
</button>
name: Ice cream sandwich
Dessert (100g serving): Ice cream sandwich
<button type="button"
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
>
Expand Down Expand Up @@ -8477,7 +8477,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
</i>
</span>
</button>
calories: 159
Calories: 159
<button type="button"
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
>
Expand Down Expand Up @@ -8551,7 +8551,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
</i>
</span>
</button>
calories: 237
Calories: 237
<button type="button"
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
>
Expand Down Expand Up @@ -8625,7 +8625,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
</i>
</span>
</button>
calories: 262
Calories: 262
<button type="button"
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
>
Expand Down Expand Up @@ -8699,7 +8699,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
</i>
</span>
</button>
calories: 305
Calories: 305
<button type="button"
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
>
Expand Down Expand Up @@ -8773,7 +8773,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
</i>
</span>
</button>
calories: 356
Calories: 356
<button type="button"
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
>
Expand Down Expand Up @@ -8988,7 +8988,7 @@ exports[`VDataTable.ts should render with grouped rows 1`] = `
</i>
</span>
</button>
protein: 0
Protein (g): 0
<button type="button"
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
>
Expand Down Expand Up @@ -9099,7 +9099,7 @@ exports[`VDataTable.ts should render with grouped rows 1`] = `
</i>
</span>
</button>
protein: 3.9
Protein (g): 3.9
<button type="button"
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
>
Expand Down Expand Up @@ -9168,7 +9168,7 @@ exports[`VDataTable.ts should render with grouped rows 1`] = `
</i>
</span>
</button>
protein: 4
Protein (g): 4
<button type="button"
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
>
Expand Down Expand Up @@ -9237,7 +9237,7 @@ exports[`VDataTable.ts should render with grouped rows 1`] = `
</i>
</span>
</button>
protein: 4.3
Protein (g): 4.3
<button type="button"
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
>
Expand Down Expand Up @@ -11644,7 +11644,7 @@ exports[`VDataTable.ts should search group-by column 1`] = `
</i>
</span>
</button>
name: Assistance
Name: Assistance
<button type="button"
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
>
Expand Down Expand Up @@ -11681,7 +11681,7 @@ exports[`VDataTable.ts should search group-by column 1`] = `
</i>
</span>
</button>
name: Candidat
Name: Candidat
<button type="button"
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
>
Expand Down Expand Up @@ -11856,7 +11856,7 @@ exports[`VDataTable.ts should search group-by column 2`] = `
</i>
</span>
</button>
name: Candidat
Name: Candidat
<button type="button"
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
>
Expand Down

0 comments on commit 100053f

Please sign in to comment.