Sergii Shilingov. Components Library

Data Tables

Data tables The v-data-table component is used for displaying tabular data. Features include sorting, searching, pagination, inline-editing, header tooltips, and row selection. See documentation.

Selectable rows

<v-data-table
  v-model="selected"
  :headers="headers"
  :items="desserts"
  :single-select="singleSelect"
  item-key="name"
  show-select
  class="elevation-1"
>
  <template v-slot:top>
    <v-switch v-model="singleSelect" label="Single select" class="pa-3"></v-switch>
  </template>
</v-data-table>

export default {
  data () {
    return {
      singleSelect: false,
      selected: [],
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          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%',
        },
      ],
    }
  },
}

The show-select prop will render a checkbox in the default header to toggle all rows, and a checkbox for each default row. You can customize these with the slots header.data-table-select and item.data-table-select respectively. You can also switch between allowing multiple selected rows at the same time or just one with the single-select prop.

Single select

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)	Iron (%)
Frozen Yogurt	159	6	24	4	1%
Ice cream sandwich	237	9	37	4.3	1%
Eclair	262	16	23	6	7%
Cupcake	305	3.7	67	4.3	8%
Gingerbread	356	16	49	3.9	16%
Jelly bean	375	0	94	0	0%
Lollipop	392	0.2	98	0	2%
Honeycomb	408	3.2	87	6.5	45%
Donut	452	25	51	4.9	22%
KitKat	518	26	65	7	6%

Grouped rows

<v-data-table
  :headers="headers"
  :items="desserts"
  item-key="name"
  group-by="category"
  class="elevation-1"
  show-group-by
></v-data-table>

export default {
   data () {
     return {
       headers: [
         {
           text: 'Dessert (100g serving)',
           align: 'left',
           value: 'name',
         },
         { text: 'Category', value: 'category' },
       ],
       desserts: [
         {
           name: 'Frozen Yogurt',
           category: 'Ice cream',
         },
         {
           name: 'Ice cream sandwich',
           category: 'Ice cream',
         },
         {
           name: 'Eclair',
           category: 'Cookie',
         },
         {
           name: 'Cupcake',
           category: 'Pastry',
         },
         {
           name: 'Gingerbread',
           category: 'Cookie',
         },
         {
           name: 'Jelly bean',
           category: 'Candy',
         },
         {
           name: 'Lollipop',
           category: 'Candy',
         },
         {
           name: 'Honeycomb',
           category: 'Toffee',
         },
         {
           name: 'Donut',
           category: 'Pastry',
         },
         {
           name: 'KitKat',
           category: 'Candy',
         },
       ],
     }
   },
 }

Using the group-by and group-desc props you can group rows on an item property. The show-group-by prop will show a group button in the default header.

Dessert (100g serving)group
category: Candy
Jelly bean
Lollipop
KitKat
category: Cookie
Eclair
Gingerbread
category: Ice cream
Frozen Yogurt
Ice cream sandwich
category: Pastry
Cupcake
Donut
category: Toffee
Honeycomb

Sort on multiple columns

<v-data-table
  :headers="headers"
  :items="desserts"
  :sort-by="['calories', 'fat']"
  :sort-desc="[false, true]"
  multi-sort
  class="elevation-1"
></v-data-table>

export default {
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          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: 200,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          calories: 200,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
        },
        {
          name: 'Eclair',
          calories: 300,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
        },
        {
          name: 'Cupcake',
          calories: 300,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%',
        },
        {
          name: 'Gingerbread',
          calories: 400,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%',
        },
        {
          name: 'Jelly bean',
          calories: 400,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%',
        },
        {
          name: 'Lollipop',
          calories: 400,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%',
        },
        {
          name: 'Honeycomb',
          calories: 400,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%',
        },
        {
          name: 'Donut',
          calories: 500,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%',
        },
        {
          name: 'KitKat',
          calories: 500,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%',
        },
      ],
    }
  },
}

Using the multi-sort prop will enable you to sort on multiple columns at the same time. When enabled, you can pass arrays to both sort-by and sort-desc to programmatically control the sorting, instead of single values.

Dessert (100g serving)	Calories1	Fat (g)2	Carbs (g)	Protein (g)	Iron (%)
Ice cream sandwich	200	9	37	4.3	1%
Frozen Yogurt	200	6	24	4	1%
Eclair	300	16	23	6	7%
Cupcake	300	3.7	67	4.3	8%
Gingerbread	400	16	49	3.9	16%
Honeycomb	400	3.2	87	6.5	45%
Lollipop	400	0.2	98	0	2%
Jelly bean	400	0	94	0	0%
KitKat	500	26	65	7	6%
Donut	500	25	51	4.9	22%

Search

<v-card>
  <v-card-title>
    Nutrition
    <v-spacer></v-spacer>
    <v-text-field
      v-model="search"
      append-icon="search"
      label="Search"
      single-line
      hide-details
    ></v-text-field>
  </v-card-title>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :search="search"
  ></v-data-table>
</v-card>

export default {
  data () {
    return {
      search: '',
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          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%',
        },
      ],
    }
  },
}

The data table exposes a search prop that allows you to filter your data.

Nutrition

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)	Iron (%)
Frozen Yogurt	159	6	24	4	1%
Ice cream sandwich	237	9	37	4.3	1%
Eclair	262	16	23	6	7%
Cupcake	305	3.7	67	4.3	8%
Gingerbread	356	16	49	3.9	16%
Jelly bean	375	0	94	0	0%
Lollipop	392	0.2	98	0	2%
Honeycomb	408	3.2	87	6.5	45%
Donut	452	25	51	4.9	22%
KitKat	518	26	65	7	6%

My Library

Metronic Components

Metronic Custom

System Messages

Notifications

Customer Care

Reports

Memebers

User Profile 12 messages

Recent Notifications

Data Tables

Selectable rows

Grouped rows

Sort on multiple columns

Search

My Library

Metronic Components

Metronic Custom

User Notifications 23 new

Quick Actions

My Cart

System Messages

Notifications

User Profile 12 messages

Recent Notifications

Data Tables

Selectable rows

Grouped rows

Sort on multiple columns

Search