Creating Engaging Vue Applications with Quasar: Virtual Scrolling
Written on
Chapter 1: Introduction to Quasar
Quasar is a widely recognized Vue UI library that enables developers to create visually appealing Vue applications. In this article, we will explore the process of building Vue applications utilizing the Quasar UI library.
Section 1.1: Implementing Virtual Scrolling
One of the standout features of Quasar is the ability to implement virtual scrolling in tables using the q-table component's virtual-scroll property. This feature significantly enhances performance when dealing with large datasets by rendering only the visible items.
For example, consider the following HTML setup:
<!DOCTYPE html>
<html>
<head>
</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 style="height: 400px;" title="Treats" :data="data" :columns="columns" row-key="index" virtual-scroll :pagination.sync="pagination" :rows-per-page-options="[0]">
</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 seed = [
{ 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%" }
];
let data = [];
for (let i = 0; i < 1000; i++) {
data.push(...[...seed]);}
data.forEach((row, index) => {
row.index = index;});
new Vue({
el: "#q-app",
data: { columns, data, pagination: { rowsPerPage: 0 } }
});
</script>
</body>
</html>
To enable pagination, simply set rowsPerPage to a value greater than zero.
Section 1.2: Customizing Row Displays
Quasar also allows for the customization of row displays by utilizing header and body slots. Here’s how you can do it:
<!DOCTYPE html>
<html>
<head>
</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 style="height: 400px;" title="Treats" :data="data" :columns="columns" row-key="index" virtual-scroll :pagination.sync="pagination" :rows-per-page-options="[0]">
<template v-slot:header="props">
<q-tr :props="props">
<q-th></q-th>
<q-th v-for="col in props.cols" :key="col.name" :props="props">{{ col.label }}</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" :key="m_${props.row.index}">
<q-td>Name: {{ props.row.name }}</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">{{ col.value }}</q-td>
</q-tr>
<q-tr :props="props" :key="e_${props.row.index}" class="q-virtual-scroll--with-prev">
<q-td colspan="100%">
<div class="text-left">This is the second row generated from the same data: {{ props.row.name }}</div></q-td>
</q-tr>
</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, pagination: { rowsPerPage: 1000 } }
});
</script>
</body>
</html>
This approach allows us to populate the body slot with table cell data and create additional rows as needed.
Conclusion
By leveraging Quasar's q-table component, developers can easily integrate virtual scrolling and customize row displays, enhancing the user experience in Vue applications.
Chapter 2: Additional Resources
To further enhance your understanding of Quasar and Vue, check out the following video tutorials:
This tutorial walks you through creating a money management application using Vue 3 and Quasar in just two hours.
Join this tutorial to build an app with Quasar and Vue.js, perfect for beginners looking to get started.