Creating Dynamic Vue Applications with Quasar's Pagination Features
Written on
Introduction to Quasar and Vue Development
Quasar is a widely-used UI library for Vue, enabling developers to create visually appealing applications. In this guide, we will explore how to utilize Quasar's features, particularly focusing on table pagination.
The q-table Component and Pagination
Quasar’s q-table component includes built-in pagination functionality. For example, consider the following HTML setup:
<!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
title="Desserts" :data="data" :columns="columns"
row-key="name" :pagination="initialPagination"
>
</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,
initialPagination: {
sortBy: "desc",
descending: false,
page: 2,
rowsPerPage: 3
}
}
});
</script>
</body>
</html>
To implement pagination, we set various properties:
- sortBy: Determines the sorting criteria for the rows.
- descending: Indicates if data should be sorted in descending order.
- page: Defines the current page number.
- rowsPerPage: Specifies how many rows are displayed per page.
Utilizing the sync modifier allows us to access the current pagination state whenever needed.
Customizing Pagination Functionality
We can further customize the pagination feature by using the pagination slot:
<template v-slot:pagination="scope">
<q-btn
v-if="scope.pagesNumber > 2"
icon="first_page"
color="grey-8"
round
dense
flat :disable="scope.isFirstPage"
@click="scope.firstPage"
>
</q-btn>
<q-btn
icon="chevron_left"
color="grey-8"
round
dense
flat :disable="scope.isFirstPage"
@click="scope.prevPage"
>
</q-btn>
<q-btn
icon="chevron_right"
color="grey-8"
round
dense
flat :disable="scope.isLastPage"
@click="scope.nextPage"
>
</q-btn>
<q-btn
v-if="scope.pagesNumber > 2"
icon="last_page"
color="grey-8"
round
dense
flat :disable="scope.isLastPage"
@click="scope.lastPage"
>
</q-btn>
</template>
In this setup:
- scope.pagesNumber gives the total number of pages.
- scope.isFirstPage checks if the current page is the first.
- scope.firstPage, scope.prevPage, and scope.nextPage provide navigation options.
The first video titled Quasar Vue's QTable (3/6) - Loading State, Pagination, and Sorting dives deeper into the q-table component's features, including how to implement loading states and sorting.
The second video, Learn Quasar Components - QPagination, offers insights into customizing pagination within Quasar components.
Conclusion
The q-table component from Quasar makes it straightforward to integrate pagination into your tables, enhancing the user experience significantly. This flexibility allows developers to create more interactive and dynamic applications.