DEV Community: Quasar

QuasarConf 2022 - Speakers and Schedule

Scott Molinari — Tue, 28 Jun 2022 19:26:29 +0000

Get out your calendar, and save the date!

When will it be?

Saturday the 9th of July, 2022 - 3 p.m. GMT

Where will it be?

Streamed Live on Youtube (bookmark the link!)

The Speakers, Topics and Schedule

(all times GMT)

Quick Welcome and Intro - 3 p.m.

Talk 1 - 3:05 p.m. - Five Refactoring Tips For Gorgeous, Reusable Code

Let's make our Quasar code crystal clear and easy to follow, by breaking it into smaller pieces. Luke will show how you can truly separate concerns with little known, powerful refactoring techniques... Techniques that will have your coworkers smiling when they dive into your codebase!

Talk 2 - 3:30 p.m. - Quasar and TypeScript: A Deep Dive

Yusuf will take us on a deep dive into Quasar's TS generation pipeline and JSON API structure. The history behind these, the progress we've made over the years, and future plans will also be covered.

Talk 3 - 3:55 p.m. - All is Well, When There is Quasar!

Hari will explain how his and his team used Quasar/VueJS along with AWS & Feathers JS to help them in developing an academic platform in record time. He'll cover how they used the Quasar Ecosystem - and how they built up their Resume Builder, Simple CRUD User Interfaces, Social Feed and a Subscription & Licensing System including short demos showcasing the real world use of their use of Quasar components.

Talk 4 - 4:20 p.m. - Using the Composition API with TypeScript to Build Better Forms

In this talk, Bruno will cover how you can leverage the Composition API by creating composables to abstract the logic out of your forms, making that logic reusable.

Talk 5 - 4:45 p.m. - Quasar Themes and Theming

In the talk Bart will give you a look at the state of Quasar and theming. We'll go into the provided light and dark themes provided by Quasar and then look at how to expand into more custom themes, based on the gathered knowledge on how Quasar works.

Talk 6 - 5:10 p.m. - Component Testing Tip & Tricks with Quasar

Quasar has supported Cypress Component Testing out of the box for some months, but there are some caveats due to Quasar feature-packed components having a much more complex HTML structure than native input elements.

Paolo will cover how you can add Cypress Component Testing to your Quasar project and show you some tips and tricks about testing some of the most complex Quasar components.

--- 20 Minute Break ---

Talk 7 - 5:55 p.m. - Wrapping and Extending Quasar Components using TypeScript

Evert will showcase 2 options on how to wrap and extend Quasar components. This can be used to set defaults for properties and use your wrapped component instead of the default Quasar one throughout your application. Of course doing all this while preserving as many TypeScript/IDE features that are currently out there, like:

property autocompletion and type checking
property documentation on hover
typed component methods
typed slots

Talk 8 - 6:20 p.m. - Embedding Quasar Apps Into Lightweight Hardware

Mike will cover workflow and methodology for incorporating Quasar/Vue Apps into resource constrained embedded systems hardware such as the ESP32 processor.

Talk 9 - 6:45 p.m. - Building Engineering Tools with Quasar

Carlos will show two examples of Quasar apps he developed as engineering tools. He'll demonstrate how Quasar helped him with the rapid development of the tools and how these benefits can also help you.

Talk 10 - 7:10 p.m. - Lessons Learned Migrating an App to Quasar and Vue3

In early 2022, Martin decided to upgrade one of his side projects from Vue2+Buefy to Vue3+Quasar. His application gets hundreds of thousands of visitors per day, so he had to tread carefully. Martin's talk will go into why he made the decision to migrate, what the migration was like, and how he rolled out the new version.

Should you have any questions, please post them in the comments below or join us on Discord.

Although we are planning to carry out the conference as advertised, the schedule is subject to change, without notice.

Twitter
Facebook

It's Back! QuasarConf 2022 - Call for Proposals

Scott Molinari — Mon, 23 May 2022 11:09:03 +0000

We are happy to announce the comeback of our yearly online conference about all things Quasar Framework and Vue. We had success with our first ever conference and we'd like to continue with what we intend to be a tradition.

When will it be?

Saturday the 9th of July, 2022 - 3 p.m. GMT

Would you like to do a talk?

We are looking for devs in the community, who would like to present their knowledge about anything related to Quasar and/or Vue.

Your talk should go for 20 minutes max. We'll also be offering the viewers the ability to ask questions in the chat, so after the talk, we'll have a 5 minute Q&A with the speaker.

If you are interested, please sign up by filling out our Call for Proposals form.

There is a limited number of available spaces for talks.
Deadline for proposal acceptance is the 9th of June, 2022.

What to expect?

At our last (and first) conference 2 years ago, we had over 700 live viewers and the video has been watched over 17k times since then. Not too shabby for a first conference!

We hope to be breaking these firsts this year and with your help, it's pretty certain we can.

If you have any questions, you can either write them down below or use our Discord.

We'll be making more announcements about the conference, the participants and content in later posts.

We are looking forward to your talk proposals!!

If you'd like to stay in-tune with conference and other Quasar news, please follow our channels.

Facebook
Twitter
Follow the tag #quasarconf on Twitter

How To Use Google Maps In A Quasar Project

Luke — Fri, 01 Apr 2022 23:31:15 +0000

I freaking LOVE the Quasar community!

One of the Quasar core team members (Yusuf) got quasar vite working with Stackblitz! Amazing.

Now you can start a Quasar project, in your browser, in seconds!

And here's Google Maps in a Quasar Project on stackblitz:

Anywho...

A friend of mine on twitter asked how we can setup Google Maps with Quasar. So here it is!

Step 1: Install Vue 3 Google Maps

npm install -S @fawmi/vue-google-maps
# or
yarn add @fawmi/vue-google-maps

Step 2: Create a Boot File

Vue Google Maps needs to "hook in" to Quasar. We can do this with a boot file!

Diving in 🤿
src/boot/google-maps.js

import { boot } from 'quasar/wrappers';
import VueGoogleMaps from '@fawmi/vue-google-maps';

export default boot(({ app }) => {
  app.use(VueGoogleMaps, { // 🤿 Vue App. Please install Vue Google Maps
    load: {
      key: '', // 🤿 I don't have a google key, so leave it blank for now
    },
  });
});

Currently this file is doing... nothing. We have to tell Quasar about it, so add the following to
quasar.config.js for vite, or quasar.conf.js for webpack

module.exports = configure(function (/* ctx */) {
  return {
    //...
    boot: ['google-maps'], // 🤿 Quasar, please run this bootfile at startup!
    // ...
  }
}

Note that it's important to be polite to Quasar when writing comments.

Google Maps should now be installed!

Step 2: Create a map components

Let's dive into IndexPage.vue and add in our map component to check everything is working!

<template>
  <q-page>
    <div style="height: calc(100vh - 50px)">
      <!-- 🤿 Vue, please render the Google Map Component here -->
      <GMapMap
        :center="center"
        :zoom="10"
      />
    </div>
  </q-page>
</template>

<script setup>
const center = { lat: 51.093048, lng: 6.84212 };
</script>

done!

Now let's take a squiz at a fuller example:

<template>
  <q-page>
    <div style="height: calc(100vh - 50px)">
      <GMapMap
        :center="center"
        :zoom="10"
        map-type-id="terrain"
      >
        <GMapCluster :zoomOnClick="true">
          <GMapMarker
            :key="index"
            v-for="(m, index) in markers"
            :position="m.position"
            :clickable="true"
            :draggable="true"
            @click="center = m.position"
          />
        </GMapCluster>
      </GMapMap>
    </div>
  </q-page>
</template>

<script setup>
const center = { lat: 51.093048, lng: 6.84212 };
const markers = [
  {
    position: {
      lat: 51.093048,
      lng: 6.84212,
    },
  },
  {
    position: {
      lat: 51.198429,
      lng: 6.69529,
    },
  },
  {
    position: {
      lat: 51.165218,
      lng: 7.067116,
    },
  },
  {
    position: {
      lat: 51.09256,
      lng: 6.84074,
    },
  },
];
</script>

And that my fine coding friends is how you add Google Maps to a Quasar project.

Two things before I go!

1. QuasarCast.Com

Want to learn Quasar with videos, presented by someone who LOVES to code! Someone who believes in you, and wants to see you build GORGEOUS sites with Quasar?

Wack this link and make yourself an account at QuasarCast.Com

2. Always Remember

Especially when times are tough and you feel like your code just won't work.

If you keep at it,

You can build anything...

Quasar and Vite - Frontend Application Development at Light Speed

Scott Molinari — Mon, 14 Mar 2022 19:50:22 +0000

This week notes the accomplishment of a major milestone in Quasar's roadmap. The integration of Vite as a driver of the Quasar CLI, and as a much better alternative to the slower and more complicated Webpack based CLI.

Quick Introduction Video

Why Vite?

If you haven't heard about Vite yet and why it is so good, Vite has the following main selling points:

(from the Vite docs)

A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).

