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.
Sticky Column
We can make the first column sticky by applying some CSS styles.
To do this, we 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>
<style>
.sticky-column-table {
max-width: 600px;
}
.sticky-column-table thead tr:first-child th:first-child {
background-color: yellow;
}
.sticky-column-table td:first-child {
background-color: yellow;
}
.sticky-column-table th:first-child,
.sticky-column-table td:first-child {
position: sticky;
left: 0;
z-index: 1;
}
</style>
<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
class="sticky-column-table"
title="Treats"
:data="data"
row-key="name"
>
</q-table>
</div>
</q-layout>
</div>
<script>
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: {
data
}
});
</script>
</body>
</html>
We can make both the first column and table heading sticky with some CSS styles.
To do this, we 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>
<style>
.sticky-header-column-table {
height: 310px;
max-width: 600px;
}
.sticky-header-column-table td:first-child {
background-color: orange !important;
}
.sticky-header-column-table tr th {
position: sticky;
z-index: 2;
background: #fff;
}
.sticky-header-column-table thead tr:last-child th {
top: 48px;
z-index: 3;
}
.sticky-header-column-table thead tr:first-child th {
top: 0;
z-index: 1;
}
.sticky-header-column-table tr:first-child th:first-child {
z-index: 3;
}
.sticky-header-column-table td:first-child {
z-index: 1;
}
.sticky-header-column-table td:first-child,
.sticky-header-column-table th:first-child {
position: sticky;
left: 0;
}
</style>
<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
class="sticky-header-column-table"
title="Treats"
:data="data"
row-key="name"
>
</q-table>
</div>
</q-layout>
</div>
<script>
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: {
data
}
});
</script>
</body>
</html>
We set position to sticky on both the first td and first th .
And the z-index of the th and tr to be above 0 show the th above the other elements.
Separator
We can set the separator prop to set the border of the cells.
For example, 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-table
class="sticky-header-column-table"
title="Treats"
:data="data"
row-key="name"
separator="vertical"
>
</q-table>
</div>
</q-layout>
</div>
<script>
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: {
data
}
});
</script>
</body>
</html>
To set the separator prop to vertical to add borders to the columns and the headings.
Other values include horizontal to add borders for the rows, cell to add borders to all cells, and none to remove the separators.
Conclusion
We can add sticky headers and columns with some CSS and add separators for cells with Quasar’s q-table component.