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

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: '[e-mail]',
    },
    {
      name: 'Lily',
      email: '[e-mail]',
    }
  ]"
/>

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: '[e-mail]',
      age: 6
    },
    {
      name: 'Lily',
      email: '[e-mail]',
      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: '[e-mail]',
    },
    {
      name: 'Lily',
      email: '[e-mail]',
    },
  ]"
/>

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...