A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

In other words, the main goal Evan You (creator of Vue) had for creating Vite (pronounced like veet) was to majorly improve the developer experience. He saw that the current process of bundling and then loading the application into the browser and developing with Hot-Module-Replacement (HMR) could be improved upon with the new ES Module resolution system available in all browsers.

That is the TLDR version. If you'd like, you can also read the much more technical reasons.

Bottom line, the avoidance of the bundling or packing step for the initial build, also during HMR, saves a ton of time, even with the smallest of projects (see below). But, this advantage is especially noticeable, once your project gets even remotely bigger.

Initial Loading of a new Quasar project with Webpack

Initial Loading of a new Quasar project with Vite

Ok. The difference with an initial project isn't so predominant, but it is there. Think about this though. Once your project starts growing, the Vite-based CLI's performance in building your app stays about the same or will only slow a little for the initial startup. The Webpack performance will degrade much worse as your project size grows. In other words, what you see here as the initial startup speed is about what you'll have for any size project. On top of that, any updates from HMR will be instantaneous with Vite. With Webpack, this performance also degrades with the size of your project.

It was clear to the team instantly, when Vite came out, that Quasar would need to integrate it. So, it wasn't a matter of "If", but rather "When?". It was just a matter of time, dev availability with Razvan and our prerogatives for it to happen. Our first major goal was to get Quasar onto Vue 3. That happened last year. All the while, Vite was getting better and more stable. And this year, Quasar now has a Vite based CLI.

How cool is that? 🤩

Getting Started

If you'd like to just get started with Vite in a new project, all you have to do is run...

$ yarn create quasar
# or:
$ npm init quasar

Note: The command quasar create is no longer usable for a Quasar project with the new CLI (>1.3.0).

NOTE2: the Vite CLI was still in BETA at the time this article was published. So, it is not production ready, if it is still in beta or RC status!!!

While running the command above, the creation process will pose question to you for the project creation. Answer the questions as best you can. Hit enter for the defaults (except for the Vite CLI), if you are uncertain what to answer. Once the creation process is done, navigate to the newly created project folder and run...

$ quasar dev

And off you go.. with Lightning fast development at your fingertips!!!

Migration

Maybe you have a Quasar project and wish to move it to the new Vite CLI. If that is the case, then let's get you up to.....Vite, with the official migration guide.

Roughly, the migration guide takes you through the following steps:

Create a new project with the newest version of the (global) Quasar CLI
Copy specific folders into the new project from your old project, also doing some small edits on specific files.
Update the quasar.config.js file notice it's changes from quasar-conf.js) with the new settings, should you need them.
Update package.json to remove the browserlist entry (if you want). It is no longer valid and not needed, at least for Vite.
Delete a folder for SSR and move another.
For PWA, you'll need to move your manifest to quasar.config.js
If you are using BEX mode, you'll also need to port over your manifest files manually.

So, not too much work necessary to get a much better DX.

Again, more details can be found in the migration guide.

That's it!

Let us know in the comments about what you think! Is Vite with Quasar awesome or what?

Keep in touch with Quasar news.

Quasar on Twitter
Quasar on Facebook
Quasar on Discord
Quasar on Github

Modeling Data In Quasar Like A BOOOSS With VuexOrm

Luke — Mon, 07 Feb 2022 22:23:07 +0000

It's hard to express the impact VuexOrm has had on my career as a developer.

It's fundamentally changed the way I deal with data on the frontend! At Agripath (where I work), we almost NEVER deal with the store directly.

Most interactions with the store are done with VuexOrm, which gives us a gorgeous API. Stuff like this:

import User from 'models/User'
import Post from 'models/Post'

User.all()

const posts = await indexPosts()
Post.insert({ data: posts })

Post.query()
  .orderBy('rating')
  .with('comments.user')
  .get()

If that code doesn't excite you, either read it again or check your pulse!

Take a look at VuexORM video series to find out more, and learn VuexOrm!

VuexORM App Extension (AE)

Truth be told, it doesn't take too much work to setup VuexOrm with Quasar. However, there are a few things we can do to streamline the setup. Here's some of the features:

Auto import and register models to the "VuexOrm database"!
Easily create new models using Quasar's cli
models alias already registered for you

Once everything is setup, all you have to do to add a new model is run the following command:

quasar run vuex-orm new:model Todo

Now you're ready to insert, find, delete, update etc Todo's to your hearts content!

Give It A Try

Ready to take VuexORM for a spin? Take a look at the VuexOrm App Extension GitHub page and let me know how it goes!

And remember,

You can build anything...

Quasar "Nuxt-like" Routing is here!

Luke — Mon, 07 Feb 2022 12:49:41 +0000

Ever wanted auto-routing in Quasar? Kinda like Nuxt?
Well now it's possible with Quasar auto-routing

To get started:

quasar ext add auto-routing

And use the generated routes in your routes.js file:

import autoRouting from './auto-routing' // 💥

const routes = [
  ...autoRouting, // 💥

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/Error404.vue')
  }
]

export default routes

Find out more on the github repo!

This is still new, so feedback/PRs most welcome!

Thank You ktsn...

And a MASSIVE thankyou to the following libraries:
vue-route-generator
vue-router-layout

Quasar Auto Routing is basically just "sticky tape" for these two libraries so 99% of the work is not my own!

That's all for this but before I go remember,

You can build anything...

Quasar's QTable: The ULTIMATE Component (5/6) - Styling EVERYTHING!!!

Luke — Fri, 20 Aug 2021 12:33:51 +0000

Welcome back my fine devy friend!

When I started on this post, I had no idea what I was in for...

My girlfriend is in the other room, watching a Korean drama, drinking soju (and I LOVE soju).

"1 and a half hours" I told her. When will I learn! Quasar's QTable is relentlessly useful, and to show you all of it's inner powers takes time!

Anywho..

You'll love this one!

Why?

Becuase styling q-table is easy! All it takes is a sprinkle of props here and there.

Having said that, there are two ways to style q-table:

props
slots

I recommend using props where possible (and they're what we'll cover in this post), since they're easier to write, and eaiser to read.

Have You STILL Not Checkerty Checked Out QuasarComponents.Com?

If you've come this far into the series and still haven't been to QuasarComponents.Com, then what the HEY???

Head. There. Now.

I have something really cool to show you!

...

Ok, let's get started...

Setup

Here's le github repo ("le github repo" is French for "I don't speak French")

Now SLAM this into your editor!

Let's do that thing again where I dive into the code and meet you in there 🤿



<script>
import { ref } from 'vue'
// 🤿 Quasar has some rad color utilities!
// We'll use "getPaletteColor" in one of the examples.
import { colors } from 'quasar'
const { getPaletteColor } = colors

// 🤿 did saying "rad" up my street cred? I hope so.

export default {
  setup () {
    // three guesses at what we'll use this for...
    const fullscreen = ref(false)

    const rows = [
      {
        id: 1,
        name: 'Panda',
        email: 'panda@chihuahua.com',
        age: 6
      },
      {
        id: 2,
        name: 'Lily',
        email: 'lily@chihuahua.com',
        age: 5
      },
      {
        id: 3,
        name: 'Moe',
        email: 'moe@rip.com',
        age: 7
      },
      {
        id: 4,
        name: 'Avo Cado',
        email: 'free@shivacadoo.com',
        age: 3
      },
      {
        id: 5,
        name: 'Oscar',
        email: 'oscar@comehome.com',
        age: 14
      }
    ]

    // 🤿 Oh look, a fish! 🐠

    const columns = [
      { label: 'name', field: 'name', name: 'name', align: 'left' },
      { label: 'email', field: 'email', name: 'email', align: 'left' },
      { label: 'age', field: 'age', name: 'age', align: 'center' }
    ]

    return {
      rows,
      columns,
      columnsStyled,
      fullscreen
    }
  }
}
</script>

