Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Tables
We can add a table with the v-simple-table component.
For example, we can add it by writing:
<template>
<v-simple-table height="300px">
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Name</th>
<th class="text-left">Calories</th>
</tr>
</thead>
<tbody>
<tr v-for="item in desserts" :key="item.name">
<td>{{ item.name }}</td>
<td>{{ item.calories }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
desserts: [
{
name: "Yogurt",
calories: 159,
},
{
name: "Ice cream sandwich",
calories: 237,
},
{
name: "Eclair",
calories: 262,
}
],
}),
};
</script>
We have the v-simple-table component with the default slot populated with the table rows.
We just use v-for to render the array entries into rows.
Fixed Header
The fixed-header with the height prop together let us fix the header to the top of the table.
For example, we can write:
<template>
<v-simple-table height="150px" fixed-header>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Name</th>
<th class="text-left">Calories</th>
</tr>
</thead>
<tbody>
<tr v-for="item in desserts" :key="item.name">
<td>{{ item.name }}</td>
<td>{{ item.calories }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
desserts: [
{
name: "Yogurt",
calories: 159,
},
{
name: "Ice cream sandwich",
calories: 237,
},
{
name: "Eclair",
calories: 262,
},
],
}),
};
</script>
to make the table scrollable and keep the header always on top.
Dense Table
To add a dense version of the table, we can use the dense prop.
For example, we can write:
<template>
<v-simple-table dense>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Name</th>
<th class="text-left">Calories</th>
</tr>
</thead>
<tbody>
<tr v-for="item in desserts" :key="item.name">
<td>{{ item.name }}</td>
<td>{{ item.calories }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
desserts: [
{
name: "Yogurt",
calories: 159,
},
{
name: "Ice cream sandwich",
calories: 237,
},
{
name: "Eclair",
calories: 262,
},
],
}),
};
</script>
The rows will be shorter than the default version.
Dark Theme
The dark prop lets us switch the table to the dark theme:
<template>
<v-simple-table dark>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Name</th>
<th class="text-left">Calories</th>
</tr>
</thead>
<tbody>
<tr v-for="item in desserts" :key="item.name">
<td>{{ item.name }}</td>
<td>{{ item.calories }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
desserts: [
{
name: "Yogurt",
calories: 159,
},
{
name: "Ice cream sandwich",
calories: 237,
},
{
name: "Eclair",
calories: 262,
},
],
}),
};
</script>
Now the table will have a black background.
Conclusion
We can add a simple table with Vuetify’s v-simple-table component.
