v-data-table-header-mobile

The v-data-table-header-mobile component is part of the Vuetify library and allows for a responsive data table header on mobile devices. It is designed to be used in conjunction with the v-data-table component, which provides a powerful and flexible way to display and manage large amounts of data.

Installation

To use v-data-table-header-mobile, you first need to install the Vuetify library. You can do this using the following command:

npm install vuetify

Once you have Vuetify installed, you can import the v-data-table-header-mobile component and use it in your Vue application. Here's an example of how to use it:

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    class="elevation-1"
  >
    <template v-slot:header.mobile>
      <v-data-table-header-mobile
        :headers="headers"
        :items-per-page="10"
      />
    </template>
  </v-data-table>
</template>

<script>
import { VDataTableHeaderMobile, VDataTable } from 'vuetify/lib'

export default {
  components: {
    'v-data-table': VDataTable,
    'v-data-table-header-mobile': VDataTableHeaderMobile,
  },

  data: () => ({
    headers: [
      {
        text: 'Dessert (100g serving)',
        align: 'start',
        sortable: false,
        value: 'name',
      },
      { text: 'Calories', value: 'calories' },
      { text: 'Fat (g)', value: 'fat' },
      { text: 'Carbs (g)', value: 'carbs' },
      { text: 'Protein (g)', value: 'protein' },
      { text: 'Iron (%)', value: 'iron' },
    ],
    desserts: [
      {
        name: 'Frozen Yogurt',
        calories: 159,
        fat: 6.0,
        carbs: 24,
        protein: 4.0,
        iron: '1%',
      },
      {
        name: 'Ice cream sandwich',
        calories: 237,
        fat: 9.0,
        carbs: 37,
        protein: 4.3,
        iron: '1%',
      },
      {
        name: 'Eclair',
        calories: 262,
        fat: 16.0,
        carbs: 23,
        protein: 6.0,
        iron: '7%',
      },
      {
        name: 'Cupcake',
        calories: 305,
        fat: 3.7,
        carbs: 67,
        protein: 4.3,
        iron: '8%',
      },
      {
        name: 'Gingerbread',
        calories: 356,
        fat: 16.0,
        carbs: 49,
        protein: 3.9,
        iron: '16%',
      },
      {
        name: 'Jelly bean',
        calories: 375,
        fat: 0.0,
        carbs: 94,
        protein: 0.0,
        iron: '0%',
      },
      {
        name: 'Lollipop',
        calories: 392,
        fat: 0.2,
        carbs: 98,
        protein: 0,
        iron: '2%',
      },
      {
        name: 'Honeycomb',
        calories: 408,
        fat: 3.2,
        carbs: 87,
        protein: 6.5,
        iron: '45%',
      },
      {
        name: 'Donut',
        calories: 452,
        fat: 25.0,
        carbs: 51,
        protein: 4.9,
        iron: '22%',
      },
      {
        name: 'KitKat',
        calories: 518,
        fat: 26.0,
        carbs: 65,
        protein: 7,
        iron: '6%',
      },
    ],
  }),
}
</script>

Props

Here are the props you can pass to the v-data-table-header-mobile component:

• headers (required): an array of objects representing the headers of the data table.
• items-per-page: the number of items to show per page on the mobile header.

Slots

The v-data-table-header-mobile component has one default slot, default, which is used to set the content of the data table header. The default slot is not needed in most cases, as the component automatically generates the header based on the headers prop. However, you can use the default slot to customize the header as needed.

In addition to the default slot, the v-data-table component has a header.mobile slot, which is used to insert the v-data-table-header-mobile component into the data table. You can customize this slot as needed to change the placement or size of the mobile header.