Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Markup Table
We can change the separators that we add to the cells with the separator prop.
For instance, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-markup-table separator="cell">
<template>
<thead>
<tr>
<th class="text-left">Dessert (100g serving)</th>
<th class="text-right">Calories</th>
<th class="text-right">Fat (g)</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">Frozen Yogurt</td>
<td class="text-right">159</td>
<td class="text-right">6</td>
</tr>
<tr>
<td class="text-left">Ice cream</td>
<td class="text-right">237</td>
<td class="text-right">9</td>
</tr>
</tbody>
</template>
</q-markup-table>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app"
});
</script>
</body>
</html>
to add the separator prop to the q-markup-table component.
cell adds both the vertical and horizontal borders for the cells.
Other values include horizontal , vertical , and none .
We can add the dark prop to change the text and separator to white so they can be displayed on a dark background:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-markup-table dark class="bg-indigo-8">
<template>
<thead>
<tr>
<th class="text-left">Dessert (100g serving)</th>
<th class="text-right">Calories</th>
<th class="text-right">Fat (g)</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">Frozen Yogurt</td>
<td class="text-right">159</td>
<td class="text-right">6</td>
</tr>
<tr>
<td class="text-left">Ice cream</td>
<td class="text-right">237</td>
<td class="text-right">9</td>
</tr>
</tbody>
</template>
</q-markup-table>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app"
});
</script>
</body>
</html>
We can customize the table header with Quasar’s built-in classes:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-markup-table>
<template>
<thead class="bg-teal">
<tr>
<th colspan="5">
<div class="row no-wrap items-center">
<q-img
style="width: 70px;"
:ratio="1"
class="rounded-borders"
src="https://cdn.quasar.dev/img/donuts.png"
>
</q-img>
<div class="text-h4 q-ml-md text-white">Sweets</div>
</div>
</th>
</tr>
<tr>
<th class="text-left">Dessert (100g serving)</th>
<th class="text-right">Calories</th>
<th class="text-right">Fat (g)</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">Frozen Yogurt</td>
<td class="text-right">159</td>
<td class="text-right">6</td>
</tr>
<tr>
<td class="text-left">Ice cream</td>
<td class="text-right">237</td>
<td class="text-right">9</td>
</tr>
</tbody>
</template>
</q-markup-table>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app"
});
</script>
</body>
</html>
We have a div in the th element and we set the colspan to 5 to make it span the whole row.
Conclusion
We can add a table to our Vue app with Quasar’s q-markup-table component.