emerges from code 🤿

Did that all make sense?

Sweet! Let's start making some sexy tables...

`color`, `dense`, `dark` and `flat`



<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
  color="green"
  :loading="true"
  dense
  dark
  flat
/>

You know what a lot of people don't like about material design? The shadows.

Well guess what... Quasar makes it EASY to remove the shadow from all of its components with either flat or unelevated. As you can see in the above example, QTable ain't no exception 🙃

color changes the loading bar color, and the selected item in pagination and...

dense tightens things up. Great for when you have a large amount of data to show!

`bordered`, `flat`, `square` (Cleancut)

I call this the "Cleancut" design. It makes the table look slick and professional:



<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
  bordered
  flat
  square
/>

See what I mean? It's like the "James Bond" of table design 😎

try removing the border. You'll notice that the table stands completely on its own without a border in this example!

Specific Classes and Styles

These little helper props are awesome! Usually, they're all you'll need for designing your table:



<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
  title="Blue Chihuahua's"
  title-class="text-bold text-blue-9"
  table-class="bg-blue-9 text-white"
  table-style="border: 3px solid black;"
  table-header-style="height: 65px;"
  table-header-class="bg-blue-8"
/>

Notice we can target the

Title
Header
Body

Nice! 😊

Specific Column Classes and Styles

Now THIS is something I use all the time. The columns object itself can be tapped into so we can change the styling of columns.

Razvan (creator of Quasar) must have been in some sort of next level zen state when he was designing this work of art!



<template>
  <q-table
    :rows="rows"
    :columns="columnsStyled"
    row-key="id"
  />
</template>

<script>
export default {
  setup () {
    // Add this in
    const columnsStyled = [
      {
        label: 'name',
        field: 'name',
        name: 'name',
        align: 'left',
        classes: 'bg-pink-1 text-bold',
        style: {
          fontSize: '1.2em',
          borderLeft: `6px solid ${getPaletteColor('pink-4')}`
        },
        headerClasses: 'bg-grey-1',
        headerStyle: {
          fontSize: '1.2em'
        }
      },
      {
        label: 'email',
        field: 'email',
        name: 'email',
        align: 'left',
        headerClasses: 'bg-grey-3',
        classes: 'bg-pink-2'
      },
      {
        label: 'age',
        field: 'age',
        name: 'age',
        align: 'center',
        headerClasses: 'bg-grey-1',
        classes: 'bg-pink-1'
      }
    ]

    return {
      // And this
      columnsStyled
    }
  }
}

</script>

How. Cool. Is. THAT!

To summarise, the column options we're using here are:

classes
style
headerClasses
headerStyle

Sure, the example looks a little messed up... But you're not here to get a degree as an artist 🎨 (nor are you likely to get one from me).

Pagination

Dealing with pagination and slots can get pretty complicated... Luckily, it's likely we can solve our pagination styling problems with these handy dandy props!



<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
  :rows-per-page-options="[2, 0]"
  rows-per-page-label="records/page"
  icon-first-page="home"
  icon-last-page="all_inclusive"
  icon-next-page="arrow_right"
  icon-prev-page="arrow_left"
  :pagination-label="(firstRowIndex, endRowIndex, totalRowsNumber) => {
    return `page ${endRowIndex}/${totalRowsNumber}`
  }"
/>

The cool one to note here, is pagination-label

With pagination-label, we can even change the way we display the "status" of our current pagination with a simple function!

Hiding Header Row and Bottom (Pure Table)

Sometimes you just want a plain ol table. No heading, no footer, no pagination... Just a "basic as can be" table.

This is how we can do it with QTable:



<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
  hide-header
  hide-bottom
/>

That's all I have to say on that 🤷

Hiding Pagination (may auto remove bottom)

Often, we don't even need pagination. Let's just hide it:



<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
  hide-pagination
  :rows-per-page-options="[0]"
/>

IMPORTANT
hiding pagination does not remove pagination functionality. In other words, you might only see 5/10 rows of data, and have no way of viewing the rest of it (since pagination controls are hidden)!

That's why we added :rows-per-page-options="[0]" in the above example.

You may remember from the post on pagination, 0 means all. So essentially, that code is ensuring that we show ALL rows since the pagination is hidden.

Also, if there is nothing else to show in the bottom row, no bottom row will show at all (like in the example)

Hiding `no-data`

I can't think of a good reason to do this, but of course, Quasar makes it possible to hide the default "no data" message...



<q-table
  :rows="[]"
  :columns="columns"
  row-key="id"
  hide-no-data
/>

Nothin but header now!

Visible Columns

Maybe I should have put this furthur up the list since it's So HANDY!

We can easily hide columns with the visible-columns prop:



<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
  :visible-columns="['name', 'age']"
/>

Note that the strings in the visible-columns array, need to be the same as the name prop on the corresponding columns object.

Erg, that was a mouthful... Might need to read it a few times!

In some of my apps, we use a q-menu on the top row, and allow people to toggle columns on and off using a menu! This is easy to do with visible-columns! Maybe that could be another blog post 🤔

Fullscreen

"WHAT!!?? Quasar's QTable supports FULL SCREEN!!??"

Yes. It does 😉



<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
  :fullscreen="fullscreen"
  title="dogs"
>
  <template #top-right>
    <q-btn
      dense
      flat
      icon="fullscreen"
      @click="fullscreen = !fullscreen"
    />
  </template>
</q-table>

In this example, we added a button on the #top-right that toggles fullscreen on and off. Piece of cake 🍰

`separator` and `wrap-cells`

By default, every QTable row is divided with a horizontal line. Of course, we can change this to either a vertical line, or a full cell

In this example, we're also demonstrating wrap-cells. wrap-cells is handy, as it ensures that long text wraps correctly in a cell! Note that it's only evident for "Avo Cado"



<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
  separator="cell"
  style="width: 300px;"
  wrap-cells
/>

Possible options for separator are:

horizontal
vertical
cell
none

Moving on!

`no-data` Label

Change the default no-data label:



<q-table
  :rows="[]"
  :columns="columns"
  row-key="id"
  no-data-label="I can't find any data 😞"
/>

`loading-data` Label

And the default loading-data label:



<q-table
  :rows="[]"
  :columns="columns"
  row-key="id"
  :loading="true"
  loading-label="Gimme a sec and I'll fetch ya data!"
/>

Grid Mode

I'll be honest, I've never in my life used grid mode (until writing this blog post).

But some people love it, so here ya go!



<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
  grid
  card-class="bg-indigo-9 text-white"
  card-style="padding: 22px;"
/>

In this example, we're also tapping into the styling of the grid cards!

`no-hover` (`q-td` and `q-tr`)

Last, and maybe least, we can remove the default "highlight" effect we get with QTable.

These are specific to q-td and q-tr, so we'll have to demonstrate this using the #body template...



<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
>
  <template #body="props">
    <q-tr
      no-hover
      :props="props"
    >
      <q-td
        key="name"
        no-hover
        :props="props"
      >
        {{ props.row.name }}
      </q-td>

      <q-td
        key="email"
        no-hover
        :props="props"
      >
        {{ props.row.email }}
      </q-td>

      <q-td
        key="age"
        no-hover
        :props="props"
      >
        {{ props.row.age }}
      </q-td>
    </q-tr>
  </template>
</q-table>

Kinda hard to tell with a picture 😅

Aaand We're Done!

So there you go! If there is anything you want to acheive with QTable styling, hit me up.

I feel like I've seen just about everything now, so there's a good chance I can help you out 🙂

And trust me, you're going to want to checkout QuasarComponents.Com!

Quasar has a MASSIVE component library that's second to none, and I want to teach you All 72 Of Those Components

Thanks for reading, and please dear reader. Please...

Keep this thought in your mind as you hit the pillow and drift into the night 🌙

There is nothing you can't build...

Quasar's QTable: The ULTIMATE Component (4/6) - ALL The Slots!

Luke — Thu, 19 Aug 2021 13:19:03 +0000

What's black, blue, and PACKED full of QTable slots?

