fix(VDataTable): support groupBy when sorting is disabled

vuetifyjs · Jul 5, 2024 · 82286cf · 82286cf
1 parent da58aa0
commit 82286cf
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 22 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
@@ -7,9 +7,6 @@ import { Application } from '../../../../cypress/templates'
 // Utilities
 import { ref } from 'vue'
 
-// Types
-import type { SortItem } from '../composables/sort'
-
 const DESSERT_HEADERS = [
   { title: 'Dessert (100g serving)', key: 'name' },
   { title: 'Calories', key: 'calories' },
@@ -373,38 +370,25 @@ 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)
           })
           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
@@ -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) {