feat(VDataTable): add mobile view

[webdevnerdstuff]

Description

Adds a mobile view for the data tables

Ref Issue: #16784

Markup:

<template>
  <v-data-table
    v-model:expanded="expanded"
    :fixed-header="true"
    :headers="headers"
    :items="desserts"
    :mobile="smAndDown"
    :multi-sort="false"
    item-value="name"
    items-per-page="5"
    theme="dark"
    show-expand
    show-select
  >
    <template #[`header.name`]>
      name header slot
    </template>
    <template #[`item.calories`]>
      calories item slot
    </template>
    <template #expanded-row="{ index, columns }">
      <tr>
        <td :colspan="columns.length">
          Index: {{ index }} Expanded Row
        </td>
      </tr>
    </template>
  </v-data-table>
</template>

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

  const { smAndDown } = useDisplay()

  const expanded = ref([])
  const headers = ref([
    {
      title: 'Dessert (100g serving)',
      align: 'start',
      sortable: false,
      key: 'name',
    },
    { title: 'Calories', key: 'calories' },
    { title: 'Fat (g)', key: 'fat' },
    { title: '', key: 'data-table-expand' },
  ] 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>

[MajesticPotatoe]

Rebase to dev

[yuwu9145]

• Missing "select all" checkbox
• Item checkbox is left-aligned

V2 mobile screenshot (white background) is attached for comparison

[webdevnerdstuff]

I fixed the alignment to be end for the checkbox. As for the header one, I'll chat with John about what to do with that, as personally I think it looks kind of weird next to the sortby.

[boobo94]

Does anyone know how can I overwrite the default 52px row height on mobile? Because the content overflows. I tried to check in the documentation, but couldn't find something.

[chudson-incomm]

I think you will have to override the CSS for mobile in this instance.

Something like this...

tbody .v-data-table__tr--mobile > td {
min-height: 60px !important;
}

Assuming this is a slot that adds buttons. You may want to evaluate if mobile breakpoint has been hit and turn the buttons into icon only to shrink down the content if it provides a better mobile experience as well.

@webdevnerdstuff Any other way to handle this issue? I am not sure if it would be a feature...

[boobo94]

I think you will have to override the CSS for mobile in this instance.

Something like this...

tbody .v-data-table__tr--mobile > td { min-height: 60px !important; }

Assuming this is a slot that adds buttons. You may want to evaluate if mobile breakpoint has been hit and turn the buttons into icon only to shrink down the content if it provides a better mobile experience as well.

@webdevnerdstuff Any other way to handle this issue? I am not sure if it would be a feature...

Thanks for your reply.

I already added a CSS rule:

.v-data-table__row-height-auto :deep(.v-data-table__tr--mobile) > td {
  height: fit-content;
}

I was curious if there's something else available from config. I checked the PR, but I found nothing related. So I hoped there was something.

[webdevnerdstuff]

@cjhudson101 I'm pretty sure I had accounted for adjustable height depending on the content.

Added a PR to fix it: #19843

[chudson-incomm]

@boobo94 The change was included in this morning's 3.6.7 release.

[boobo94]

Soo cool. thanks!

@boobo94 The change was included in this morning's 3.6.7 release.