...

The video version of this blog post!

The ideal progression for customizing rows with Quasar's QTable is this:

No slots, only props
The generic "cell" slot (#body-cell)
Specific "cell" slots (#body-cell-[name])
Row slots (#body)

The further down the list, the more flexibility and control you wield!
The further up the list, the more ease and abstraction.

So keep that in mind! If slots aren't needed, don't use them. They're there to offer flexibility when the defaults and props aren't enough.

Make sense?

Sweet! With that in mind, we'll dive in to Quasar's slots...

Oh! And if you want to learn all 72 of Quasar's components through videos, checkout QuasarComponents.Com 😉

Setup

First, for all you git cloners out there, Here's the GitHub Repo!

...

We'll use a similar setup to past examples with a couple of additions:

First, install lodash-es



yarn add lodash-es

Why lodash-es? Because it allows us to import individual functions easily without bringing in the THE WHOLE OF LODASH which is a MASSIVE dependency!

ahem, anywho...

Here's the setup:



<script>
import { copyToClipboard } from 'quasar'
import { ref } from 'vue'
import { sumBy, meanBy } from 'lodash-es'

export default {
  setup () {
    const rows = ref([
      {
        id: 1,
        name: 'Panda',
        email: 'panda@chihuahua.com',
        age: 6
      },
      {
        id: 2,
        name: 'Lily',
        email: 'lily@chihuahua.com',
        age: 5
      }
    ])

    const columns = ref([
      { label: 'name', field: 'name', name: 'name', align: 'left' },
      { label: 'email', field: 'email', name: 'email', align: 'left' },
      { label: 'age', field: 'age', name: 'age', align: 'center' }
    ])

    return {
      copyToClipboard,
      rows,
      columns,
      sumBy,
      meanBy
    }
  }
}
</script>

Quasar comes with a handy copy to clipboard utility function that we'll use in one of the examples.

We'll also use sumBy and meanBy to build a summary row, and an average row.

I've also used ref for the columns. Usually, you shouldn't do this since columns are almost never reactive! I've done it here, because in one of the examples we'll make columns editable!

Okay, put on your snorkel and we'll dive in 🤿

Generic Cell Slots (#body-cell)

Want to make all cells "copyable" with the press of a button?

no problem! We can use the #body-cell prop for that...



<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
>
  <template #body-cell="props">
    <q-td
      :props="props"
    >
      <q-btn
        flat
        color="primary"
        :label="props.value"
        @click="copyToClipboard(props.value)"
      />
    </q-td>
  </template>
</q-table>

This is an easy way to target every cell. Notice that we're passing props to q-td? This basically allows us to proxy "Quasar Table Cell Stuff" easily 👍

Also notice we have access to the cells value with props.value!

But what if we want to target specific cells...

Specific Cell Slots (#body-cell-[name])

tack on "name" and you can target any cell you like within a row.

You'll likely end up using this a lot, it's very handy! It's particularly useful for a delete button cell at the end of a row.

In this example, we use it to simply alternate colors:



<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
>
  <template #body-cell-name="props">
    <q-td
      class="bg-blue-1"
      :props="props"
    >
      {{ props.value }}
    </q-td>
  </template>

  <template #body-cell-email="props">
    <q-td
      class="bg-blue-2"
      :props="props"
    >
      {{ props.value }}
    </q-td>
  </template>

  <template
    #body-cell-age="props"
  >
    <q-td
      class="bg-blue-1"
      :props="props"
    >
      {{ props.value }}
    </q-td>
  </template>
</q-table>

The API for #body-cell-[name] is almost identical to #body-cell (Classic Quasar! amazingly consistent API 🎉)

Row Slots (#body) (editable cells)

Before looking at this example, I want you to notice two things:

props is proxied to q-tr AND q-td. Once again, this is important as it allows Quasar to take control over the cell for things like "hiding columns" and setting the row-key
We use dense and borderless on q-input, otherwise it looks strange in a table cell!



<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
>
  <template #body="props">
    <q-tr
      :props="props"
    >
      <q-td
        key="name"
        :props="props"
      >
        <q-input
          v-model="props.row.name"
          borderless
          dense
        />
      </q-td>
      <q-td
        key="email"
        :props="props"
      >
        <q-input
          v-model="props.row.email"
          borderless
          dense
        />
      </q-td>
      <q-td
        key="age"
        :props="props"
      >
        <q-input
          v-model="props.row.age"
          borderless
          dense
          input-class="text-center"
        />
      </q-td>
    </q-tr>
  </template>
</q-table>

Doesn't look like much does it?

But take a look at that code... we're using QInput's in the cells... These cells are EDITABLE!!!

This is a common question in the community.

"How do we achieve editable cells with q-table?"

well that my friends ☝️☝️☝️, is how 😉

The rest of this blog post will be very example driven with less eplanation.

The aim is to make you aware of what's possible, so you can go to bed tonight dreaming of table possibilities! 💤💭😶‍🌫️ (I have no idea what that second emoji is. Found it on emojifinder.com when searching for "dream")

SO!

Ready for this?

Sweet! Let's go nuts!!!

Header Cell Slots

Pretty much the same concept as body-cell slots



<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
>
  <template #header-cell="props">
    <q-th
      style="font-size: 1.4em;"
      class="text-primary"
      :props="props"
    >
      {{ props.col.label }}
    </q-th>
  </template>
</q-table>

Specific Header Cell Slot



<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
>
  <template #header-cell-email="props">
    <q-th :props="props">
      <q-icon
        size="sm"
        name="email"
        class="q-mr-sm"
        color="grey-7"
      />{{ props.col.label }}
    </q-th>
  </template>
</q-table>

Header Row Slot

In this example, we make the header cells editable! Cool stuff 😎



<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
>
  <template #header="props">
    <q-tr>
      <q-th
        key="name"
        :props="props"
      >
        <q-input
          v-model="columns[0].label"
          dense
          borderless
          input-class="text-bold"
        />
      </q-th>

      <q-th
        key="email"
        :props="props"
      >
        <q-input
          v-model="columns[1].label"
          dense
          borderless
          input-class="text-bold"
        />
      </q-th>

      <q-th
        key="age"
        :props="props"
      >
        <q-input
          v-model="columns[2].label"
          dense
          borderless
          input-class="text-bold text-center"
        />
      </q-th>
    </q-tr>
  </template>
</q-table>

Bottom And Top Row Slot

Great for aggregations and averages! This is where we use those lodash functions...



<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
>
  <template #top-row>
    <q-tr class="bg-blue-1">
      <q-td class="text-bold">
        Average:
      </q-td>
      <q-td />
      <q-td class="text-center">
        {{ meanBy(rows, 'age') }}
      </q-td>
    </q-tr>
  </template>

  <template #bottom-row>
    <q-tr class="bg-green-1">
      <q-td class="text-bold">
        Total:
      </q-td>
      <q-td />
      <q-td class="text-center">
        {{ sumBy(rows, 'age') }}
      </q-td>
    </q-tr>
  </template>
</q-table>

Top Slot (above the actual table)

Perfect for things like filters and a search input



<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
>
  <template #top>
    <div
      class="text-bold"
      style="font-size: 1.3em;"
    >
      Cute Pups
    </div>
    <q-input
      class="q-ml-md"
      dense
      outlined
      placeholder="Search"
    >
      <template #prepend>
        <q-icon name="search" />
      </template>
    </q-input>
  </template>
</q-table>

Bottom Slot (below the actual table)

Of course, we have total control over the bottom slot!



<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
>
  <template #bottom>
    <span>
      dogs from <a href="https://poochypoochypooch.com">poochypoochypooch.com</a>
    </span>
  </template>
</q-table>

Top Left and Top Right Slot

I like using #top-left and #top-right more than #top. I almost always want something on either side, so it feels nicer than just using #top...



<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
>
  <template #top-left>
    <div
      class="text-bold"
      style="font-size: 1.3em;"
    >
      Cute Pups
    </div>
  </template>
  <template #top-right>
    <q-input
      class="q-ml-md"
      dense
      outlined
      placeholder="Search"
    >
      <template #prepend>
        <q-icon name="search" />
      </template>
    </q-input>
  </template>
</q-table>

No Data Slot

Of course, we can completely overwrite the message for no-data...



<q-table
  :rows="[]"
  :columns="columns"
  row-key="id"
>
  <template #no-data>
    <div>Hmmm, I can't find any dang data!</div>
  </template>
</q-table>

And That's It!

🎉🍾🎊🤗

Now, a question...

Can I Share My Story With You?

If you enjoyed this post half as much as I enjoyed making it for you, we'll be best friends!

And if you'd like to hear some of my story, head on over to QuasarComponents.Com.

I'll share the journey that lead to my love of Quasar, and tell you about the Massive component series I'm currently working on 🙃

So Click Here, and I'll see you on the other side!

...

Thanks for reading and remember,

There is nothing you can't build...

Quasar's QTable: The ULTIMATE Component (3/6) - Loading State, Pagination, and Sorting

Luke — Wed, 18 Aug 2021 12:26:08 +0000

Here's the video version...

You already know what loading state, pagination and sorting is right?

Sweet! No preamble required, let's just dive right in...

Oh, and WACK this link if you'd like to Learn All 72 Of Quasar's Components!

Now let's begin!

Setup

Just want the code? Here's the github repo! ldiebold/q-table-blog

We'll do some fancy pants stuff in this blog, so we'll need a backend... Luckily, I built a free api just for you! checkout this endpoint...

https://table.quasarcomponents.com/dogs

Take a squiz at the data! if you scroll down to the meta property, you'll notice that we have pagination...



{
  data: [
    {
      id: 1,
      created_at: "2021-08-17T01:29:29.000000Z",
      updated_at: "2021-08-17T01:29:29.000000Z",
      name: "Hollie",
      email: "nshields@yahoo.com",
      age: 9
    },
    {
      id: 2,
      created_at: "2021-08-17T01:29:29.000000Z",
      updated_at: "2021-08-17T01:29:29.000000Z",
      name: "Sonya",
      email: "shields.gonzalo@douglas.info",
      age: 19
    }
  ],
  links: {
    first: "http://table.quasarcomponents.com/dogs?page=1",
    last: "http://table.quasarcomponents.com/dogs?page=34",
    prev: null,
    next: "http://table.quasarcomponents.com/dogs?page=2"
  },
  meta: {
    current_page: 1,
    from: 1,
    last_page: 34,
    links: [
      {
        url: null,
        label: "&laquo; Previous",
        active: false
      },
      {
        url: "http://table.quasarcomponents.com/dogs?page=1",
        label: "1",
        active: true
      }
    ],
    path: "http://table.quasarcomponents.com/dogs",
    per_page: 15,
    to: 15,
    total: 500
  }
}

Note that much of the data and links have been removed for brevity

We'll need axios so it's easy to hit that endpoint, so let's go ahead and install it:



yarn add axios

Now we'll use it in our <script>:



<script>
import { defineComponent, ref } from 'vue'
import axios from 'axios'

export default defineComponent({
  setup () {
    const loading = ref(true)
    const dogs = ref([])

    const columns = [
      { name: 'name', label: 'Name', field: 'name', align: 'left' },
      { name: 'age', label: 'Age', field: 'age', align: 'center' },
      { name: 'email', label: 'Email', field: 'email' }
    ]

    // Fetch dogs
    axios.get('https://table.quasarcomponents.com/dogs')
      .then(response => {
        dogs.value = response.data.data
      })
      .finally(() => {
        loading.value = false
      })

    return {
      columns,
      loading,
      dogs
    }
  }
})
</script>

If you've read the prior two posts, this might be starting to make sense...

We setup some data, do some column config, fetch the dogs, update our dogs array, toggle the loading state, and expose it to the template!

Loading State

Quasar gives us a simple, beautiful loading bar when we set the loading prop to true. It also respects the tables color prop!

Here, I'll show you...



<q-table
  color="secondary"
  :loading="loading"
  :rows="dogs"
  :columns="columns"
/>

That's it! You might need to refresh the page to see it loading (especially if you're in Paris, cause that's where the server is!)

You could also just set :loading="true". I usually do this when playing with the styling!

So that's basic loading but of course...

Quasar gives us TOTAL control with slots 🙃

The `#loading` Slot

Take a look at the #loading slot in this example:



<q-table
  :loading="loading"
  :rows="dogs"
  color="primary"
>
  <template #loading>
    <q-inner-loading
      showing
      color="primary"
    />
  </template>
</q-table>

Using Quasar's QInnerSpinner component, we can create a beautiful alternative way of displaying "loading".

I personally think this looks sweet!

Alright, that's enough loading you crazy dev you 😁. Let's take a look at pagination.

Pagination

Quasar's QTable gives you everything you need for pagination by allowing you to model pagination.

let's add it to our script



export default defineComponent({
  setup () {
    // ...
    const pagination = ref({
      sortBy: 'name',
      descending: false,
      page: 1,
      rowsPerPage: 3
    })

    return {
      // ...
      pagination
    }
  }
}

Most of those pagination options likely make sense to you. Note that Quasar also gives us sortBy and descending.

sortBy and descending allow us to set a default sort to our table. Where I work, we use this a lot as clients often want to see their data in alphabetical order by default.

I'll show you later how it's possible to change the sort algorithm (I always feel smart using the word "algorithm")

Now let's model this pagination data in the table:



<q-table
  v-model:pagination="pagination"
  color="secondary"
  :loading="loading"
  :rows="dogs"
  :columns="columns"
/>

Pretty cool huh?

AND, we can even change those Rows per page options with a prop:



<q-table
  v-model:pagination="pagination"
  :rows-per-page-options="[3, 5, 10, 0]"
  color="secondary"
  :loading="loading"
  :rows="dogs"
  :columns="columns"
/>

Gosh I love Quasar ❤️

If you're a POWER user, you might be crossing your arms thinking "yea, but I need server side pagination. Server side pagination is always a pain to implement."

Well uncross those arms because it's a piece of pecan pie with Quasar!

Server Side Pagination (A Piece Of Pecan Pie)

This is why I build the https://table.quasarcomponents.com/dogs api! So we can easily play with server side pagination...

I'm going to move my explanation into the code, since this example is a little more involved! See you there...

⬇️Jumps into code block below⬇️



<template>
  <!--
    Why hello there!
    Meet me at the "script" section. That's where the magic happens 🪄
  -->
  <q-page
    padding
    class="flex justify-center"
  >
    <div
      class="full-width q-gutter-xl"
    >
      <!--
        Two things to notice here
        1. "rows-per-page-options" has been emptied.
            We're going to let the server decide how many "rows per page"
        2. @request is fired whenever a pagination is clicked! Handy 🙂
       -->
      <q-table
        v-model:pagination="pagination"
        :rows-per-page-options="[]"
        color="secondary"
        :loading="loading"
        :rows="dogs"
        :columns="columns"
        @request="onRequest"
      />
    </div>
  </q-page>
</template>

<script>
import { defineComponent, ref } from 'vue'
import axios from 'axios'

export default defineComponent({
  setup () {
    // And here we are!
    // I'll only comment on the parts that are different 😉
    const loading = ref(true)
    const dogs = ref([])

    const pagination = ref({
      // No longer using sort. if needed, this can now be done using the backend!
      // sortBy: 'name',
      // descending: false,
      page: 1,
      rowsPerPage: 15,
      // When using server side pagination, QTable needs
      // to know the "rows number" (total number of rows).
      // Why?
      // Because Quasar has no way of knowing what the last page
      // will be without this information!
      // Therefore, we now need to supply it with a "rowsNumber" ourself.
      rowsNumber: 0
    })

    const columns = [
      { name: 'name', label: 'Name', field: 'name', align: 'left', sortable: true },
      { name: 'age', label: 'Age', field: 'age', align: 'center' },
      { name: 'email', label: 'Email', field: 'email' }
    ]

    // Fetch dogs
    const fetchDogs = (page = 0) => { // we can specify the "page" to jump to
      loading.value = true
      return axios.get('https://table.quasarcomponents.com/dogs', {
        params: { page: page } // here, we tell the api what "page" to jump to
      })
        .then(response => {
          dogs.value = response.data.data
          // The api gives us "meta data".
          // this meta data gives us everything we
          // need to get pagination working!
          const meta = response.data.meta

          // We now update "pagination" with our meta data
          // from the server. This is where the magic happens 🪄
          pagination.value.page = meta.current_page
          pagination.value.rowsPerPage = meta.per_page
          pagination.value.rowsNumber = meta.total
        })
        .finally(() => {
          loading.value = false
        })
    }

    // QTable exposes a @request method (see the <template>)
    // This will be called when one of the pagination buttons are clicked.
    // it gives us everything we need, including the new page number!
    const onRequest = (props) => {
      fetchDogs(props.pagination.page)
    }

    // The initial fetch
    fetchDogs()

    return {
      onRequest,
      columns,
      loading,
      dogs,
      pagination
    }
  }
})
</script>

⬆️Jumps out of code block⬆️

HOW COOL WAS THAT!!??

Being INSIDE a code block is strange... It was kinda cold in there, will have to take a coat next time 🧥

Anywho,

Let's take a look at the result:

So there you go. Server side pagination is a blast with Quasar!

And if you really want total control, you could use Quasar's QPagination component and completely replace QTable's pagination.

Right, let's move on to the last topic for today/night/evening/morning (us devs are worldy people)...

Sorting

Want basic sorting? Quasar's got ya sorted! HA! I made a joke!!!

ahem

Sorting is only one prop away...



const columns = [
  { name: 'name', label: 'Name', field: 'name', align: 'left', sortable: true },
  { name: 'age', label: 'Age', field: 'age', align: 'center', sortable: true },
  { name: 'email', label: 'Email', field: 'email', sortable: true }
]

Notice we set sortable: true on all the columns?

Also, notice that when we hover over one of the "heading" cells, we get a sort arrow...

sortable: true will do the job most of the time, otherwise we can use...

Custom Sorting

Need to use your own sort function? No problem!

In this example, we'll sort using email by domain (e.g. gmail.com, hotmail.com, quasarcast.com etc)



const columns = [
  { name: 'name', label: 'Name', field: 'name', align: 'left', sortable: true },
  { name: 'age', label: 'Age', field: 'age', align: 'center', sortable: true },
  {
    name: 'email',
    label: 'Email',
    field: 'email',
    sortable: true,
    sort: (a, b) => {
      const domainA = a.split('@')[1]
      const domainB = b.split('@')[1]
      return domainA.localeCompare(domainB)
    }
  }
]

Bon Appétable!

We're now sorting with our own sorter! Sorta cool right?

"What's Next?""

In the next post, I'm going to gift you with QTable's ultimate power!

We're going to cover All of Quasar's Slots!!!

You're not gonna wanna miss it! Slots give QTable UNLIMITED flexibility 💪

For Those That Need A Little More...

Quasar has a huge, impressive component library.

The APIs will bring you to your knees with joy! The flexibility will have you nodding your head with approval, and the beautiful community will lead you to fall in love with this framework.

Sound like something worth exploring?

Of course it is!

Now head on over to QuasarComponents.Com and let me to take you on a journey you'll never forget!

I'll teach you all 72 of Quasar's components in action packed videos that will leave you excited to code!!!

Click Here and I'll see you on the other side!

That's all my dear dev friends. Now can you please do me a very important favour?

Go to bed tonight remembering, and dreaming about this one thing,

There is nothing you can't build...

Quasar's QTable: The ULTIMATE Component (2/6) - Expandable Rows and Selectable Rows

Luke — Tue, 17 Aug 2021 11:43:48 +0000

Prefer video? I got ya covered!

I use selectable rows, and expandable rows all the time! I'll give you a real world example.

We record "spraying events" for paddocks, and sometimes a paddock will be sprayed many times! Our app groups individual sprays by paddock, and also gives a "total amount sprayed" in the parent row!

Now look at what happens when we click on one of the rows...

The farmers LOVE IT! And guess what...

It was surprisingly easy to build with Quasar's QTable! I'll show you how 😊

Also, notice the Totals row at the bottom? Also a piece of cake with Quasar! (more on summary rows in a future blog post)

Now before we dive in, take a look at QuasarComponents.Com for some action packed, heart POUNDING, nail biting, high intensity videos on all 72 of Quasar's components!

click here and I'll see you on the other side 😁

A Little Setup

Let's do some basic setup so things run smoothly!



<script>
import { ref } from 'vue'

export default {
  setup () {
    const selected = ref()

    const rows = [
      {
        id: 1,
        name: 'Panda',
        email: 'panda@chihuahua.com',
        age: 6
      },
      {
        id: 2,
        name: 'Lily',
        email: 'lily@chihuahua.com',
        age: 5
      }
    ]

    const columns = [
      { label: 'expand', name: 'expand', field: 'expand' },
      { label: 'id', field: 'id', name: 'id' },
      { label: 'name', field: 'name', name: 'name' },
      { label: 'email', field: 'email', name: 'email' },
      { label: 'age', field: 'age', name: 'age' }
    ]

    return {
      rows,
      columns,
      selected
    }
  }
}
</script>

and here's the github repo

Expandable Rows

Expandable rows are made possible with the #body slot. I'll here's how it's done 😎



<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
>
  <template #body="props">
    <q-tr :props="props">
      <!-- Expand cell/button -->
      <q-td
        key="expand"
        name="expand"
        :props="props"
        auto-width
      >
        <!--
          The important part here is
          @click="props.expand = !props.expand"
        -->
        <q-btn
          flat
          round
          :icon="props.expand ? 'remove' : 'add'"
          @click="props.expand = !props.expand"
        />
      </q-td>
      <!--
        Notice that we the "key" matches the columns "name" property
        Notice that we "proxy" the props from #body="props" to our q-td
      -->
      <q-td
        key="id"
        :props="props"
      >
        {{ props.row.id }}
      </q-td>
      <q-td
        key="name"
        :props="props"
      >
        {{ props.row.name }}
      </q-td>
      <q-td
        key="email"
        :props="props"
      >
        {{ props.row.email }}
      </q-td>
      <q-td
        key="age"
        :props="props"
      >
        {{ props.row.age }}
      </q-td>
    </q-tr>
    <!-- We show the row if "props.expand" is toggled to true! -->
    <q-tr
      v-show="props.expand"
      :props="props"
    >
      <q-td colspan="100%">
        <div class="text-left">
          Expanded
        </div>
      </q-td>
    </q-tr>
  </template>
</q-table>

all closed

one row expanded

A few things to note here:

First: The #body slot allows us to tap into individual rows

Second: we use Quasar's q-tr and q-td components to build the row. This gives us INSANE control!

Third: We use the scope (#body="props") and pass it to every q-td and q-tr. This is important! It means our q-tr's and q-td's get all the styling they need for things like dense and visible-columns (more on those later)

Fouth: We can toggle/track if a row is expanded with props.expanded

Read those four points back and forth until they make sense! Understand them, and you'll have IMMENSE power over Quasar's QTable!

Also notice that in the expanded row, we use colspan="100%" to basically say "take up all the space in this row". Helpful for things like "create" buttons that insert new rows.

AND, auto-width which "Tries to shrink column width size; Useful for columns with a checkbox/radio/toggle"

Individual Cells For Each Row

To be thorough, here's an example where the expanded row has cells, lining up with cells on the parent row...



<!-- Expandable Row (cells) -->
<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
>
  <template #body="props">
    <!-- PARENT ROW -->
    <q-tr :props="props">
      <!-- Expand cell/button -->
      <q-td
        key="expand"
        name="expand"
        :props="props"
        auto-width
      >
        <q-btn
          flat
          round
          :icon="props.expand ? 'remove' : 'add'"
          @click="props.expand = !props.expand"
        />
      </q-td>
      <q-td
        key="id"
        :props="props"
      >
        {{ props.row.id }}
      </q-td>
      <q-td
        key="name"
        :props="props"
      >
        {{ props.row.name }}
      </q-td>
      <q-td
        key="email"
        :props="props"
      >
        {{ props.row.email }}
      </q-td>
      <q-td
        key="age"
        :props="props"
      >
        {{ props.row.age }}
      </q-td>
    </q-tr>
    <!-- CHILD ROW -->
    <q-tr
      v-show="props.expand"
      :props="props"
    >
      <!--
        Might want to leave the first cell blank, as it is
        simply space for the "expand" column
      -->
      <q-td
        key="expand"
        :props="props"
      />
      <q-td :props="props">
        summary
      </q-td>
      <q-td
        key="id"
        :props="props"
      >
        summary
      </q-td>
      <q-td
        key="name"
        :props="props"
      >
        summary
      </q-td>
      <q-td
        key="email"
        :props="props"
      >
        summary
      </q-td>
      <q-td
        key="age"
        :props="props"
      >
        summary
      </q-td>
    </q-tr>
  </template>
</q-table>

those places that say "summary"... You can put whatever you like in those cells!

BIG TIP: use props.row to access the current row 🚣

HA! Emoji joke 😆

It's also worth noting that you can have as many "child" rows as you like!

And THAT my friend, is expandable rows. now let's move on to making rows selectable.

Selectable Rows. A Gift From Quasar 🎁

This truly is a gift! I've implemented a "selectable rows" feature myself in the past and you know what?

It SUCKS!

Quasar makes it easier than blowing out a two year old's birthday candles 🎂 (which you shouldn't do, that's not cool)...

Check it!



<q-table
  v-model:selected="selected"
  selection="single"
  :rows="rows"
  row-key="id"
/>

Yes! It really is that flippen easy 😱😱😱

Do I even need to explain this code!?

The one thing to note, is row-key is used to uniquely identify the selected data, so you'll need it!

HOT TIP: use the pre tag to display this data nicely when testing...



<pre>{{ selected }}</pre>

That's what all the cool kids are doing (or so I'm told)

"But Luke! I want to use a TOGGLE, not a checkbox

Oh!? Do ya now!?

No worries my inquisitive friend! Rollup your sleeves and try this!



<q-table
  v-model:selected="selected"
  selection="multiple"
  :rows="rows"
  row-key="id"
>
  <template #header-selection="scope">
    <q-toggle v-model="scope.selected" />
  </template>

  <template #body-selection="scope">
    <q-toggle v-model="scope.selected" />
  </template>
</q-table>

(did you catch my cheeky rollup joke?)

Note that scope.selected is a simple function that toggles the selection for you. Easy right?

Are you starting to see how Quasar's API makes building components bliss? I LOVE it ❤️

multiple select

You can enable multiple select by changing selection="single" to selection="multiple" 🍪

"Luke! This Is SO COOL! I Want MORE"

Oh nice, I love your enthusiasm!

If you want to learn more about this stuff, head on over to QuasarComponents.Com

In that series, we will...

Cover all 72 of Quasar's Components
Build YouTube's UI with Quasar
Build a Live Chat App with Laravel and Quasar
Build a Quasar App Extension

All proceeds are donated directly to the Quasar Dev team!

Check it out here

Thanks for reading 🤓. Tomorrow we'll cover Loading State, Pagination, and Sorting (You're gonna LOVE Pagination).

Bye for now! And please for the love of code remember,

There is nothing you can't build...

Quasar's QTable: The ULTIMATE Component (1/6) - Setup, Data and Columns!

Luke — Mon, 16 Aug 2021 13:22:34 +0000

Quasar has 72 Components! If you want to watch a video on every single one of them, take a look at QuasarComponents.Com.

There's also a bunch of bonuses like Building YouTube's UI, Creating a Live Quasar Chat App, Crafting Quasar UI Library with your very own App Extension AND...

All proceeds go directly to helping the development of Quasar!

Pretty cool huh?

So check it out, and join all the other cool cats at QuasarComponents.Com

Now let's have some fun with QTable!!!

Setup

Never used Quasar before? Here's the tldr of setting up Quasar so you can follow along 🙂

npm install -g @quasar/cli

quasar create q-table-play

cd q-table-play

quasar dev

Or, clone The Github Repo.

You now have an app that can export to mobile, desktop, spa, pwa, ssr and even a browser extension. I'm not joking!

Now let's get to QTable!

Data

QTable is likely the most gorgeously designed, magnificently crafted, well thought out components on the web. Why?

It follows a wonderful pattern (like all other Quasar components)...

Easy to get started, yet configurable to the nth degree!

Now check this out...

<q-table
  :rows="[
    {
      name: 'Panda',
      email: 'panda@chihuahua.com',
    },
    {
      name: 'Lily',
      email: 'lily@chihuahua.com',
    }
  ]"
/>

That's right! We just give it an array of objects (aka collection) and it runs smoother than a tesla...

But it gets better...

Specifying Columns

So can you customize the columns?...

OF COURSE YOU CAN!

<q-table
  title="My Chihuahuas"
  :rows="[
    {
      name: 'Panda',
      email: 'panda@chihuahua.com',
      age: 6
    },
    {
      name: 'Lily',
      email: 'lily@chihuahua.com',
      age: 5
    }
  ]"
  :columns="[
    {
      label: 'Dog Name',
      field: 'name',
      name: 'name',
      align: 'left'
    },
    {
      label: 'Email',
      field: 'email',
      name: 'email',
      align: 'left'
    },
    {
      label: 'Age',
      field: 'age',
      name: 'age',
      align: 'center',
      format: age => `${age} years`
    }
  ]"
/>

You would probably want to move the columns and data out of the template, I just want to keep these examples simple 🙂

Simple right?

We just give that bad boi an object for every column. Try changing the order of the columns and see what happens...

Also, notice we can add a formatter with format (see the "age" column). And there's something else cool here.

We can easily align content, and set the label!

We also have sortable, style, classes and more! Checkout the QColumn Smörgåsbord here (click on Column to see all the options)

But we need basics like a "title" and of course... Dark Mode

Title and Dark Mode

Wait what? Your table doesn't support dark mode? How do you sleep at night!?

Just fine. Get over it.

Seriously though, dark mode is pretty sweet, and Quasar's QTable supports it with the unambiguous dark property!

While we're at it, let's use separator to add horizontal and vertical lines!

We'll also remove pagination with :rows-per-page-options="[0]" (much more on pagination later), and we'll hide the bottom row to save space!

And you know what? Those cells are lookin waaay too chunky. Let's dense 'em up with the dense property!

<q-table
  dark
  :rows-per-page-options="[0]"
  hide-bottom
  separator="cell"
  dense
  :rows="[
    {
      name: 'Panda',
      email: 'panda@chihuahua.com',
    },
    {
      name: 'Lily',
      email: 'lily@chihuahua.com',
    },
  ]"
/>

There we go. Thanks to that dark property, we're hip... and accepted in the coding community 🙄 😆

Oh so much more to come!...

So there you have it! This is just the beginning of a 6 part series. I have so much cool $^*&#% to share with you AND...

If you love Quasar's components as much as me, or want to see an in depth video on QTable, meet me over at QuasarComponents.Com

We'll cover All 72 Quasar Components and...

Building YouTube's UI
Create a Live Quasar Chat App
Craft a Quasar UI Library with our very own App Extension

All proceeds are sent directly to the Quasar team

So thanks for reading. Tomorrow we'll cover expandable rows and selectable rows. Really cool stuff, and Quasar makes it simple 😉

And remember!

There is nothing you can't build...

Quasar's "Select" Component... 7 Reasons It's The Gift That Just Keeps Giving!

Luke — Sun, 08 Aug 2021 08:08:37 +0000

Errrg, building a select component from scratch is like building a house out of sand. Just when you think you're making headway, everything comes crashing down. I hate it...

Luckily, Quasar's QSelect component is a gorgeously crafted work of art! And that's awesome, because if there's one wheel I never want to reinvent, it's QSelect (though in reality, it's more like reinventing calculus).

So without any furthur adon't... let's take a look at what makes QSelect the One QSelect To Rule Them ALLL!!!

Oh... And head over to QuasarComponents.Com to learn more about this stuff!

#0: The Script Tag!

Following along? Sweet!
Here's the js you'll need to get started. Whack it in, and everything else will be easier to follow :)



<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'PageIndex',

  data () {
    return {
      slotDog: null,
      dog: null,
      dogsPretty: null,
      dogsObjectOptions: null,
      dogsMultiple: [],
      dogsOtt: [],
      longList: []
    }
  }
})
</script>

