Quasar's QTable: The ULTIMATE Component (1/6) - Setup, Data and Columns!
Tags: quasar, vue, javascript, webdev
Published: 2021-08-16 13:22:34

Quasar has **72 Components!** If you want to watch a video on every single one of them, take a look at [QuasarComponents.Com](https://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](https://quasarcomponents.com), and join all the other cool cats at [QuasarComponents.Com](https://quasarcomponents.com)

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

{% youtube rv35cyGVRVY %}

## Setup
Never used Quasar before? Here's the **tldr** of setting up Quasar so you can follow along :slightly_smiling_face:

```sh
npm install -g @quasar/cli

quasar create q-table-play

cd q-table-play

quasar dev
```
Or, clone [The Github Repo](https://github.com/ldiebold/q-table-blog).

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

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

![Basic Example](https://res.cloudinary.com/quasarcast-com/image/upload/v1629118665/Basic%20Example.png)

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!

```vue
<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`
    }
  ]"
/>
```

![Custom Columns](https://res.cloudinary.com/quasarcast-com/image/upload/v1629118665/Custom%20Columns.png)

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

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](https://quasar.dev/vue-components/table#qtable-api) (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!

```vue
<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',
    },
  ]"
/>
```

![Dark And Dense](https://res.cloudinary.com/quasarcast-com/image/upload/v1629118665/Dark%20And%20Dense.png)

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

## 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](https://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 :wink:

And remember!

There is **nothing** you can't build...