Member-only story
Developing Vue Apps with the Quasar Library — Sticky Table and Cell Separators
4 min readFeb 13, 2021
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…