And here is a GitHub repo with all the examples

#1: Model That Data!

To get started with QSelect, we model some data, and add an array of options:



<q-select
  v-model="dog"
  :options="['Panda', 'Lily', 'Moe']"
/>

#2: Or Use an Object For Your Options...

Of course, you can also use a collection of objects. Here's a taste of what that might look like! Note that by default, label and value are used by QSelect



<q-select
  v-model="dogsObjectOptions"
  :options="[
    {
      label: 'Panda',
      value: 1
    },
    {
      label: 'Lily',
      value: 2
    },
    {
      label: 'Moe',
      value: 3
    }
  ]"
/>

#3: Multiple Select!

Of course multiple select is possible. Just add the multiple flag and you'll be modeling an array:



<q-select
  v-model="dogsMultiple"
  :options="['Panda', 'Lily', 'Moe']"
  multiple
/>

#4: Making it Sexy!!!

Check out this gorgeous select. Bruised my chin after building this one (10 points to Gryffindor if you can decipher that joke).



<q-select
  v-model="dogsPretty"
  label="Selected Dog"
  label-color="purple-8"
  color="purple"
  bg-color="purple-1"
  popup-content-class="text-grey-8"
  options-selected-class="bg-purple-4 text-white"
  :options="['Panda', 'Lily', 'Moe']"
  style="max-width: 200px;"
  outlined
