Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Data Tables
The v-data-table component is used to display tabular data.
It includes features like sorting, searching, pagination, editing, and row selection.
For example, we can write:
<template>
<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-subheader>Dessert</v-subheader>
</template>
</v-data-table>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
singleSelect: false,
selected: [],
headers: [
{
text: "Dessert (100g serving)",
align: "start",
sortable: false,
value: "name",
},
{ text: "Calories", value: "calories" },
{ text: "Fat (g)", value: "fat" },
],
desserts: [
{
name: "Frozen Yogurt",
calories: 159,
fat: 6.0,
},
{
name: "Ice cream sandwich",
calories: 237,
fat: 9.0,
},
{
name: "Eclair",
calories: 262,
fat: 16.0,
},
],
}),
};
</script>
We have the v-data-table component to add our table.
The v-model has the selected rows.
items have the items to display.
single-select lets us toggle single select.
The headers prop have the headers.
The value is an array with some objects.
The text property has the column heading text.
align has the text alignment.
sortable lets us set whether it’s sortable or not.
value has the property name of the entry to display.
Pagination is automatically included.
Grouped Rows
We can group different rows together with the group-by and group-desc props.
For example, we can write:
<template>
<v-data-table
v-model="selected"
:headers="headers"
:items="desserts"
:single-select="singleSelect"
item-key="name"
show-group-by
group-by="category"
class="elevation-1"
>
<template v-slot:top>
<v-subheader>Dessert</v-subheader>
</template>
</v-data-table>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
headers: [
{
text: "Dessert (100g serving)",
align: "start",
value: "name",
groupable: false,
},
{ text: "Category", value: "category", align: "right" },
{ text: "Dairy", value: "dairy", align: "right" },
],
desserts: [
{
name: "Frozen Yogurt",
category: "Ice cream",
dairy: "Yes",
},
{
name: "Ice cream sandwich",
category: "Ice cream",
dairy: "Yes",
},
{
name: "Eclair",
category: "Cookie",
dairy: "Yes",
},
],
}),
};
</script>
We have the v-data-table component to display items in a group.
The group-by prop takes the string with the property key to group by.
The show-group-by prop lets us add the group by button to let us group by the properties.
Sort on Multiple Columns
We can sort a table by multiple columns.
For example, we can write:
<template>
<v-data-table
:headers="headers"
:items="desserts"
:sort-by="['calories', 'fat']"
:sort-desc="[false, true]"
multi-sort
class="elevation-1"
></v-data-table>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
headers: [
{
text: "Dessert (100g serving)",
align: "start",
sortable: false,
value: "name",
},
{ text: "Calories", value: "calories" },
{ text: "Fat (g)", value: "fat" },
],
desserts: [
{
name: "Frozen Yogurt",
calories: 200,
fat: 6.0,
},
{
name: "Ice cream sandwich",
calories: 200,
fat: 9.0,
},
{
name: "Eclair",
calories: 300,
fat: 16.0,
},
],
}),
};
</script>
We added the sort-by prop with an array of the property names to sort by.
sort-desc lets us set whether to sort the column in the position in sort-by in descending order or not.
Conclusion
We can add tables that can be sorted and grouped with Vuetify.
