feat(VDataTable): add mobile header slot (#21429)

Co-authored-by: J-Sek <J-Sek@users.noreply.github.com>

resolves #19730

Author: webdevnerdstuff

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

@@ -135,6 +135,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

@@ -56,6 +56,7 @@ export type VDataTableHeadersSlots = {
   loader: LoaderSlotProps
   'header.data-table-select': VDataTableHeaderCellColumnSlotProps
   'header.data-table-expand': VDataTableHeaderCellColumnSlotProps
+  'mobile.header': HeadersSlotProps
 } & { [key: `header.${string}`]: VDataTableHeaderCellColumnSlotProps }
 
 export const makeVDataTableHeadersProps = propsFactory({
@@ -273,6 +274,60 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
         },
       })
 
+      function renderSortSelect () {
+        return (
+          <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 = [] }
+          >
+            {{
+              chip: ({ internalItem }) => (
+                <VChip
+                  onClick={ internalItem.raw.sortable ? () => toggleSort(internalItem.raw, undefined, true) : undefined }
+                  onMousedown={ (e: MouseEvent) => {
+                    e.preventDefault()
+                    e.stopPropagation()
+                  }}
+                >
+                  { internalItem.title }
+                  <VIcon
+                    class={[
+                      'v-data-table__td-sort-icon',
+                      isSorted(internalItem.raw) && 'v-data-table__td-sort-icon-active',
+                    ]}
+                    icon={ getSortIcon(internalItem.raw) }
+                    size="small"
+                  />
+                </VChip>
+              ),
+            }}
+          </VSelect>
+        )
+      }
+
+      function renderSelectAll () {
+        return (
+          <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) }
+          />
+        )
+      }
+
       return (
         <VDataTableColumn
           tag="th"
@@ -283,51 +338,12 @@ 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: ({ internalItem }) => (
-                  <VChip
-                    onClick={ internalItem.raw.sortable ? () => toggleSort(internalItem.raw, undefined, true) : undefined }
-                    onMousedown={ (e: MouseEvent) => {
-                      e.preventDefault()
-                      e.stopPropagation()
-                    }}
-                  >
-                    { internalItem.title }
-                    <VIcon
-                      class={[
-                        'v-data-table__td-sort-icon',
-                        isSorted(internalItem.raw) && 'v-data-table__td-sort-icon-active',
-                      ]}
-                      icon={ getSortIcon(internalItem.raw) }
-                      size="small"
-                    />
-                  </VChip>
-                ),
-              }}
-            </VSelect>
+            { slots['mobile.header']?.(slotProps.value) ?? (
+              <>
+                { sortableColumns.value.length > 0 && renderSortSelect() }
+                { showSelectColumn && renderSelectAll() }
+              </>
+            )}
           </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;