CODEWITHSUNDEEP
vue.jsquasar-framework
Ira Ramírez
Ira Ramírez

Reputation: 160

Q-table: rendering several columns from a single field?

I have a quasar table that displays some information fetched from an API, and I'm trying to define the columns in a way that makes sense. The API, among other things, returns this:

{
  "scan_settings": {
    "group_name": "default_group",
    "profile_id": "Default Scan",
    "scan_occurrence": "Daily",
    "scan_window_duration": 3,
    "scan_window_initial_time": "12:00:00",
    "scan_window_timezone": ""
  }
}

I want to display separately group_name, profile_id, scan_occurrence, scan_window_duration and scan_window_initial_time,

As I understand the docs, I could define columns like this:

const columns = [
 {
  name: 'group_name',
  label: 'Qualys scan settings',
  field: row => row?.group_name
 },
 {
  name: 'profile_id',
  label: 'Qualys scan type',
  field: row => row?.profile_id
 },
/* and so on */
]

and so each cell would display the value of scan_settings.group_name in that column. However, it's as if the table is looking for a property with the same name as the column, and then using that as the argument for the field function.

This would work with a plain q-table but I'm using the body slot, too, to change display depending on the type of info it's been shown (checkboxes for booleans and so forth)

This is how the body slot looks like (omitting some stuff for brevity):

 <template #body="props">
      <q-tr :props="props">
        <q-td
          v-for="col in props.cols"
          :key="col.name"
          :props="props"
          class="table-cell"
        >
          <span v-if="dateColumns.includes(col.name)">
            {{ parseISODateStringToLocale(props.row[col.name]) }}
          </span>
          <!-- omitted for brevity -->
          <span v-else>
            {{ props.row[col.name] }}
          </span>
        </q-td>
      </q-tr>
    </template>

Notice how the template looks for the value - that is the problem, that's what introduces this behaviour. But I don't know what would be the best way to put that value inside of the template instead. What can I do?

Upvotes: 0

Views: 2059

Answers (2)

Irina Kats
Irina Kats

Reputation: 31

I've done a similar grouping by using body-cell-[name] slot:

<q-td :key="column.name" :props="props">
  <slot
    :name="`body-cell-${column.name}`"
    :props="props"
    :column="column"
    :row="props.row"
  >
      {{ props.row[column.name] }}
  </slot>
</q-td>

And then the default value in the slot gets replaced in the parent by a custom cell or a custom component, for example:

<template #body-cell-status="props">
  <status-cell :status="props.row.status"></status-cell>
</template>

You could use dynamic components here i.e. instead of -status above use your dynamic value and then use the dynamic value with <component :is=...>.

And this special component ( above) renders your group of values.

Upvotes: 0

Pratik Patel
Pratik Patel

Reputation: 6978

If you are using a body slot then fields you can't use directly.

https://codepen.io/Pratik__007/pen/wvXRoWZ

Upvotes: 1

Related Questions