From ad8e1f0bc84b66424f211ff7246bf2959829d2f7 Mon Sep 17 00:00:00 2001
From: lzl0304 <develop0304@outlook.com>
Date: Thu, 4 Jul 2024 14:16:58 +0800
Subject: [PATCH] fix(VDataTable): support groupBy when sorting is disabled

---
 .../__tests__/VDataTable.spec.cy.tsx          | 21 ++++---------------
 .../VDataTable/composables/group.ts           |  4 ++--
 2 files changed, 6 insertions(+), 19 deletions(-)

diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.cy.tsx b/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.cy.tsx
index 849a7af8fae9..cebf61f12e9d 100644
--- a/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.cy.tsx
+++ b/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.cy.tsx
@@ -373,28 +373,17 @@ describe('VDataTable', () => {
 
   describe('sort', () => {
     it('should sort by sortBy', () => {
-      const sortBy = ref<SortItem[]>([])
       cy.mount(() => (
         <Application>
           <VDataTable
           items={ DESSERT_ITEMS }
           headers={ DESSERT_HEADERS }
           itemsPerPage={ 10 }
-          sortBy={ sortBy.value }
+          sortBy={[{ key: 'fat', order: 'asc' }]}
           />
         </Application>
-      )).get('thead .v-data-table__td').eq(2).should('not.have.class', 'v-data-table__th--sorted')
-        .get('tbody td:nth-child(3)').then(rows => {
-          const actualFat = Array.from(rows).map(row => {
-            return Number(row.textContent)
-          })
-          const expectedFat = DESSERT_ITEMS.map(d => d.fat)
-          expect(actualFat).to.deep.equal(expectedFat)
-        })
-        .then(() => {
-          sortBy.value = [{ key: 'fat', order: 'asc' }]
-        })
-        .get('thead .v-data-table__td').eq(2).should('have.class', 'v-data-table__th--sorted')
+      ))
+      cy.get('thead .v-data-table__td').eq(2).should('have.class', 'v-data-table__th--sorted')
         .get('tbody td:nth-child(3)').then(rows => {
           const actualFat = Array.from(rows).map(row => {
             return Number(row.textContent)
@@ -402,9 +391,7 @@ describe('VDataTable', () => {
           const expectedFat = DESSERT_ITEMS.map(d => d.fat).sort((a, b) => a - b)
           expect(actualFat).to.deep.equal(expectedFat)
         })
-        .then(() => {
-          sortBy.value = [{ key: 'fat', order: 'desc' }]
-        })
+      cy.get('thead .v-data-table__td').eq(2).click()
         .get('thead .v-data-table__td').eq(2).should('have.class', 'v-data-table__th--sorted')
         .get('tbody td:nth-child(3)').then(rows => {
           const actualFat = Array.from(rows).map(row => {
diff --git a/packages/vuetify/src/components/VDataTable/composables/group.ts b/packages/vuetify/src/components/VDataTable/composables/group.ts
index e24f923fc407..7f4ac2be4682 100644
--- a/packages/vuetify/src/components/VDataTable/composables/group.ts
+++ b/packages/vuetify/src/components/VDataTable/composables/group.ts
@@ -52,9 +52,9 @@ export function createGroupBy (props: GroupProps) {
 }
 
 export function provideGroupBy (options: {
-  disableSort: Ref<boolean>
   groupBy: Ref<readonly SortItem[]>
   sortBy: Ref<readonly SortItem[]>
+  disableSort?: Ref<boolean>
 }) {
   const { disableSort, groupBy, sortBy } = options
   const opened = ref(new Set<string>())
@@ -63,7 +63,7 @@ export function provideGroupBy (options: {
     return groupBy.value.map<SortItem>(val => ({
       ...val,
       order: val.order ?? false,
-    })).concat(disableSort.value ? [] : sortBy.value)
+    })).concat(disableSort?.value ? [] : sortBy.value)
   })
 
   function isGroupOpen (group: Group) {