fix(VDataTable): respect disableSort prop for mobile display mode

lerna.json

@@ -11,5 +11,5 @@
     }
   },
   "npmClient": "pnpm",
-  "version": "3.12.9"
+  "version": "3.12.10"
 }

packages/api-generator/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuetify/api-generator",
   "type": "module",
-  "version": "3.12.9",
+  "version": "3.12.10",
   "private": true,
   "description": "",
   "scripts": {

packages/docs/package.json

@@ -4,7 +4,7 @@
   "description": "A Vue.js project",
   "private": true,
   "author": "John Leider <john@vuetifyjs.com>",
-  "version": "3.12.9",
+  "version": "3.12.10",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",

packages/vuetify/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.12.9",
+  "version": "3.12.10",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"

packages/vuetify/src/components/VDataTable/VDataTable.sass

@@ -127,6 +127,13 @@
     display: flex
     align-items: center
 
+    > .v-data-table-header__select-all
+      margin-inline: $data-table-header-select-all-margin-inline
+      flex-grow: 0
+
+      &:only-child
+        margin-inline-start: auto
+
   .v-data-table-header__sort-icon
     margin-inline: $data-table-header-sort-icon-margin-inline
 

packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx

@@ -282,51 +282,55 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
           { ...props.headerProps }
         >
           <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={ sortableColumns.value }
-              label={ t('$vuetify.dataTable.sortBy') }
-              multiple={ props.multiSort }
-              variant="underlined"
-              returnObject
-              onClick:clear={ () => sortBy.value = [] }
-            >
-              {{
-                append: showSelectColumn ? () => (
-                  <VCheckboxBtn
-                    color={ props.color }
-                    density="compact"
-                    modelValue={ allSelected.value }
-                    indeterminate={ someSelected.value && !allSelected.value }
-                    onUpdate:modelValue={ () => selectAll(!allSelected.value) }
-                  />
-                ) : undefined,
-                chip: ({ item }) => (
-                  <VChip
-                    onClick={ item.raw.sortable ? () => toggleSort(item.raw, undefined, true) : undefined }
-                    onMousedown={ (e: MouseEvent) => {
-                      e.preventDefault()
-                      e.stopPropagation()
-                    }}
-                  >
-                    { item.title }
-                    <VIcon
-                      class={[
-                        'v-data-table__td-sort-icon',
-                        isSorted(item.raw) && 'v-data-table__td-sort-icon-active',
-                      ]}
-                      icon={ getSortIcon(item.raw) }
-                      size="small"
-                    />
-                  </VChip>
-                ),
-              }}
-            </VSelect>
+            { sortableColumns.value.length > 0 && (
+              <VSelect
+                key="header-sort-select"
+                v-model={ sortingChips.value }
+                chips
+                color={ props.color }
+                class="v-data-table__td-sort-select"
+                clearable
+                density="default"
+                items={ sortableColumns.value }
+                label={ t('$vuetify.dataTable.sortBy') }
+                multiple={ props.multiSort }
+                variant="underlined"
+                returnObject
+                onClick:clear={ () => sortBy.value = [] }
+              >
+                {{
+                  chip: ({ item }) => (
+                    <VChip
+                      onClick={ item.raw.sortable ? () => toggleSort(item.raw, undefined, true) : undefined }
+                      onMousedown={ (e: MouseEvent) => {
+                        e.preventDefault()
+                        e.stopPropagation()
+                      }}
+                    >
+                      { item.title }
+                      <VIcon
+                        class={[
+                          'v-data-table__td-sort-icon',
+                          isSorted(item.raw) && 'v-data-table__td-sort-icon-active',
+                        ]}
+                        icon={ getSortIcon(item.raw) }
+                        size="small"
+                      />
+                    </VChip>
+                  ),
+                }}
+              </VSelect>
+            )}
+            { showSelectColumn && (
+                <VCheckboxBtn
+                  class="v-data-table-header__select-all"
+                  color={ props.color }
+                  density="compact"
+                  modelValue={ allSelected.value }
+                  indeterminate={ someSelected.value && !allSelected.value }
+                  onUpdate:modelValue={ () => selectAll(!allSelected.value) }
+                />
+            )}
           </div>
         </VDataTableColumn>
       )

packages/vuetify/src/components/VDataTable/_variables.scss

@@ -6,6 +6,7 @@ $data-table-header-sort-badge-color: rgba(var(--v-border-color), var(--v-border-
 $data-table-header-sort-icon-default-opacity: .0 !default;
 $data-table-header-sort-icon-hover-opacity: .5 !default;
 $data-table-header-sort-icon-margin-inline: 0px !default;
+$data-table-header-select-all-margin-inline: 16px -4px !default;
 
 $data-table-loading-opacity: var(--v-disabled-opacity) !default;