Skip to content

Commit 100053f

Browse files
committed
fix(VDataTable): display header text instead of value in group headers
fixes #11516
1 parent 7875421 commit 100053f

File tree

2 files changed

+18
-15
lines changed

2 files changed

+18
-15
lines changed

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

+4-1
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,9 @@ export default mixins(
181181

182182
return itemsPerPage
183183
},
184+
groupByText (): string {
185+
return this.headers?.find(header => header.value === this.internalGroupBy?.[0])?.text ?? ''
186+
},
184187
},
185188

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

380383
children.unshift(this.$createElement('template', { slot: 'column.header' }, [column]))
381384
}

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

+14-14
Original file line numberDiff line numberDiff line change
@@ -6911,7 +6911,7 @@ exports[`VDataTable.ts should render item slot when using group-by function 1`]
69116911
</i>
69126912
</span>
69136913
</button>
6914-
name: Frozen Yogurt
6914+
Dessert (100g serving): Frozen Yogurt
69156915
<button type="button"
69166916
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
69176917
>
@@ -6941,7 +6941,7 @@ exports[`VDataTable.ts should render item slot when using group-by function 1`]
69416941
</i>
69426942
</span>
69436943
</button>
6944-
name: Ice cream sandwich
6944+
Dessert (100g serving): Ice cream sandwich
69456945
<button type="button"
69466946
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
69476947
>
@@ -8477,7 +8477,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
84778477
</i>
84788478
</span>
84798479
</button>
8480-
calories: 159
8480+
Calories: 159
84818481
<button type="button"
84828482
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
84838483
>
@@ -8551,7 +8551,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
85518551
</i>
85528552
</span>
85538553
</button>
8554-
calories: 237
8554+
Calories: 237
85558555
<button type="button"
85568556
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
85578557
>
@@ -8625,7 +8625,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
86258625
</i>
86268626
</span>
86278627
</button>
8628-
calories: 262
8628+
Calories: 262
86298629
<button type="button"
86308630
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
86318631
>
@@ -8699,7 +8699,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
86998699
</i>
87008700
</span>
87018701
</button>
8702-
calories: 305
8702+
Calories: 305
87038703
<button type="button"
87048704
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
87058705
>
@@ -8773,7 +8773,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
87738773
</i>
87748774
</span>
87758775
</button>
8776-
calories: 356
8776+
Calories: 356
87778777
<button type="button"
87788778
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
87798779
>
@@ -8988,7 +8988,7 @@ exports[`VDataTable.ts should render with grouped rows 1`] = `
89888988
</i>
89898989
</span>
89908990
</button>
8991-
protein: 0
8991+
Protein (g): 0
89928992
<button type="button"
89938993
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
89948994
>
@@ -9099,7 +9099,7 @@ exports[`VDataTable.ts should render with grouped rows 1`] = `
90999099
</i>
91009100
</span>
91019101
</button>
9102-
protein: 3.9
9102+
Protein (g): 3.9
91039103
<button type="button"
91049104
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
91059105
>
@@ -9168,7 +9168,7 @@ exports[`VDataTable.ts should render with grouped rows 1`] = `
91689168
</i>
91699169
</span>
91709170
</button>
9171-
protein: 4
9171+
Protein (g): 4
91729172
<button type="button"
91739173
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
91749174
>
@@ -9237,7 +9237,7 @@ exports[`VDataTable.ts should render with grouped rows 1`] = `
92379237
</i>
92389238
</span>
92399239
</button>
9240-
protein: 4.3
9240+
Protein (g): 4.3
92419241
<button type="button"
92429242
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
92439243
>
@@ -11644,7 +11644,7 @@ exports[`VDataTable.ts should search group-by column 1`] = `
1164411644
</i>
1164511645
</span>
1164611646
</button>
11647-
name: Assistance
11647+
Name: Assistance
1164811648
<button type="button"
1164911649
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
1165011650
>
@@ -11681,7 +11681,7 @@ exports[`VDataTable.ts should search group-by column 1`] = `
1168111681
</i>
1168211682
</span>
1168311683
</button>
11684-
name: Candidat
11684+
Name: Candidat
1168511685
<button type="button"
1168611686
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
1168711687
>
@@ -11856,7 +11856,7 @@ exports[`VDataTable.ts should search group-by column 2`] = `
1185611856
</i>
1185711857
</span>
1185811858
</button>
11859-
name: Candidat
11859+
Name: Candidat
1186011860
<button type="button"
1186111861
class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
1186211862
>

0 commit comments

Comments
 (0)