Table cell to output multiple fields

[scp-nm]

Hi there, I'm looking at Quasar as a potential new framework for an existing SaaS product I look after, we're currently using Vuetify 1.5.x grin.

One question I have is whether it's possible to use multiple fields from some json data in one cell?

An example is:

[
  {
    "id": 1234,
    "personAvatarUrl": "https://.../profile.png",
    "personFullName": "Bob Smith",
    "personRole": "Publican"
  },
  ...
]

And what I'd like to do is have the following in the q-table slot area:

<template #body-cell-person="props">
  <q-td :props="props">
    <div class="person-display">
      <q-avatar>
        <img :src="props.avatarUrl">
      </q-avatar>
      <div>
        <div>{{ props.fullName }}</div>
        <div>{{ props.role }}</div>
      </div>
    </div>
  </q-td>
</template>

I thought I'd be able to do this:

columns: [
  {
    align: 'left',
    field: row => {
      avatarUrl: row.personAvatarUrl,
      fullName: row.personFullName,
      role: row.personRole
    },
    label: 'Person',
    name: 'person',
    sortable: true
  },
  ...
]

But setting the column field like the above doesn't seem to work. Any help/tips would be appreciated.

Thanks in advance.

[odranoelBR]

Hi @scp-nm, I hope you enjoy Quasar!

Check here: https://codesandbox.io/s/table-cell-to-output-multiple-fields-7bpvb
When customizing the field, the output goes into "props.value"

[scp-nm]

Awesome, thanks. It's good to know I was pretty close.

[metalsadman]

You can also access props.row.someProp props.row.someOtherProp and etc... What you put on the field prop though, is what will be used with sorting if you set the column sortable:true.