/>

#5: Bunch of Other Cool Stuff In One OTT Example

The API is so dang intuitive, you can probably figure out what most of this does...



<q-select
  v-model="dogsOtt"
  for="dog"
  option-label="name"
  option-value="id"
  multiple
  options-dense
  use-chips
  filled
  rounded
  hint="Select a dog"
  color="brown"
  :suffix="dogsOtt.map(dog => dog.sound).join(', ')"
  :loading="false"
  clear-icon
  counter
  :rules="[val => val.length > 1 || 'Please select at least 2 dogs']"
  :options="[
    {
      name: 'Panda',
      id: 1,
      sound: 'rrrruf! Ruf RUF!'
    },
    {
      name: 'Lily',
      id: 2,
      sound: 'Beep!'
    },
    {
      name: 'Moe',
      id: 3,
      sound: 'Aroooooooo'
    }
  ]"
/>

<pre>{{ dogsOtt }}</pre>

#6: What About Performance for Looooong Lists?

Now THIS is cool!
If your list is massive it will still perform fast!
Why? Because Quasar does some fancy pants virtual scroll voodoo behind the scenes:



<q-select
  v-model="longList"
  :options="Array.from(Array(1000000).keys())"
  multiple
/>

#7: Extend it to the Nth Degree with Slots

