Creating Engaging Vue Applications with the Quasar Framework
Written on
Chapter 1: Introduction to Quasar
Quasar is a widely-used UI library for Vue that enables developers to create visually appealing applications. In this guide, we will explore how to leverage the Quasar library to build Vue applications featuring grid-style tables.
Section 1.1: Implementing Grid-Style Tables
To incorporate a grid-style table into your Vue application, you can utilize the q-table component from Quasar. Below is an example of how you might set this up in your HTML:
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
type="text/css"
/>
<link
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<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-table
grid
title="Treats" :data="data" :columns="columns"
row-key="name" :filter="filter"
hide-header
>
<template v-slot:top-right>
<q-input
borderless
dense
debounce="300"
v-model="filter"
placeholder="Search"
>
<template v-slot:append>
<q-icon name="search"></q-icon></template>
</q-input>
</template>
</q-table>
</div>
</q-layout>
</div>
<script>
const columns = [
{
name: "name",
required: true,
label: "Dessert",
align: "left",
field: (row) => row.name,
format: (val) => ${val},
sortable: true
},
{
name: "calories",
align: "center",
label: "Calories",
field: "calories",
sortable: true
},
{ name: "fat", label: "Fat (g)", field: "fat", sortable: true },
{
name: "calcium",
label: "Calcium (%)",
field: "calcium",
sortable: true,
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
}
];
const data = [
{ name: "Frozen Yogurt", calories: 159, fat: 6.0, calcium: "14%" },
{ name: "Ice cream sandwich", calories: 237, fat: 9.0, calcium: "8%" },
{ name: "Eclair", calories: 262, fat: 16.0, calcium: "6%" },
{ name: "Honeycomb", calories: 408, fat: 3.2, calcium: "0%" },
{ name: "Donut", calories: 452, fat: 25.0, calcium: "2%" },
{ name: "KitKat", calories: 518, fat: 26.0, calcium: "12%" }
];
new Vue({
el: "#q-app",
data: {
columns,
data,
filter: ""
}
});
</script>
</body>
</html>
In this setup, the grid property activates the grid display, allowing each row's details to be shown in separate cells. The filter property links to a reactive string property. A search input is included in the top-right slot, enabling real-time filtering as keywords are entered.
This video tutorial walks through building a Vue.js application using the Quasar framework, guiding you step-by-step in creating an engaging app.
Section 1.2: Customizing Grid Styles
You can also modify the visual style of the grid cards using the card-class property. Here’s how you would set that up:
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
type="text/css"
/>
<link
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<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-table
grid
card-class="bg-primary text-white"
title="Treats" :data="data" :columns="columns"
row-key="name" :filter="filter"
hide-header
>
<template v-slot:top-right>
<q-input
borderless
dense
debounce="300"
v-model="filter"
placeholder="Search"
>
<template v-slot:append>
<q-icon name="search"></q-icon></template>
</q-input>
</template>
</q-table>
</div>
</q-layout>
</div>
<script>
const columns = [
{
name: "name",
required: true,
label: "Dessert",
align: "left",
field: (row) => row.name,
format: (val) => ${val},
sortable: true
},
{
name: "calories",
align: "center",
label: "Calories",
field: "calories",
sortable: true
},
{ name: "fat", label: "Fat (g)", field: "fat", sortable: true },
{
name: "calcium",
label: "Calcium (%)",
field: "calcium",
sortable: true,
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
}
];
const data = [
{ name: "Frozen Yogurt", calories: 159, fat: 6.0, calcium: "14%" },
{ name: "Ice cream sandwich", calories: 237, fat: 9.0, calcium: "8%" },
{ name: "Eclair", calories: 262, fat: 16.0, calcium: "6%" },
{ name: "Honeycomb", calories: 408, fat: 3.2, calcium: "0%" },
{ name: "Donut", calories: 452, fat: 25.0, calcium: "2%" },
{ name: "KitKat", calories: 518, fat: 26.0, calcium: "12%" }
];
new Vue({
el: "#q-app",
data: {
columns,
data,
filter: ""
}
});
</script>
</body>
</html>
In this version, the card-class property is applied to enhance the style of grid cards.
This video demonstrates the functionalities and capabilities of the Quasar Table component in Vue.js, showcasing practical usage scenarios.
Conclusion
The q-table component from Quasar can be effectively utilized to display data in a grid format, with each row's information conveniently arranged in individual cells.