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.
Row Selection
We can enable row select with the selection and selected.sync props.
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>
<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="Treats"
:data="data"
:columns="columns"
row-key="name"
selection="single"
:selected.sync="selected"
>
</q-table>
<div class="q-mt-md">
{{ selected }}
</div>
</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,
selected: []
}
});
</script>
</body>
</html>
selection is set to 'single' so that only one row can be selected at a time.
selected has the selected row’s data in an array.
We can set selection to 'multiple' to enable multiple selection.
Visible Columns
We can set the columns that are visible in a Quasar table with the visible-columns prop:
<!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
title="Treats"
:data="data"
:columns="columns"
row-key="name"
:visible-columns="['dessert','calories']"
>
</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,
}
});
</script>
</body>
</html>
The visible-columns prop has an array with the property name of the columns we want to show.
The columns that have the required property set to true in the column definition can’t be hidden.
Conclusion
We can enable row selection and change the visibility of columns with Quasar’s q-table component.