feat(VDataTable): add mobile header slot

[webdevnerdstuff]

Description

Replaces:
#19743

Related:
#19749
#19730

Markup:

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :mobile="true"
    item-value="name"
    items-per-page="5"
    page="1"
    theme="dark"
    show-select
  >
    <template #[`mobile.header`]="props">
      <v-checkbox
        v-bind="props"
        v-model="props.allSelected"
        :indeterminate="props.someSelected && !props.allSelected"
        hide-details
        @click="props.selectAll(!props.allSelected)"
      />
      <v-spacer />
      <v-btn
        color="primary"
        @click="props.selectAll(true)"
      >
        Select All
      </v-btn>
    </template>
  </v-data-table>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  const headers = ref([
    {
      title: 'Dessert (100g serving)',
      align: 'start',
      sortable: false,
      key: 'name',
    },
    {
      title: 'Calories',
      key: 'calories',
      sortable: false,
    },
    {
      title: 'Fat (g)',
      key: 'fat',
    // sortable: false,
    },
  ] as const)
  const desserts = ref([
    {
      name: 'Frozen Yogurt',
      calories: 159,
      fat: 6,
    },
    {
      name: 'Ice cream sandwich with some really long name',
      calories: 237,
      fat: 9,
    },
    {
      name: 'Eclair',
      calories: 262,
      fat: 16,
    },
    {
      name: 'Cupcake',
      calories: 305,
      fat: 3.7,
    },
    {
      name: 'Gingerbread',
      calories: 356,
      fat: 16,
    },
    {
      name: 'Jelly bean',
      calories: 375,
      fat: 0,
    },
    {
      name: 'Lollipop',
      calories: 392,
      fat: 0.2,
    },
    {
      name: 'Honeycomb',
      calories: 408,
      fat: 3.2,
    },
    {
      name: 'Donut',
      calories: 452,
      fat: 25,
    },
    {
      name: 'KitKat',
      calories: 518,
      fat: 26,
    },
  ])
</script>