Want to go on a rampage with me? Okay, grab a coffee, hold onto your seat and we'll modify this bad boi like a 7 of 9!

Good luck coming up with a "but I can't xyz" excuse after this! WOOHOOOO!!!



<q-select
  v-model="slotDog"
  label
  filled
  :options="[
    {
      name: 'Panda',
      color: 'grey-4',
    },
    {
      name: 'Lily',
      color: 'yellow-8',
    },
    {
      name: 'Moe',
      color: 'brown',
    }
  ]"
>
  <!-- Add an icon WITHIN the input -->
  <template #prepend>
    <q-icon name="pets" />
  </template>

  <!-- Add an icon AFTER the input  -->
  <template #after>
    <q-icon
      v-if="slotDog"
      color="green"
      name="check_circle"
    />
  </template>

  <!-- We can take total control of the label... -->
  <template #label>
    Favourite Dog
    <q-icon
      size="xs"
      name="favorite"
    />
  </template>

  <!-- We can take total control of how options are rendered... -->
  <template #option="scope">
    <q-item
      clickable
      @click="scope.toggleOption(scope.opt)"
    >
      <q-item-section side>
        <q-checkbox
          :model-value="scope.selected"
          @click="scope.toggleOption(scope.opt)"
        />
      </q-item-section>

      <q-item-section>
        {{ scope.opt.name }}
      </q-item-section>
    </q-item>
  </template>

  <!-- We can change how the selection is displayed! -->
  <template #selected>
    <div
      v-if="slotDog"
      class="flex items-center"
    >
      <q-icon
        class="q-mr-xs"
        size="xs"
        name="circle"
        :color="slotDog.color"
      />{{ slotDog.name }}
    </div>
  </template>

  <!-- Hooking into the top of our options list is easy! -->
  <template #before-options>
    <q-item-label header>
      Favourite Dog <q-icon name="favorite" />
    </q-item-label>
  </template>

  <!-- And hooking into AFTER our options is peasy! -->
  <template #after-options>
    <q-btn
      v-close-popup
      class="full-width"
      label="cancel"
    />
  </template>
