fix(VDataTable): improvements for sorting in mobile mode

J-Sek · J-Sek · commit 54affe128424 · 2026-03-02T15:01:17.000+01:00
- use initial sort when selecting new chip(s) - keep chips when toggling (rely on clearable to remove chip) fixes #22288 closes #22426
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
@@ -17,8 +17,8 @@ import { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader'
 import { useLocale } from '@/composables/locale'
 
 // Utilities
-import { computed, mergeProps } from 'vue'
-import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'
+import { computed, mergeProps, nextTick } from 'vue'
+import { convertToUnit, genericComponent, propsFactory, useRender, wrapInArray } from '@/util'
 
 // Types
 import type { CSSProperties, PropType, UnwrapRef } from 'vue'
@@ -256,10 +256,21 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
     }
 
     const VDataTableMobileHeaderCell = () => {
-      const displayItems = computed<ItemProps['items']>(() => {
+      const sortableColumns = computed<ItemProps['items']>(() => {
         return columns.value.filter(column => column?.sortable && !props.disableSort)
       })
       const showSelectColumn = columns.value.find(column => column.key === 'data-table-select')
+      const sortingChips = computed<InternalDataTableHeader | InternalDataTableHeader[] | null>({
+        get: () => sortableColumns.value.filter(({ key }) => sortBy.value.some(v => v.key === key)),
+        set: val => {
+          const sortedColumns = wrapInArray(val)
+          const activeSortKeys = sortBy.value.map(v => v.key)
+          const newColumnsToSort = sortedColumns.filter(({ key }) => !activeSortKeys.includes(key!))
+          newColumnsToSort.forEach(column => toggleSort(column))
+          // sortBy is proxied model, needs nextTick after toggleSort
+          nextTick(() => sortBy.value = sortBy.value.filter(({ key }) => sortedColumns.some(c => c.key === key)))
+        },
+      })
 
       return (
         <VDataTableColumn
@@ -272,15 +283,17 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
         >
           <div class="v-data-table-header__content">
             <VSelect
+              v-model={ sortingChips.value }
               chips
               color={ props.color }
               class="v-data-table__td-sort-select"
               clearable
               density="default"
-              items={ displayItems.value }
+              items={ sortableColumns.value }
               label={ t('$vuetify.dataTable.sortBy') }
               multiple={ props.multiSort }
               variant="underlined"
+              returnObject
               onClick:clear={ () => sortBy.value = [] }
             >
               {{
@@ -293,21 +306,21 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
                     onUpdate:modelValue={ () => selectAll(!allSelected.value) }
                   />
                 ) : undefined,
-                chip: props => (
+                chip: ({ internalItem }) => (
                   <VChip
-                    onClick={ props.item.raw?.sortable ? () => toggleSort(props.item.raw) : undefined }
+                    onClick={ internalItem.raw.sortable ? () => toggleSort(internalItem.raw, undefined, true) : undefined }
                     onMousedown={ (e: MouseEvent) => {
                       e.preventDefault()
                       e.stopPropagation()
                     }}
                   >
-                    { props.item.title }
+                    { internalItem.title }
                     <VIcon
                       class={[
                         'v-data-table__td-sort-icon',
-                        isSorted(props.item.raw) && 'v-data-table__td-sort-icon-active',
+                        isSorted(internalItem.raw) && 'v-data-table__td-sort-icon-active',
                       ]}
-                      icon={ getSortIcon(props.item.raw) }
+                      icon={ getSortIcon(internalItem.raw) }
                       size="small"
                     />
                   </VChip>
diff --git a/packages/vuetify/src/components/VDataTable/composables/sort.ts b/packages/vuetify/src/components/VDataTable/composables/sort.ts
@@ -31,7 +31,7 @@ export const makeDataTableSortProps = propsFactory({
 
 const VDataTableSortSymbol: InjectionKey<{
   sortBy: Ref<readonly SortItem[]>
-  toggleSort: (column: InternalDataTableHeader, event?: KeyboardEvent | PointerEvent) => void
+  toggleSort: (column: InternalDataTableHeader, event?: KeyboardEvent | PointerEvent, mandatory?: boolean) => void
   isSorted: (column: InternalDataTableHeader) => boolean
 }> = Symbol.for('vuetify:data-table-sort')
 
@@ -90,7 +90,7 @@ export function provideSort (options: {
 }) {
   const { initialSortOrder, sortBy, mustSort, multiSort, page } = options
 
-  const toggleSort = (column: InternalDataTableHeader, event?: KeyboardEvent | PointerEvent) => {
+  const toggleSort = (column: InternalDataTableHeader, event?: KeyboardEvent | PointerEvent, mandatory = false) => {
     if (column.key == null) return
 
     let newSortBy = sortBy.value.map(x => ({ ...x })) ?? []
@@ -110,7 +110,7 @@ export function provideSort (options: {
         newSortBy = [{ key: column.key, order: initialOrder }]
       }
     } else if (item.order === secondaryOrder) {
-      if (mustSort.value && newSortBy.length === 1) {
+      if (mandatory || (mustSort.value && newSortBy.length === 1)) {
         item.order = initialSortOrder.value
       } else {
         newSortBy = newSortBy.filter(x => x.key !== column.key)