</q-select>

Phone Calls

Luke: Hello?

Other end: Hi, is this Luke? The creator of select-a-pet-like-a-boss.com?

Luke: Ummm yes, this is he. How can I help?

Other end: I just want to let you know, that was the most amazing dog selecting experience I've ever had on the internet. Thankyou!!!

Luke: Oh wow, you're most welcome kind stranger!

And that's how you make friends with a Select Component!

What Else Is Covered On QuasarComponents.Com?...

A whooole lot more!

Filtering
lazy loading list items (like from an API)
validation
positioning the menu
displaying sanitized html
keyboard navigation
use in a QForm
Advanced Virtual Scroll techniques (to improve performance for long lists that have custom styling)
mapping object fields rather than the entire object... And probably a bazillion other things I can't think of right now. We go deep!

So click here, and meet me on the other side of QuasarComponents.Com to discover more!

There you have it! "7 Reasons Quasar's Select Component Is The Gift That Just Keeps Giving!"

Until next time, and remember:

There is nothing you can't build...

DEV Community: Quasar

QuasarConf 2022 - Speakers and Schedule

When will it be?

Where will it be?

The Speakers, Topics and Schedule

It's Back! QuasarConf 2022 - Call for Proposals

When will it be?

Would you like to do a talk?

What to expect?

How To Use Google Maps In A Quasar Project

Step 1: Install Vue 3 Google Maps

Step 2: Create a Boot File

Step 2: Create a map components

Two things before I go!

1. QuasarCast.Com

2. Always Remember

Quasar and Vite - Frontend Application Development at Light Speed

Quick Introduction Video

Why Vite?

Initial Loading of a new Quasar project with Webpack

Initial Loading of a new Quasar project with Vite

Getting Started

Migration

That's it!

Modeling Data In Quasar Like A BOOOSS With VuexOrm

VuexORM App Extension (AE)

Give It A Try

Quasar "Nuxt-like" Routing is here!

Thank You ktsn...

Quasar's QTable: The ULTIMATE Component (5/6) - Styling EVERYTHING!!!

Have You STILL Not Checkerty Checked Out QuasarComponents.Com?

Setup

color, dense, dark and flat

bordered, flat, square (Cleancut)

Specific Classes and Styles

Specific Column Classes and Styles

Pagination

Hiding Header Row and Bottom (Pure Table)

Hiding Pagination (may auto remove bottom)

Hiding no-data

Visible Columns

Fullscreen

separator and wrap-cells

no-data Label

loading-data Label

Grid Mode

no-hover (q-td and q-tr)

Aaand We're Done!

Quasar's QTable: The ULTIMATE Component (4/6) - ALL The Slots!

Setup

Generic Cell Slots (#body-cell)

Specific Cell Slots (#body-cell-[name])

Row Slots (#body) (editable cells)

Header Cell Slots

Specific Header Cell Slot

Header Row Slot

Bottom And Top Row Slot

Top Slot (above the actual table)

Bottom Slot (below the actual table)

Top Left and Top Right Slot

No Data Slot

And That's It!

Can I Share My Story With You?

Quasar's QTable: The ULTIMATE Component (3/6) - Loading State, Pagination, and Sorting

Setup

Loading State

The #loading Slot

Pagination

Server Side Pagination (A Piece Of Pecan Pie)

Sorting

Custom Sorting

"What's Next?""

For Those That Need A Little More...

Quasar's QTable: The ULTIMATE Component (2/6) - Expandable Rows and Selectable Rows

A Little Setup

Expandable Rows

Individual Cells For Each Row

Selectable Rows. A Gift From Quasar 🎁

"But Luke! I want to use a TOGGLE, not a checkbox

multiple select

`color`, `dense`, `dark` and `flat`

`bordered`, `flat`, `square` (Cleancut)

Hiding `no-data`

`separator` and `wrap-cells`

`no-data` Label

`loading-data` Label

`no-hover` (`q-td` and `q-tr`)

The `#loading` Slot